AIStudyLab

Your smart companion for interactive learning and progress tracking.

Comment

AIStudyLab Frontend

This is the frontend for the AIStudyLab application, a modern quiz and study assistant platform built with React and Vite.

Tagline

Your smart companion for interactive learning and progress tracking.

About the Project

Inspiration

AIStudyLab was inspired by the need for a smarter, more engaging way for students to learn and track their academic progress. With the rise of AI and data-driven education, we wanted to create a platform that not only quizzes users but also provides personalized insights and recommendations to help them improve.

What I Learned

  • Building a full-stack application with React and Node.js
  • Integrating AI-powered features and analytics
  • Managing user authentication and secure data flow
  • Designing responsive, user-friendly interfaces
  • Handling asynchronous data fetching and error states
  • Using LaTeX for rendering mathematical content: for example, the quadratic formula $x = \frac{-b \pm \sqrt{b^2-4ac}}{2a}$

How I Built It

  • Frontend: React (with Vite), Ant Design, Chart.js, Framer Motion, Lottie animations
  • Backend: Node.js, Express, MongoDB (not shown here)
  • Features: User authentication, quiz engine, progress tracking, analytics dashboard, AI chat assistant, admin panel
  • Deployment: Hosted on Render

Challenges Faced

  • Ensuring smooth communication between frontend and backend, especially with CORS and authentication
  • Handling slow server responses and providing user-friendly error messages
  • Designing a flexible quiz system that supports multiple subjects and question types
  • Making the UI both attractive and accessible across devices
  • Managing state and side effects in a complex React app

Features

  • User authentication (login/register)
  • Interactive dashboard with analytics
  • Smart progress tracking
  • Weekly study plans
  • AI-powered chat assistant
  • Admin question management
  • Responsive and modern UI

Getting Started

Prerequisites

  • Node.js (v16 or higher recommended)
  • npm or yarn

Installation

cd frontend
npm install
# or
yarn install

Development

npm run dev
# or
yarn dev

The app will be available at http://localhost:5173 by default.

Build for Production

npm run build
# or
yarn build

Linting

npm run lint
# or
yarn lint

Deployment

The latest version of the frontend is deployed at:

👉 https://aistudylab-1.onrender.com

Project Structure

  • src/ — React source code
  • public/ — Static assets (e.g., images)
  • package.json — Project dependencies and scripts

Backend

This frontend connects to the AIStudyLab backend API. Make sure the backend is running and accessible for full functionality.

License

MIT

Share this project:

Updates