UniCourse - E-Learning Platform

UniCourse is a comprehensive, interactive e-learning platform designed to seamlessly connect students and teachers. It empowers educators to create courses, distribute materials, manage assignments, and track attendance, while providing students with an intuitive portal to access learning resources, submit assignments, and monitor their academic progress.

Built with a modern web stack, UniCourse delivers a responsive, fast, and accessible user experience.

Tech Stack

• Build: Vite, TypeScript, React
• UI: shadcn-ui, Tailwind CSS
• Auth/Data: Firebase
• File storage: Azure Blob Storage

Prerequisites

• Node.js 18+ and npm 9+
• A .env file with required variables (see below)

Local Development

npm install
npm run dev

App runs at http://localhost:5173 by default.

Environment Variables

All variables used in the browser must be prefixed with VITE_.

Firebase

VITE_FIREBASE_API_KEY=...
VITE_FIREBASE_AUTH_DOMAIN=...
VITE_FIREBASE_PROJECT_ID=...
VITE_FIREBASE_STORAGE_BUCKET=...
VITE_FIREBASE_MESSAGING_SENDER_ID=...
VITE_FIREBASE_APP_ID=...

Azure Blob Storage

VITE_AZURE_STORAGE_ACCOUNT_NAME=yourstorageaccount
VITE_AZURE_STORAGE_SAS_TOKEN=sv=...&ss=b&sp=rwdlac&se=...&spr=https&sig=...
VITE_AZURE_STORAGE_CONTAINER_NAME=learn-admin-files

Notes

• Use a SAS token for browser uploads (do not use connection strings in the client).
• Create the container in Azure in advance, or ensure SAS has create permission.
• Enable Azure Blob CORS for your domain during development and production.

Build

npm run build

Output goes to dist/.

Deploy to Render (Static Site)

This app is a single-page app (SPA). Recommended Render settings:

• Build command: npm run build
• Publish directory: dist
• Redirects/Rewrites:
  • Source: /*
  • Destination: /index.html
  • Action: 200

Environment Variables on Render (Build-time)

• VITE_FIREBASE_API_KEY
• VITE_FIREBASE_AUTH_DOMAIN
• VITE_FIREBASE_PROJECT_ID
• VITE_FIREBASE_STORAGE_BUCKET
• VITE_FIREBASE_MESSAGING_SENDER_ID
• VITE_FIREBASE_APP_ID
• VITE_AZURE_STORAGE_ACCOUNT_NAME
• VITE_AZURE_STORAGE_SAS_TOKEN
• VITE_AZURE_STORAGE_CONTAINER_NAME (optional)

If you see a blank white page after deploy:

• Ensure the SPA redirect rule above exists.
• Verify all VITE_ variables are set and the build cache is cleared, then redeploy.

Optional: Deploy as Web Service (if you need a server)

• Install: default
• Build command: npm run build
• Start command: npm run preview -- --host 0.0.0.0 --port $PORT
• Ensure devDependencies are installed at build time (Render Static Sites already do this). For Web Service, set NPM_CONFIG_PRODUCTION=false or use install command npm install --include=dev.

Security & Git Hygiene

• .env files are ignored via .gitignore. Do not commit secrets.
• If a secret was committed previously, rotate the key in its provider and rewrite git history if needed.
• Commit a redacted /.env.example for collaborators.

Scripts

• npm run dev: start Vite dev server
• npm run build: build for production to dist/
• npm run preview: preview built app locally

Project Structure

src/
  components/        # UI and dashboard components
  hooks/             # React hooks (e.g., useAuth)
  integrations/
    firebase/        # Firebase client setup
    azure/           # Azure Blob helpers
  pages/             # Route pages (Index, Auth, Dashboard, NotFound)
  layouts/           # Layout components

Azure Setup (quick)

1. Create Storage Account → generate SAS with Blob service, Container/Object resource types, and at least Read/Write/Create permissions.
2. Set the env vars above; create the container (e.g., learn-admin-files).
3. Enable CORS for Blob service for your local and deployed origins.

Troubleshooting

• Build fails with vite: not found on Web Service: ensure dev deps are installed or use Static Site.
• Blank screen after deploy: add SPA redirect rule and verify VITE_ envs; clear build cache.
• Azure upload errors: verify SAS permissions and CORS; ensure container exists.