Skip to main content

​
Technology Stack

EducaStream is built with a modern React-based architecture using Vite as the build tool and bundler.

​
Frontend Framework

React 18.2

Core UI library with hooks and context API

Vite 4.4

Next-generation frontend build tool

React Router 6

Client-side routing and navigation

Axios

HTTP client for API communication

​
Core Dependencies

The application relies on several key libraries as defined in package.json:12-28: 
"dependencies": {
  "@emailjs/browser": "^3.11.0",
  "@stripe/react-stripe-js": "^2.3.1",
  "@stripe/stripe-js": "^2.1.11",
  "axios": "^1.5.1",
  "dotenv": "^16.3.1",
  "firebase": "^10.5.2",
  "react": "^18.2.0",
  "react-dom": "^18.2.0",
  "react-multi-carousel": "^2.8.4",
  "react-player": "^2.13.0",
  "react-responsive-carousel": "^3.2.23",
  "react-router": "^6.18.0",
  "react-router-dom": "^6.17.0",
  "resend": "^2.0.0",
  "stripe": "^14.3.0",
  "sweetalert2": "^11.9.0"
}

​
Application Architecture

​
Entry Point

The application bootstraps from main.jsx:10-18 with the following configuration: 
import { Suspense } from "react";
import ReactDOM from "react-dom/client";
import App from "./App.jsx";
import { BrowserRouter } from "react-router-dom";
import axios from "axios";
import { CartProvider } from "./context/CartContext.jsx";

axios.defaults.baseURL = "https://backend-educastream-production.up.railway.app/";

ReactDOM.createRoot(document.getElementById("root")).render(
  <Suspense>
    <BrowserRouter>
      <CartProvider>
        <App />
      </CartProvider>
    </BrowserRouter>
  </Suspense>
);

​
Backend API

The frontend connects to a Railway-hosted backend API: https://backend-educastream-production.up.railway.app/

​
Build Configuration

Vite configuration from vite.config.js:1-8: 
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

export default defineConfig({
  plugins: [react()],
  manifest: true,
});

​
Application Structure

​
Context Providers

EducaStream uses React Context for state management:
  1. UserContext (App.jsx:31) - Manages user authentication and profile data
  2. CartProvider (CartContext.jsx:94-106) - Manages shopping cart state with localStorage persistence

​
State Management Pattern

The cart uses a reducer pattern with the following actions:
  • ADD_TO_CART - Adds courses to cart with duplicate checking
  • REMOVE_FROM_CART - Removes courses from cart
  • CLEAR - Clears the entire cart
const initialState = {
  cart: JSON.parse(localStorage.getItem("cart")) || [],
};

​
Storage Strategy

localStorage

Cart items, user session, and payment data

Firebase Storage

Course videos, images, and media files

​
Routing Architecture

​
Route Protection

The application implements role-based routing from App.jsx:73-151:
1

Admin Routes

Available only to users with isAdmin flag:
  • /admin/dashboard/:id - Admin dashboard
2

Authenticated Routes

Available to logged-in users:
  • /student/:id - Student profile
  • /instructor/:id - Instructor dashboard
  • /cart/:id - Shopping cart
  • /config/:id - User settings
3

Public Routes

Available to all visitors:
  • / - Home/Landing page
  • /courses/ - Course catalog
  • /detailCourse/:id - Course details
  • /login/ - Authentication

​
Authentication Flow

const session = JSON.parse(localStorage.getItem("userOnSession"));
const logged2 = localStorage.getItem("logged");

{session?.isAdmin ? adminRoutes : unauthenticatedRoutes}
{logged2 ? authenticatedRoutes : unauthenticatedRoutes}

​
Key Features

​
Course Management

  • Course creation and editing (/instructor/:id/form)
  • Lecture creation (/instructor/:courseId/createLecture)
  • Course catalog browsing
  • Detailed course views with video playback

​
Payment Processing

  • Stripe integration for checkout
  • Cart management with localStorage persistence
  • Payment success handling (/payment/checkout/sucess)

​
User Roles

  • Browse and purchase courses
  • Access purchased content
  • View class lists and lectures
  • Manage cart and payments

​
Development Scripts

From package.json:6-10: 
npm run dev      # Start development server
npm run build    # Build for production
npm run lint     # Run ESLint
npm run preview  # Preview production build

​
Performance Features

Suspense for code splitting and lazy loading
Vite for fast HMR and optimized builds
localStorage for reduced API calls
React Router for client-side navigation

​
Next Steps

Setup Guide

Get your development environment ready

Firebase Config

Configure Firebase services

Stripe Integration

Set up payment processing

Build docs developers (and LLMs) love

Get started for freeTalk to us