Skip to main content

​
Prerequisites

Before you begin, ensure you have the following installed:

Node.js

Version 16.x or higher

Package Manager

npm, yarn, or pnpm

Git

For version control

Code Editor

VS Code recommended

​
Installation

1

Clone the Repository

Clone the EducaStream repository to your local machine:
git clone <repository-url>
cd educastream
2

Install Dependencies

Install all required packages using your preferred package manager:
npm install
This will install all dependencies from package.json, including:
  • React 18.2.0
  • Firebase 10.5.2
  • Stripe 14.3.0
  • React Router 6.17.0
  • And more…
3

Environment Configuration

Create a .env file in the root directory and configure your environment variables:
touch .env
Add the following variables (see Firebase Config and Stripe Integration for values):
# Firebase Configuration
VITE_API_KEY=your_firebase_api_key
VITE_AUTH_DOMAIN=your_project.firebaseapp.com
VITE_PROJECT_ID=your_project_id
VITE_STORAGE_BUCKET=your_project.appspot.com
VITE_MESSAGING_SENDER_ID=your_sender_id
VITE_APP_ID=your_app_id

# Stripe Configuration (if needed for frontend)
VITE_STRIPE_PUBLIC_KEY=your_stripe_public_key
Never commit your .env file to version control. Add it to .gitignore.
4

Start Development Server

Launch the Vite development server:
npm run dev
The application will start at http://localhost:5173 (default Vite port).

​
Project Structure

educastream/
├── src/
│   ├── Components/          # Reusable UI components
│   │   ├── NavBar/
│   │   ├── Footer/
│   │   ├── Cart/
│   │   └── PayButton/
│   ├── views/               # Page components
│   │   ├── Layout/
│   │   ├── Login/
│   │   ├── Courses/
│   │   ├── Student/
│   │   ├── Instructor/
│   │   └── dashboard/
│   ├── context/             # React Context providers
│   │   └── CartContext.jsx
│   ├── firebase/            # Firebase configuration
│   │   └── firebase.js
│   ├── utils/               # Utility functions
│   ├── App.jsx              # Main app component
│   └── main.jsx             # Entry point
├── public/                  # Static assets
├── vite.config.js          # Vite configuration
├── package.json            # Dependencies and scripts
└── .env                    # Environment variables

​
Backend Configuration

The frontend connects to a Railway-hosted backend API. The base URL is configured in main.jsx:8: 
import axios from "axios";

axios.defaults.baseURL = "https://backend-educastream-production.up.railway.app/";
If you’re running a local backend, update this URL to http://localhost:YOUR_PORT

​
Development Workflow

​
Running the Application

Start the dev server with hot module replacement:
npm run dev
  • Fast refresh on file changes
  • Source maps for debugging
  • Runs on http://localhost:5173

​
Environment Variables

EducaStream uses Vite’s environment variable system. Variables must be prefixed with VITE_ to be exposed to the client: 
const firebaseConfig = {
  apiKey: import.meta.env.VITE_API_KEY,
  authDomain: import.meta.env.VITE_AUTH_DOMAIN,
  projectId: import.meta.env.VITE_PROJECT_ID,
  storageBucket: import.meta.env.VITE_STORAGE_BUCKET,
  messagingSenderId: import.meta.env.VITE_MESSAGING_SENDER_ID,
  appId: import.meta.env.VITE_APP_ID,
};

​
Troubleshooting

If port 5173 is already in use, Vite will automatically try the next available port. You can also specify a custom port:
vite.config.js
export default defineConfig({
  plugins: [react()],
  server: {
    port: 3000
  }
});
Delete node_modules and reinstall:
rm -rf node_modules package-lock.json
npm install
Ensure all Firebase environment variables are set correctly in .env:
  • Check for typos in variable names
  • Verify all values from Firebase Console
  • Restart dev server after changing .env
If API calls fail:
  1. Check backend is running
  2. Verify the axios.defaults.baseURL in main.jsx
  3. Check CORS settings on backend
  4. Inspect network tab in browser DevTools

​
Verification

After setup, verify everything works:
1

Check Dev Server

Navigate to http://localhost:5173 and verify the landing page loads
2

Test Navigation

Click through different routes to ensure React Router is working
3

Check Console

Open browser DevTools and check for any errors in the console
4

Test Login

Navigate to /login and verify the authentication page renders

​
Next Steps

Configure Firebase

Set up Firebase Storage and Authentication

Configure Stripe

Set up payment processing

Architecture

Learn about the application architecture

​
Additional Resources

Vite Documentation

Official Vite documentation for build configuration

React Documentation

Official React documentation and guides

Build docs developers (and LLMs) love

Get started for freeTalk to us