🚀 Coding Hustlers

Code. Compete. Conquer. 💻

The ultimate platform for mastering programming through interactive courses, AI-powered tests, and real-world coding challenges.

📖 Table of Contents

✨ Features
🛠️ Tech Stack
🚀 Getting Started
📁 Project Structure
🔥 Key Features Breakdown
🎯 Usage Guide
🤝 Contributing
📄 License
👨‍💻 Author

✨ Features

🎓 Comprehensive Learning Platform

📚 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

💯 Advanced Testing System

✅ 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

🔐 Secure Authentication

🔒 Firebase Authentication: Industry-standard security
👤 User Profiles: Personalized dashboard and settings
🎨 Profile Customization: Avatar, bio, and social links

🎨 Modern UI/UX

🌙 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

🛠️ Tech Stack

Frontend

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

Backend & Services

Technology	Description
	Authentication & Firestore database
	AI-powered content generation

Development Tools

Technology	Description
	Code linting and quality
	CSS transformations
	Beautiful icon library

🚀 Getting Started

Prerequisites

Before you begin, ensure you have the following installed:

Node.js (v18 or higher) - Download
npm (v9 or higher) - Comes with Node.js
Git - Download

Installation

Clone the repository

git clone https://github.com/panduthegang/Coding-Hustlers.git
cd Coding-Hustlers

Install dependencies

npm install

Environment Setup

Create 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

🔑 Getting API Keys

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

Running the Project

Development Mode

npm run dev

The application will start at http://localhost:5173

Build for Production

npm run build

Preview Production Build

npm run preview

Lint Code

npm run lint

Type Check

npm run typecheck

📁 Project Structure

Coding-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

🔥 Key Features Breakdown

1. 🎓 Course System

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

2. 💯 Testing & Assessment

Two types of tests to evaluate your skills:

MCQ Tests

Multiple-choice questions with instant feedback
Topic-based categorization
Timed challenges
Score tracking and analytics

Coding Challenges

Real programming problems
Multiple difficulty levels
Code execution and validation
Performance metrics

3. 👤 User Management

Authentication: Secure login/signup with Firebase
Profile Management: Customizable user profiles
Settings: Personalize your experience
Dashboard: Centralized view of your progress

4. 🎨 UI/UX Excellence

Responsive Design: Works on all devices
Modern Aesthetics: Clean and professional interface
Smooth Animations: Delightful user interactions
Accessibility: Built with accessibility in mind

🎯 Usage Guide

For Learners

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

For Developers

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

🤝 Contributing

We welcome contributions from the community! Here's how you can help:

Steps to Contribute

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

Contribution Guidelines

Follow the existing code style
Write clear commit messages
Add tests for new features
Update documentation as needed
Be respectful and constructive

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

👨‍💻 Author

Pandu the Gang

GitHub: @panduthegang
Repository: Coding Hustlers

🌟 Star this repository if you find it helpful!

Made with ❤️ by developers, for developers

📬 Questions or Suggestions?

Feel free to open an issue or reach out!

Happy Coding! 🚀

Name		Name	Last commit message	Last commit date
Latest commit History 26 Commits
public		public
src		src
.gitattributes		.gitattributes
.gitignore		.gitignore
README.md		README.md
eslint.config.js		eslint.config.js
firestore.indexes.json		firestore.indexes.json
firestore.rules		firestore.rules
index.html		index.html
package-lock.json		package-lock.json
package.json		package.json
postcss.config.js		postcss.config.js
tailwind.config.js		tailwind.config.js
tsconfig.app.json		tsconfig.app.json
tsconfig.json		tsconfig.json
tsconfig.node.json		tsconfig.node.json
vercel.json		vercel.json
vite.config.ts		vite.config.ts

panduthegang/Coding-Hustlers

Folders and files

Latest commit

History

Repository files navigation