A modern, full-stack web application for discovering and exploring online courses. Built with React, TypeScript, Express.js, and PostgreSQL.
The application is deployed on Vercel: https://course-finder-react-mini-app-new.vercel.app/
- 🔍 Search & Filter: Search courses by name, category, description, or instructor
- 🏷️ Category Filtering: Filter courses by multiple categories simultaneously
- 📊 Sorting Options: Sort courses by name, category, duration, or difficulty level
- ⭐ Favorites: Save your favorite courses for quick access
- 💬 Inspirational Quotes: Display motivational quotes from a public API
- 🎨 Modern UI: Beautiful, responsive design with dark mode support
- 📱 Mobile Responsive: Optimized for all screen sizes
- React 18 - UI library
- TypeScript - Type safety
- Vite - Build tool and dev server
- Tailwind CSS - Styling
- Radix UI - Accessible component primitives
- TanStack Query - Data fetching and caching
- Wouter - Lightweight routing
- Framer Motion - Animations
- Lucide React - Icons
- Express.js - Web framework
- TypeScript - Type safety
- PostgreSQL - Database
- Drizzle ORM - Database toolkit
- Zod - Schema validation
Course-Finder-React-Mini-App/
├── client/ # Frontend React application
│ ├── src/
│ │ ├── components/ # React components
│ │ ├── pages/ # Page components
│ │ ├── hooks/ # Custom React hooks
│ │ └── lib/ # Utility functions
│ └── index.html
├── server/ # Backend Express application
│ ├── index.ts # Server entry point
│ ├── routes.ts # API routes
│ └── storage.ts # Database storage layer
├── shared/ # Shared types and schemas
│ └── schema.ts # Zod schemas and types
└── package.json # Dependencies and scripts
- Node.js (v18 or higher)
- PostgreSQL (v12 or higher)
- npm or yarn
- Clone the repository:
git clone https://github.com/Sg-2003/Course-Finder-React-Mini-App.git
cd Course-Finder-React-Mini-App- Install dependencies:
npm install- Set up environment variables:
Create a
.envfile in the root directory:
DATABASE_URL=postgresql://username:password@localhost:5432/course_finder
PORT=5000
NODE_ENV=development- Set up the database:
npm run db:push- Start the development server:
npm run devThe application will be available at http://localhost:5000
npm run dev- Start development server with hot reloadnpm run build- Build for productionnpm start- Start production servernpm run check- Type check TypeScript codenpm run db:push- Push database schema changes
GET /api/courses- Get all courses
GET /api/quote- Get a random inspirational quote
The application includes a curated list of courses across various categories:
- Web Development
- Data Science
- Design
- Mobile Development
- Marketing
- Cloud Computing
Each course includes:
- Name and description
- Category and difficulty level
- Duration
- Instructor information
- Course image
- Real-time search across course names, categories, descriptions, and instructors
- Case-insensitive matching
- Instant results as you type
- Filter by multiple categories
- Sort by:
- Name (alphabetical)
- Category
- Duration (shortest to longest)
- Level (beginner → intermediate → advanced)
- Save courses to favorites
- Persistent storage using browser localStorage
- Quick access to favorite courses
- Mobile-first approach
- Breakpoints for tablet and desktop
- Optimized layouts for all screen sizes
Contributions are welcome! Please feel free to submit a Pull Request.
- Fork the repository
- Create your feature branch (
git checkout -b feature/AmazingFeature) - Commit your changes (
git commit -m 'Add some AmazingFeature') - Push to the branch (
git push origin feature/AmazingFeature) - Open a Pull Request
This project is licensed under the MIT License.
- Course images from Unsplash
- Inspirational quotes from Quotable API
- UI components inspired by shadcn/ui