AI-Assisted Student University Learning Platform

Project Overview

The AI-Assisted Student University Learning Platform helps students streamline their learning process by crafting personalized roadmaps for all courses in a semester.

The platform generates roadmaps that cover all topics from the provided course syllabus. Each topic is supported with curated resources, including website references and book references (with specific chapters to study). Course statistics such as topics covered and quizzes completed are visualized as interactive graphs to help students track progress.

Additionally, the platform includes a Grade Prediction Tool that enables students to estimate the marks they need to achieve in their final exam to reach their desired grade — based on their current internal marks.

The frontend is built entirely using React and styled with Tailwind CSS for a clean and responsive UI.

---

Key Features and Pages

Login Page

• User authentication page allowing students to sign in securely.

Student Dashboard

Semesters List

• Displays all semesters the student has participated in.

Courses List

• Displays all courses under the selected semester.

Course Roadmap

• Visualizes the AI-generated roadmap for each course.
• Tracks completion status for each topic.

Topic Resources

• Displays AI-curated resources (websites and books with chapters) for each topic.

Quiz Window

• Allows students to take auto-generated quizzes for each topic/week.
• Instant feedback upon quiz submission.

Attendance and Records

• Displays attendance records for each course.

Academics and Grades

• Shows academic performance, grades, and grade prediction tool.

---

Screenshots

Here are some screenshots of the AI-Assisted Student University Learning Platform:

• Login Page: Login Page

• Dashboard Page: Dashboard with Semesters and Courses

• Course Roadmap: Roadmap with Topic Progress

• Topic Resources: Topic Resources Page

• Course Statistics: Course Statistics Modal

• Attendance and Records: Attendance Page

• Academics and Grades: Grades and Grade Prediction Tool

---

Styling and Components

React Components

• Modular and reusable components for building the entire UI.
• Component-driven architecture for scalability.

Tailwind CSS

• Used for consistent, utility-first styling across the application.
• Responsive layout and design.

---

React Key Concepts Used

React Router

• For navigation between different pages such as Dashboard, Courses, Topic Resources, Attendance, and Academics.

Hooks (useEffect, useState, useContext)

• Managing state and lifecycle logic within functional components.

Context API

• Managing global state such as user session and course progress.

Conditional Rendering

• Rendering components and UI elements based on application state.

Event Handling

• Capturing and responding to user interactions across components.

Form Handling

• Managing quiz submissions and resource triggers.

---

Technologies Used

• Frontend Framework: React
• Styling: Tailwind CSS
• State Management: React Context API, useState, useReducer
• Routing: React Router DOM
• Authentication: JWT-based, integrated with backend API

---

Backend Repository

For the backend implementation of this project using FastAPI and PostgreSQL, please visit the Backend Repository