README.md

Byway

This project is an online platform for selling courses. The primary goal of the project is to provide users with an intuitive interface for searching, purchasing, creating, and taking educational courses.

Read this in other languages: Русский.

The published version of the site <>

Table of Contents

• ⚙️ Functionality
  • ⭐ Features
• 🗺️ Roadmap
• 🔧 Tech Stack
  • 🌐 Frontend
  • 🖧 Backend and Database
• 🏛️ Architecture
  • 📁 Project Structure
• 💻 Installation

⚙️ Functionality

• Authentication and Registration: Users can create accounts, log in, and manage their sessions.

• Course Management: A course includes information about content, instructor, and reviews and ratings. Courses can be loaded using Firebase Firestore and displayed as cards on the platform's pages.

• Reviews: Users can leave reviews for completed courses. Each review is associated with a specific course and user.

• Data Storage: The project uses Firebase Firestore to store information about users, courses, and reviews. User data, including avatars, is uploaded and stored in Firebase Storage.

  ⭐ Features

  • Client-side data storage in LocalStorage. This feature allows the web application to work efficiently even after a page reload.

🗺️ Roadmap

• Implement course creation functionality for users
• Add the ability to edit and manage created courses
• Add course purchase functionality
• Add functionality for creating course reviews
• Add course search functionality on the main page
• Develop an admin panel for managing course content and moderating user-created courses

🔧 Tech Stack

🌐 Frontend

• React + TypeScript
• Redux Toolkit
• Redux Persist
• Vite
• CSS Modules

🖧 Backend and Database

• Firebase Firestore
• Firebase Storage
• Firebase Authentication

🏛️ Architecture

The project uses the architectural methodology for frontend projects Feature-Sliced Design, which ensures a clear separation of functional modules, improving code scalability and maintainability.

📁 Project Structure

The project structure is as follows:

└── src/
├── 1_app/                  # Application initialization logic                #
|                           #
├── 2_pages/                # Layer: Application pages
|   ├── {some-page}/        #     Slice: (example: Homepage page)
|   |   └── ui/             #         Segment: UI components, component styles
|   |   └── index.ts        #         Public API
|   ...                     #
|                           #
├── 3_widgets/              # Layer: Self-contained and complete blocks for pages
|   ├── {some-widget}/      #     Slice: (example: Header widget)
|   |   ├── lib/            #         Segment: Infrastructure logic (helpers/utils)
|   |   ├── model/          #         Segment: Business logic
|   |   └── ui/             #         Segment: UI components, component styles
|   |   └── index.ts        #         Public API
|   ...                     #
├── 4_features/             # Layer: Handled user scenarios
|   ├── {some-feature}/     #     Slice: (example: SearchCourse feature)
|   |   ├── lib/            #         Segment: Infrastructure logic (helpers/utils)
|   |   ├── model/          #         Segment: Business logic
|   |   └── ui/             #         Segment: UI components, component styles
|   |   └── index.ts        #         Public API
|   ...                     #
|                           #
├── 5_entities/             # Layer: Business entities handled by the domain
|   ├── {some-entity}/      #     Slice: (example: Course entity)
|   |   ├── lib/            #         Segment: Infrastructure logic (helpers/utils)
|   |   ├── model/          #         Segment: Business logic
|   |   └── ui/             #         Segment: UI components, component styles
|   |   └── index.ts        #         Public API
|   ...                     #
|                           #
├── 6_shared/               # Layer: Reusable modules not tied to business logic
|   ├── api/                #         Segment: Backend interaction (request functions, mappers)
|   ├── config/             #         Segment: Application configuration (configuration keys, ...)
|   ├── lib/                #         Segment: Application infrastructure logic (utils/helpers)
|   ├── types/              #         Segment: Global types (entity types, errors, status ...)
│   └── ui/                 #         Segment: Reusable UI resources (UI components, UI templates, icons, images)
|   ...                     #
|                           #
└── main.tsx/               # Application entry point

💻 Installation

1. Clone the repository

git clone https://github.com/OnliEducation/Learning_Management_System.git

2. Switch to the project directory

cd Learning_Management_System

3. Install dependencies

npm install

4. Run the application

npm run dev