Mindo is a cross-platform web and mobile application designed to streamline and supercharge access to educational content from YouTube. With a focus on smart learning, Mindo transforms how students and self-learners engage with video-based education through powerful tools like playlist search, course creation, progress tracking, and collaborative group chats.
- Vite: Next-generation frontend tooling with lightning-fast HMR and build performance
- TypeScript: Strong typing for enhanced code quality and developer experience
- SWC: Super-fast JavaScript/TypeScript compiler and bundler
- Redux Toolkit: The official, opinionated toolkit for efficient Redux development
- React Query: Data fetching and state management for asynchronous operations
- Tailwind CSS: Utility-first CSS framework for rapid UI development
- shadcn/ui: High-quality, accessible UI components built with Radix UI and Tailwind CSS
- Framer Motion: Production-ready animation library for React
- Node.js (v18 or higher)
- npm or yarn or pnpm
# Clone the repository
git clone https://github.com/easc01/mindo-webapp.git
# Navigate to the project directory
cd your-repository
# Install dependencies
npm install
# or
yarn
# or
pnpm installStart the development server:
npm run dev
# or
yarn dev
# or
pnpm devThe application will be available at http://localhost:5173 by default.
Build the application for production:
npm run build
# or
yarn build
# or
pnpm buildPreview the production build locally:
npm run preview
# or
yarn preview
# or
pnpm preview/src
/assets # Static assets like images, fonts, etc.
/components # Reusable UI components
/ui # shadcn/ui components
/hooks # Custom React hooks
/lib # Utility functions and shared code
/pages # Page components
/services # API services and data fetching logic
/store # Redux store configuration and slices
/types # TypeScript type definitions
App.tsx # Main App component
index.css # Global styles and Tailwind configurations
main.tsx # Entry point
- Dynamic Content Curation: Auto generate roadmaps of a subject using AI and get relevant Youtube lectures
- Communities: Fully fledged support for realtime communication using Chats and Video/Voice Calls
- Quizzes & Tests: Interactive multiple choice questions games
This project uses Tailwind CSS for styling. The configuration can be found in tailwind.config.js. To learn more about using Tailwind, check out the official documentation.
To add new shadcn/ui components:
npx shadcn-ui@latest add [component-name]Replace [component-name] with components like button, dialog, card, etc.