CodeSkillz

📖 About

CodeSkillz is a modern, full-featured online coding education platform that offers both live classes via Google Meet and recorded on-demand courses. Built with React and TypeScript, this platform provides an engaging learning experience for students looking to master programming skills.

✨ Features

🎥 Learning Options

• Live Classes - Interactive sessions via Google Meet with real-time Q&A
• Recorded Courses - On-demand video content for self-paced learning
• Course Assignments - Hands-on coding projects and exercises

👤 User Experience

• User Dashboard - Track progress, manage enrollments, and view achievements
• Course Catalog - Browse and filter available courses
• Progress Tracking - Monitor your learning journey with detailed analytics
• Achievements System - Earn badges and rewards for milestones

🌐 Internationalization

• Multi-language Support - Full i18n implementation with language switcher
• RTL Support - Right-to-left layout support for languages like Persian/Arabic

📱 Modern UI/UX

• Responsive Design - Fully optimized for desktop, tablet, and mobile
• Dark/Light Themes - Theme switching with next-themes
• Accessible Components - Built with Radix UI primitives for accessibility
• Smooth Animations - Polished animations with Tailwind CSS

📝 Content & Community

• Blog System - Educational articles and tutorials
• FAQ Section - Searchable frequently asked questions
• Newsletter Signup - Stay updated with new courses and content
• Contact Form - Easy communication channel

🛠️ Tech Stack

Frontend

Technology	Purpose
React 18	UI Library
TypeScript	Type Safety
Vite	Build Tool & Dev Server
React Router DOM	Client-side Routing
TanStack Query	Server State Management

Backend

Technology	Purpose
Python	Backend Language
Django	Web Framework
Django REST Framework	RESTful API
PostgreSQL	Relational Database

Styling

Technology	Purpose
Tailwind CSS	Utility-first CSS
Radix UI	Accessible UI Primitives
Lucide React	Icon Library
tailwindcss-animate	Animations

Form & Validation

Technology	Purpose
React Hook Form	Form Management
Zod	Schema Validation

Internationalization

Technology	Purpose
i18next	Internationalization Framework
react-i18next	React Integration
i18next-browser-languagedetector	Auto Language Detection

Other Libraries

Technology	Purpose
Recharts	Data Visualization
date-fns	Date Utilities
Sonner	Toast Notifications
Embla Carousel	Carousel Component

📁 Project Structure

CodeSkillz/
├── public/                 # Static assets
├── src/
│   ├── assets/            # Images and media files
│   ├── components/        # Reusable UI components
│   │   ├── ui/           # Radix UI-based primitives
│   │   ├── Header.tsx
│   │   ├── Footer.tsx
│   │   ├── CourseCard.tsx
│   │   ├── BlogCard.tsx
│   │   ├── LanguageSwitcher.tsx
│   │   └── ... 
│   ├── contexts/          # React Context providers
│   ├── data/              # Static data and mock content
│   ├── hooks/             # Custom React hooks
│   ├── i18n/              # i18n configuration
│   ├── lib/               # Utility functions
│   ├── locales/           # Translation files
│   ├── pages/             # Page components
│   │   ├── Home.tsx
│   │   ├── Courses.tsx
│   │   ├── CourseDetail.tsx
│   │   ├── Dashboard.tsx
│   │   ├── Blog.tsx
│   │   ├── About.tsx
│   │   ├── Contact.tsx
│   │   ├── Auth.tsx
│   │   ├── FAQ.tsx
│   │   └── ... 
│   ├── App.tsx            # Main application component
│   ├── main.tsx           # Application entry point
│   └── index.css          # Global styles
├── package.json
├── tailwind.config.ts
├── vite.config. ts
├── tsconfig.json
└── README.md

🚀 Getting Started

Prerequisites

• Node.js >= 18.0.0
• npm >= 9.0.0 (or Bun)

Installation

1. Clone the repository

   git clone https://github.com/farzadasgari/CodeSkillz. git
   cd CodeSkillz

2. Install dependencies

   npm install
   # or with Bun
   bun install

3. Start the development server

   npm run dev

4. Open your browser Navigate to http://localhost:8080

Available Scripts

Command	Description
npm run dev	Start development server
npm run build	Build for production
npm run preview	Preview production build
npm run lint	Run ESLint
npm run format	Format code with Prettier

🌍 Deployment

The project is configured for GitHub Pages deployment. The live version is available at:

🔗 https://farzadasgari.github.io/CodeSkillz/

To deploy your own instance:

npm run build

The build output will be in the dist/ directory, ready for deployment to any static hosting service.

🤝 Contributing

Contributions are welcome! Please read our Code of Conduct before contributing.

1. Fork the repository
2. Create your feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

🔒 Security

For security concerns, please review our Security Policy.

📄 License

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

📨 Contact

If you have any questions or suggestions regarding CodeSkillz, feel free to contact us at khufarzadasgari@gmail.com or std_farzad.asgari@khu.ac.ir.

🔗 Links

---

⭐ Support & Donations

If you find CodeSkillz useful, please consider supporting development:

💸 Crypto Donations

• Bitcoin: bc1qxd8um2jre6xz4je64uhar9eh9uzu9yrvzh08sm
• Ethereum: 0xCc8693060409263F68e37f75f76d519c19B2bAdE
• USDT (TRC20): TLL9ou7PahrNob2GEppV3o4e5B9vYqgsJN

🌐 Donate via CoinDrop

---

_{Made with ❤️ by FarZad}