## Project Description
An interactive web platform for online learning. The application provides structured educational materials in the form of modules and lessons with various types of content: informational blocks, video lessons, interactive quizzes, open questions, and practical assignments.
The project is partially written, and it is important to bring it to an MVP state in the shortest possible time (within two weeks). The project is on GitHub in a private repository, access will be provided to the person with whom we agree on terms and deadlines. Understanding of Supabase and Vercel is important, knowledge of Vue.js will be an advantage.
## Key Functional Features
- **User authentication system** via Supabase
- **Educational content** in the form of modules and lessons
- **Interactive elements** to engage users in learning
- **Progress tracking** of learning and a rewards system
- **Progress saving** in localStorage for continuing learning
- **Responsive design** for various devices
## Project Structure
```
app/
├── index.html # Main page
├── assets/ # Static resources
│ ├── css/ # Styles
│ │ ├── main.css # Main styles
│ │ ├── components.css # Component styles
│ │ └── auth.css # Styles for authentication
│ ├── js/ # JavaScript files
│ │ ├── app.js # Main application script
│ │ ├── auth.js # Authentication logic
│ │ ├── lessons.js # Lessons logic
│ │ └── progress.js # Progress tracking
│ └── img/ # Images
├── components/ # HTML components
│ ├── header.html # Site header
│ ├── auth-modals.html # Authentication modals
│ └── lesson-modal.html # Lesson modal
└── README.md # Project documentation
```
## Technologies
- **Frontend**: HTML5, CSS3, JavaScript (ES6+)
- **Backend**: Supabase for authentication and data storage
- **Data storage**: LocalStorage for saving progress on the user's device
- **Modular architecture** for ensuring the scalability of the application
### Stage 1: Development of the basic structure
- Creating the HTML framework
- Setting up CSS styles using variables and a modular approach
- Creating components for reuse
### Stage 2: Implementation of core functions
- Developing the authentication module via Supabase
- Creating a module for managing lessons and content
- Developing a progress tracking system
### Stage 3: Integration and testing
- Combining all modules into a single application
- Testing user scenarios
- Checking responsiveness for various devices
## Project Launch
- Adding API for loading lesson content
- Expanding types of interactive assignments
- Implementing a grading and feedback system
