EdTech Web Frontend

A modern React-based frontend application for the EdTech platform, built with Vite, React Router, and Tailwind CSS. This application provides interfaces for both course providers and learners to manage and discover educational courses.

📋 Table of Contents

• Prerequisites
• Project Setup
• Project Structure
• Environment Configuration
• Available Scripts
• Step-by-Step Build Instructions

Prerequisites

Before you begin, ensure you have the following installed:

• Node.js (version 20.11.1 or compatible)
• npm (comes with Node.js)
• Backend API running on http://localhost:8080 (or configured URL)

Project Setup

Step 1: Clone and Navigate

# Navigate to the project directory
cd edtech-web

Step 2: Install Dependencies

# Install all project dependencies
npm install

This will install:

• React & React DOM - UI library
• React Router DOM - Client-side routing
• Axios - HTTP client for API requests
• React Hook Form - Form management and validation
• date-fns - Date formatting utilities
• Tailwind CSS - Utility-first CSS framework
• Vite - Build tool and dev server

Step 3: Configure Environment Variables

Create a .env file in the root directory:

# Create .env file
touch .env

Add the following environment variable:

VITE_API_BASE_URL=http://localhost:8080/api

Note: The .env file is already included in .gitignore to prevent committing sensitive data.

Step 4: Start Development Server

# Start the development server on port 3000
npm run dev

The application will be available at http://localhost:3000

Step 5: Build for Production

# Create production build
npm run build

# Preview production build
npm run preview

Project Structure

edtech-web/
├── public/                 # Static assets
│   └── vite.svg
├── src/
│   ├── assets/           # Images, icons, and other static assets
│   │   └── react.svg
│   ├── components/       # Reusable React components
│   │   ├── CourseCard.jsx          # Course card display component
│   │   ├── CourseForm.jsx          # Course create/edit form
│   │   ├── CourseList.jsx          # Course list display component
│   │   └── ProtectedRoute.jsx      # Route protection wrapper
│   ├── context/          # React Context providers
│   │   └── AuthContext.jsx        # Authentication state management
│   ├── hooks/            # Custom React hooks (currently empty)
│   ├── pages/            # Page components (routes)
│   │   ├── CourseDetailPage.jsx    # Course detail view (Learner)
│   │   ├── LandingPage.jsx         # Landing/home page
│   │   ├── Login.jsx              # Login page
│   │   ├── ProviderDashboard.jsx  # Provider dashboard
│   │   ├── SearchPage.jsx         # Course search page (Learner)
│   │   └── Signup.jsx             # Signup page
│   ├── services/         # API and external service integrations
│   │   └── api.js                 # Axios configuration and API methods
│   ├── utils/            # Utility functions (currently empty)
│   ├── App.jsx           # Main app component with routing
│   ├── App.css           # App-specific styles
│   ├── index.css         # Global styles and Tailwind imports
│   └── main.jsx          # Application entry point
├── .env                  # Environment variables (not in git)
├── .gitignore           # Git ignore rules
├── eslint.config.js     # ESLint configuration
├── index.html           # HTML template
├── package.json         # Project dependencies and scripts
├── package-lock.json    # Locked dependency versions
├── postcss.config.js    # PostCSS configuration for Tailwind
├── tailwind.config.js   # Tailwind CSS configuration
├── vite.config.js       # Vite build configuration
└── README.md            # This file

Key Directories Explained

• src/components/ - Reusable UI components used across multiple pages
• src/pages/ - Full-page components that correspond to routes
• src/context/ - Global state management using React Context API
• src/services/ - API service layer with Axios configuration
• src/hooks/ - Custom React hooks for shared logic
• src/utils/ - Helper functions and utilities

Environment Configuration

Environment Variables

Variable	Description	Default
VITE_API_BASE_URL	Backend API base URL	http://localhost:8080/api

Accessing Environment Variables

In your code, access environment variables using:

const API_URL = import.meta.env.VITE_API_BASE_URL;

Important: Only variables prefixed with VITE_ are exposed to the client-side code.

Available Scripts

Command	Description
npm run dev	Start development server (port 3000)
npm run build	Build for production
npm run preview	Preview production build locally
npm run lint	Run ESLint to check code quality

Features

For Providers

• ✅ User authentication (signup/login)
• ✅ Create, edit, and delete courses
• ✅ Publish/unpublish courses
• ✅ View all created courses
• ✅ Dashboard with course management

For Learners

• ✅ User authentication (signup/login)
• ✅ Search courses (with optional PIN code filtering)
• ✅ Filter courses by category, mode, price, and date
• ✅ View course details
• ✅ Browse all available courses

Technology Stack

• React 19.2.0 - UI library
• Vite 6.0.0 - Build tool and dev server
• React Router DOM 7.12.0 - Client-side routing
• Axios 1.13.2 - HTTP client
• React Hook Form 7.70.0 - Form management
• Tailwind CSS 4.1.18 - Styling framework
• date-fns 4.1.0 - Date utilities

Notes

• The backend API should be running on http://localhost:8080 (or as configured in .env)
• All API endpoints require authentication except signup/login
• Course search supports optional PIN code (1-6 digits) for location-based filtering
• PIN code can be left empty to search all courses
• JWT tokens are stored in localStorage
• Session is automatically restored on page reload