🎓 EduPlatform - Course Listing & Registration System

Frontend Developer | React, TypeScript, Tailwind CSS

A modern, responsive web application for browsing and registering for online courses. Built with React, TypeScript, and Tailwind CSS, featuring beautiful animations, real-time search, and an intuitive user experience.

🚀 Live Demo

https://meh-clrp-8fd411.netlify.app/

🌟 Features

🎨 Beautiful UI/UX

• Modern Design: Clean, professional interface with gradient backgrounds and smooth animations
• Responsive Layout: Optimized for all devices (mobile, tablet, desktop)
• Interactive Elements: Hover effects, micro-interactions, and smooth transitions
• Glass Morphism: Modern glass effects and backdrop blur elements

🔍 Advanced Search & Filtering

• Real-time Search: Instant search across courses, instructors, and topics
• Smart Filters: Filter by mode (Online/In-Person/Hybrid), level, and category
• Multiple Sort Options: Sort by name, price, rating, start date, or popularity
• Keyboard Navigation: Full keyboard support with shortcuts (Cmd/Ctrl + K for search)

🔐 Authentication System

• User Login/Registration: Complete authentication flow with form validation
• Demo Credentials: Quick access with [email protected] / demo123
• User Profiles: Avatar generation and user session management
• Secure Storage: Local storage for session persistence

📱 Enhanced User Experience

• Animated Transitions: Smooth page transitions and loading states
• Interactive Course Cards: Hover effects, trending indicators, and detailed previews
• Registration Flow: Multi-step registration with form validation
• Success Feedback: Confirmation pages with next steps

🎯 Course Management

• Detailed Course Pages: Comprehensive course information with prerequisites and outcomes
• Registration System: Complete registration flow with form validation
• Course Categories: Organized by Web Development, Design, Data Science, Marketing, etc.
• Instructor Profiles: Detailed instructor information and ratings

🛠️ Tech Stack

• Frontend Framework: React 18 with TypeScript

• Styling: Tailwind CSS with custom animations

• Icons: Lucide React

• Build Tool: Vite

• Deployment: Netlify

• Code Quality: ESLint with TypeScript support

  📦 Installation

1. Clone the repository

   git clone <repository-url>
   cd course-listing-system

2. Install dependencies

   npm install

3. Start development server

   npm run dev

4. Open in browser

   http://localhost:5173
   

🏗️ Project Structure

src/
├── components/           # React components
│   ├── CourseCard.tsx   # Individual course display
│   ├── CourseList.tsx   # Course listing with filters
│   ├── CourseDetails.tsx # Detailed course view
│   ├── RegistrationForm.tsx # Course registration
│   ├── SuccessMessage.tsx # Registration confirmation
│   ├── Navbar.tsx       # Navigation with auth
│   ├── LoginModal.tsx   # Authentication modal
│   └── SearchModal.tsx  # Global search interface
├── hooks/               # Custom React hooks
│   ├── useAuth.ts      # Authentication logic
│   └── useTime.ts      # Real-time clock
├── data/               # Static data
│   └── courses.ts      # Course information
├── types/              # TypeScript definitions
│   └── course.ts       # Type definitions
└── styles/
    └── index.css       # Global styles and animations

🎨 Key Components

CourseCard

• Interactive course preview cards
• Hover animations and effects
• Rating and enrollment indicators
• Trending course badges

CourseList

• Advanced filtering and search
• Responsive grid layout
• Animated course loading
• Filter state management

Navbar

• User authentication status
• Global search access
• Responsive mobile menu
• User profile dropdown

SearchModal

• Instant search results
• Keyboard navigation
• Highlighted search terms
• Course quick access

🎯 Features in Detail

Authentication

• Login/Register: Complete user authentication system
• Form Validation: Real-time validation with error messages
• Session Management: Persistent login state
• Demo Access: Quick demo login for testing

Course Browsing

• Search: Real-time search across all course content
• Filters: Multiple filter options with visual indicators
• Sorting: Various sorting options for better discovery
• Responsive: Optimized for all screen sizes

Course Registration

• Multi-step Flow: Guided registration process
• Form Validation: Comprehensive input validation
• Confirmation: Success page with next steps
• User Feedback: Clear status messages

Animations & Interactions

• Smooth Transitions: CSS animations and transitions
• Hover Effects: Interactive element responses
• Loading States: Animated loading indicators
• Micro-interactions: Subtle UI feedback

🎨 Design System

Colors

• Primary: Blue gradient (#3B82F6 to #8B5CF6)
• Secondary: Purple and indigo variations
• Success: Green (#10B981)
• Warning: Orange (#F59E0B)
• Error: Red (#EF4444)

Typography

• Headings: Bold, gradient text effects
• Body: Clean, readable fonts
• Monospace: For time display and code

Spacing

• 8px Grid System: Consistent spacing throughout
• Responsive Breakpoints: Mobile-first approach

🔮 Future Enhancements

• Dark Mode: Toggle between light and dark themes
• Course Progress: Track learning progress
• Wishlist: Save courses for later
• Reviews: User course reviews and ratings
• Payment Integration: Stripe payment processing
• Video Previews: Course preview videos
• Certificates: Digital completion certificates
• Social Features: Share courses and achievements