A collaborative learning platform for discovering programming courses, reading educational articles, tracking learning progress, and delivering a modern user experience.
⚠️ Note: The live demo depends on an external backend API. Some dynamic features may be unavailable if the API server is offline
Programming Courses • Educational Blog • Interactive Dashboard • Responsive Design
- About
- Highlights
- Features
- Tech Stack
- Application Architecture
- Screenshots
- Getting Started
- Project Structure
- Team
Nova is a modern web-based Programming E-Learning Platform designed to make learning programming more accessible, engaging, and interactive.
The platform enables users to discover programming courses, reserve courses, read educational articles, interact with instructors, and manage their learning journey through a personalized dashboard. It provides a smooth and intuitive experience while simplifying access to educational resources.
Built with a modern frontend architecture, Nova emphasizes performance, responsiveness, scalability, and maintainability to support future growth and feature expansion.
- 🎓 Modern programming e-learning platform
- 📱 Fully responsive design
- 🌙 Dark mode support
- 🌍 Multi-language interface
- ⚡ Optimized with TanStack Query
- 🎙️ Integrated voice assistant
- 💬 Real-time chat system
- 🛠️ Nova Admin Panel for full content management
- Explore programming courses with comprehensive details
- Reserve courses for future enrollment
- Search, filter, sort, and paginate course listings
- Rate courses and discover related learning content
- Save favorite courses for quick access
- Read educational articles across various programming topics
- Browse articles by category
- Like and rate blog posts
- Participate in discussions through comments and replies
- Save favorite articles
- Manage personal profile and account information
- Access reserved courses
- Organize favorite courses and blog posts
- View notifications and activity history
- Manage account security settings
- Assess programming skills through an interactive level assessment
- Use the integrated voice assistant for a more interactive experience
- Communicate through the built-in chat system
- User registration and login
- OTP verification
- Password recovery and reset
- Secure account management
- Fully responsive design
- Dark mode support
- Multi-language interface
- Clean and intuitive user interface
- Reusable component-based architecture
- Optimized performance for a smooth user experience
Nova is built using a modern frontend ecosystem that prioritizes scalability, maintainability, and performance.
| Category | Technologies |
|---|---|
| Frontend | React 19, Vite (Rolldown) |
| Language | JavaScript (ES6+) |
| Styling | Tailwind CSS v4, HeroUI, DaisyUI |
| Routing | React Router DOM |
| State Management | Zustand, React Context API |
| Data Fetching | Axios, TanStack Query |
| Forms & Validation | React Hook Form, Zod, Yup |
| Internationalization | i18next, React i18next |
| Animations | Framer Motion |
| Real-time Communication | Socket.IO Client |
| Maps | Leaflet, React Leaflet |
| UI Enhancements | Swiper, React Icons, React Hot Toast, React Toastify, Typewriter Effect |
flowchart TD
A[👤 User]
A --> B[React Router]
B --> C[Pages]
C --> D[Reusable Components]
D --> E[Hooks & Zustand]
E --> F[TanStack Query]
F --> G[Axios]
G --> H[(REST API)]
C --> I[Authentication]
C --> J[Courses]
C --> K[Blog]
C --> L[Dashboard]
L --> M[Profile]
L --> N[Favorites]
L --> O[Reservations]
J --> P[Course Details]
K --> Q[Article Details]
Q --> R[Comments & Replies]
L --> S[Notifications]
L --> T[Security Settings]
Take a quick look at Nova in action.
Explore some of the main pages of Nova.
🎓 Courses 📖 Course Details 📰 Blog
👤 User Dashboard
Follow the steps below to run the project locally.
Make sure you have the following installed:
- Node.js (v20 or later recommended)
- npm (or another compatible package manager such as pnpm)
git clone https://github.com/react-summer-1404/Nova.gitnpm installCreate a .env file in the project root and add the required environment variables.
VITE_API_URL=https://sepehracademy.liara.runContact the backend team if you need access to the API endpoints or environment configuration.
npm run devThe application will be available at:
http://localhost:5173
npm run buildnpm run previewThe project follows a modular and scalable architecture to improve maintainability and collaboration.
src
│
├── assets/ Static assets (images, icons, fonts, etc.)
├── components/ Reusable UI components shared across the application
├── configs/ Global application configuration
├── constants/ Shared constants and static values
├── context/ React Context providers
├── features/ Feature-specific modules (Authentication, Chat, Voice Assistant, etc.)
├── hooks/ Custom React hooks
├── layouts/ Shared page layouts
├── pages/ Route-level pages
├── router/ Application routing configuration
├── services/ API services and server communication
├── store/ Global state management (Zustand)
├── styles/ Global styles
├── utils/ Utility and helper functions
└── main.jsx Application entry point
Nova was collaboratively developed by a team of developers as an educational software project.
The project reflects a collaborative effort in designing, implementing, and integrating different parts of a modern programming e-learning platform.
Made with ❤️ by Nova Team
⭐ If you like this project, consider giving it a star on GitHub.