EduOnline 🎓

A modern, multilingual online school website built with React + Vite, Supabase (auth + database), and ready to deploy on Vercel.

---

📁 Project Structure

eduonline/
├── public/
├── src/
│   ├── components/
│   │   ├── auth/
│   │   │   └── ProtectedRoute.jsx    # Route guard for authenticated pages
│   │   └── layout/
│   │       ├── Layout.jsx            # App shell (Navbar + Outlet + Footer)
│   │       ├── Navbar.jsx / .css     # Sticky top nav with language switcher
│   │       └── Footer.jsx / .css     # Site footer
│   ├── context/
│   │   └── AuthContext.jsx           # Supabase auth state & helpers
│   ├── i18n/
│   │   └── index.js                  # i18next config (EN / FR / AR)
│   ├── lib/
│   │   └── supabase.js               # Supabase client initialisation
│   ├── pages/
│   │   ├── Home.jsx / .css           # Hero, stats, intro, subjects preview, CTA
│   │   ├── About.jsx / .css          # Mission, values, pillars
│   │   ├── Subjects.jsx / .css       # Full subject grid
│   │   ├── Videos.jsx / .css         # Featured + video grid with embeds
│   │   ├── Contact.jsx / .css        # Contact info + form (saves to Supabase)
│   │   ├── Login.jsx                 # Supabase sign-in
│   │   ├── Register.jsx              # Supabase sign-up with email verification
│   │   ├── Auth.css                  # Shared auth page styles
│   │   └── Dashboard.jsx / .css      # Protected user dashboard
│   ├── App.jsx                       # Router + all routes
│   ├── main.jsx                      # React entry point
│   └── index.css                     # Global design system (CSS vars, utilities)
├── supabase_schema.sql               # Full DB schema with RLS policies
├── vercel.json                       # SPA rewrite rules for Vercel
├── vite.config.js
├── package.json
└── .env.example

---

🚀 Quick Start

1. Install dependencies

npm install

2. Set up Supabase

1. Create a project at supabase.com
2. Go to SQL Editor → paste and run supabase_schema.sql
3. In Authentication → Settings, enable email confirmations if desired

3. Configure environment variables

cp .env.example .env

Edit .env:

VITE_SUPABASE_URL=https://your-project.supabase.co
VITE_SUPABASE_ANON_KEY=your-anon-key

Find both values in Supabase → Project Settings → API.

4. Run locally

npm run dev

---

🌍 Language Support

The app auto-detects language from the browser locale:

• English → default
• French → auto-selected for fr-* locales
• Arabic → auto-selected for ar-* locales + RTL layout applied

The manual language switcher in the Navbar persists via localStorage.

To add a new language:

1. Add a new translation object in src/i18n/index.js
2. Add it to the LANGS array in src/components/layout/Navbar.jsx

---

🗄️ Database Schema

Table	Purpose
users	Extended user info synced from Supabase Auth
profiles	Role, avatar, bio
subjects	Course catalogue
videos	Embedded video library
contact_messages	Contact form submissions
announcements	School announcements
enrollments	Student ↔ subject junction

All tables have Row Level Security (RLS) enabled with appropriate policies.

---

📦 Deploying to Vercel

1. Push the project to GitHub
2. Import the repo in vercel.com
3. Add environment variables:
   • VITE_SUPABASE_URL
   • VITE_SUPABASE_ANON_KEY
4. Deploy — vercel.json handles SPA routing automatically

---

🔐 Authentication Flow

Action	Implementation
Sign up	supabase.auth.signUp() + auto profile insert
Email verify	Supabase sends verification link
Sign in	supabase.auth.signInWithPassword()
Protected pages	<ProtectedRoute> redirects to /login
Sign out	supabase.auth.signOut() + redirect to /

---

🎨 Design System

CSS custom properties defined in src/index.css:

Variable	Value	Use
--navy	#0B1F3A	Primary colour
--gold	#C9993A	Accent / CTA
--gold-pale	#FDF3DC	Backgrounds
--font-display	Playfair Display	Headings
--font-body	DM Sans	Body text

---

🔮 Future Additions

• Payment integration (Stripe / local gateways)
• Student progress charts and analytics
• Parent portal / linked accounts
• Push notifications for class reminders
• PWA support for offline access

---

🛡️ Making a User an Admin

Run this in Supabase SQL Editor (replace the email):

UPDATE public.profiles
SET role = 'admin'
WHERE user_id = (
  SELECT id FROM auth.users WHERE email = 'admin@yourdomain.com'
);

Then visit /admin to access the admin panel.

---

📄 License

MIT — free for personal and commercial use.