The ultimate platform for mastering programming through interactive courses, AI-powered tests, and real-world coding challenges.
- β¨ Features
- π οΈ Tech Stack
- π Getting Started
- π Project Structure
- π₯ Key Features Breakdown
- π― Usage Guide
- π€ Contributing
- π License
- π¨βπ» Author
- π Interactive Courses: Structured learning paths with chapters and lessons
- π§ AI-Powered Content: Dynamic course generation using Google Gemini AI
- π Progress Tracking: Monitor your learning journey with detailed analytics
- π Achievement System: Earn badges and track milestones
- β MCQ Tests: Multiple-choice questions to test your knowledge
- π» Coding Challenges: Real-world programming problems with instant feedback
- β±οΈ Timed Assessments: Practice under time constraints
- π Performance Analytics: Detailed insights into your test results
- π Firebase Authentication: Industry-standard security
- π€ User Profiles: Personalized dashboard and settings
- π¨ Profile Customization: Avatar, bio, and social links
- π Beautiful Design: Clean, modern interface with smooth animations
- π± Fully Responsive: Optimized for desktop, tablet, and mobile
- β‘ Lightning Fast: Built with Vite for optimal performance
- π Intuitive Navigation: Seamless user experience
| Technology | Description |
|---|---|
| UI library for building interactive interfaces | |
| Type-safe JavaScript for robust code | |
| Next-generation frontend tooling | |
| Utility-first CSS framework | |
| Client-side routing |
| Technology | Description |
|---|---|
| Authentication & Firestore database | |
| AI-powered content generation |
| Technology | Description |
|---|---|
| Code linting and quality | |
| CSS transformations | |
| Beautiful icon library |
Before you begin, ensure you have the following installed:
- Clone the repository
git clone https://github.com/panduthegang/Coding-Hustlers.git
cd Coding-Hustlers- Install dependencies
npm installCreate a .env file in the root directory with the following variables:
# Firebase Configuration
VITE_FIREBASE_API_KEY=your_firebase_api_key
VITE_FIREBASE_AUTH_DOMAIN=your_firebase_auth_domain
VITE_FIREBASE_PROJECT_ID=your_firebase_project_id
VITE_FIREBASE_STORAGE_BUCKET=your_firebase_storage_bucket
VITE_FIREBASE_MESSAGING_SENDER_ID=your_firebase_messaging_sender_id
VITE_FIREBASE_APP_ID=your_firebase_app_id
# Google Gemini AI
VITE_GEMINI_API_KEY=your_gemini_api_key-
Firebase:
- Go to Firebase Console
- Create a new project or select existing
- Navigate to Project Settings β General β Your apps
- Copy the configuration values
-
Google Gemini AI:
- Go to Google AI Studio
- Create an API key
- Copy the key
npm run devThe application will start at http://localhost:5173
npm run buildnpm run previewnpm run lintnpm run typecheckCoding-Hustlers/
βββ public/ # Static assets
β βββ logo.svg # App logo
β βββ hero-person.png # Hero section image
β βββ coding-illustration.png # Coding section image
β βββ community-illustration.png # Community section image
βββ src/
β βββ components/ # Reusable components
β β βββ Header.tsx # Navigation header
β β βββ Footer.tsx # Footer component
β β βββ Sidebar.tsx # Dashboard sidebar
β β βββ HeroSection.tsx # Landing hero section
β β βββ ChapterOverview.tsx # Course chapter display
β β βββ CommunitySection.tsx # Community features
β β βββ CompaniesSection.tsx # Partner companies
β β βββ ProtectedRoute.tsx # Auth route guard
β βββ contexts/ # React contexts
β β βββ AuthContext.tsx # Authentication context
β βββ pages/ # Page components
β β βββ Landing.tsx # Landing page
β β βββ Login.tsx # Login page
β β βββ SignUp.tsx # Sign up page
β β βββ Dashboard.tsx # User dashboard
β β βββ Courses.tsx # Courses listing
β β βββ CourseDetail.tsx # Course detail page
β β βββ ChapterTest.tsx # Chapter tests
β β βββ Tests.tsx # Tests overview
β β βββ MCQTest.tsx # MCQ test page
β β βββ CodingTest.tsx # Coding challenge page
β β βββ Profile.tsx # User profile
β β βββ Settings.tsx # User settings
β β βββ About.tsx # About page
β βββ lib/ # Utility libraries
β β βββ courseData.ts # Course data management
β β βββ courseStorage.ts # Course persistence
β β βββ gemini.ts # AI integration
β β βββ localStorage.ts # Local storage utilities
β βββ services/ # API services
β β βββ firestore.ts # Firestore operations
β βββ types/ # TypeScript types
β β βββ course.ts # Course type definitions
β β βββ profile.ts # Profile type definitions
β βββ config/ # Configuration files
β β βββ firebase.ts # Firebase configuration
β βββ App.tsx # Main app component
β βββ main.tsx # App entry point
β βββ index.css # Global styles
βββ .env # Environment variables
βββ index.html # HTML template
βββ package.json # Dependencies
βββ tsconfig.json # TypeScript config
βββ tailwind.config.js # Tailwind config
βββ vite.config.ts # Vite config
βββ firestore.rules # Firestore security rules
βββ firestore.indexes.json # Firestore indexes
βββ README.md # Project documentation
The platform offers a comprehensive course management system:
- Dynamic Course Creation: AI-powered course generation
- Chapter-Based Learning: Structured content divided into manageable chapters
- Progress Tracking: Automatic saving of course progress
- Multiple Formats: Support for video, text, and interactive content
Two types of tests to evaluate your skills:
- Multiple-choice questions with instant feedback
- Topic-based categorization
- Timed challenges
- Score tracking and analytics
- Real programming problems
- Multiple difficulty levels
- Code execution and validation
- Performance metrics
- Authentication: Secure login/signup with Firebase
- Profile Management: Customizable user profiles
- Settings: Personalize your experience
- Dashboard: Centralized view of your progress
- Responsive Design: Works on all devices
- Modern Aesthetics: Clean and professional interface
- Smooth Animations: Delightful user interactions
- Accessibility: Built with accessibility in mind
- Sign Up: Create your account to get started
- Browse Courses: Explore available courses on the Courses page
- Start Learning: Enroll in courses and complete chapters
- Take Tests: Challenge yourself with MCQ and coding tests
- Track Progress: Monitor your achievements on the Dashboard
- Fork the Repository: Create your own copy
- Set Up Environment: Configure your API keys
- Make Changes: Implement your features
- Test Thoroughly: Ensure everything works
- Submit PR: Contribute back to the community
We welcome contributions from the community! Here's how you can help:
- Fork the repository
- Create a feature branch
git checkout -b feature/amazing-feature
- Commit your changes
git commit -m 'Add some amazing feature' - Push to the branch
git push origin feature/amazing-feature
- Open a Pull Request
- Follow the existing code style
- Write clear commit messages
- Add tests for new features
- Update documentation as needed
- Be respectful and constructive
This project is licensed under the MIT License - see the LICENSE file for details.
Pandu the Gang
- GitHub: @panduthegang
- Repository: Coding Hustlers
Made with β€οΈ by developers, for developers
Feel free to open an issue or reach out!
Happy Coding! π