ChemSmart Academy

ChemSmart Academy is a polished React prototype for chemistry coaching workflows: student progress, video lessons, AI-style doubt solving, geolocation attendance, and a teacher command center.

The app is frontend-only right now. It uses mock data and browser APIs so the interface can be reviewed, demoed, and extended without needing a backend service.

Screens

Highlights

• Student dashboard with live schedule cards, study streaks, progress tracking, lesson resume actions, and smart attendance.
• Teacher command center for student registration, attendance overrides, CSV import/export, absentee checks, and video resource management.
• Chemistry-focused learning tools including micro quizzes, LaTeX rendering, periodic table helpers, and doubt-solving views.
• Responsive Vite/React UI built with Tailwind CSS, shadcn-style components, Radix primitives, Lucide icons, Recharts, and Framer Motion.

Current Scope

This repository is a UI/product prototype, not a production school platform.

Implemented locally:

• React routes for login, student dashboard, teacher dashboard, and doubt solving.
• Mock student, attendance, schedule, progress, and video-library data.
• Browser geolocation flow for attendance distance checks.
• CSV parsing/export helpers for teacher workflows.
• Production build through Vite.

Not included yet:

• Real authentication or user accounts.
• Persistent database storage.
• Production AI provider integration.
• Server-side attendance validation.

Quick Start

git clone https://github.com/dakshdoesdev/academy-smart-ui-design.git
cd academy-smart-ui-design
npm install
npm run dev

Vite prints the local URL after startup, usually http://localhost:5173.

Scripts

Command	Purpose
npm run dev	Start the Vite development server
npm run build	Type-check and create a production build
npm run preview	Preview the production build locally
npm run lint	Run ESLint
npm run deploy	Publish dist/ with gh-pages

Deployment

For static hosting, build the app and upload dist/:

npm run build
npm run preview

Recommended hosts:

• Vercel: framework preset Vite.
• Netlify: build command npm run build, publish directory dist.
• GitHub Pages: use the included GitHub Actions workflow or npm run deploy.

Project Layout

src/
  components/          Shared UI and learning widgets
  components/ui/       shadcn-style primitives
  pages/               Login, student, teacher, and doubt views
  utils/               CSV, location, and notification helpers
public/                Static public assets
assets/                README screenshots

Verification

Checked before publishing:

• npm install
• npm run build
• npm run lint
• npm audit --audit-level=high
• Browser screenshots for login, student dashboard, and teacher dashboard