ModulusAI — Frontend

This repository contains the frontend for ModulusAI, an AI-powered academic planning platform for NUS students.

The frontend is built to make long-term academic planning visual, interactive, and easy to reason about. It focuses on translating complex backend logic—constraint solving, optimization, and recommendations—into a clean and intuitive user experience.

---

Features

• 4-Year Degree Planner
  Drag-and-drop planner to map modules across all 8 semesters, including internships, exchanges, and special programmes.

• Semester Timetable Viewer
  Calendar-style visualization of clash-free timetables generated by the backend scheduler.

• Academic Chatbot UI
  A conversational interface for personalized academic guidance, powered by backend AI models and user-specific context.

• Module Sentiment Comparison
  Visual charts that summarize sentiment from large-scale Reddit discussions to help compare modules quickly.

• Personalized Academic Profiles
  Persistent user profiles that keep degree information, completed modules, preferences, and plans in sync across features.

---

Tech Stack

• Next.js (App Router)
• React
• TypeScript
• Axios for API communication
• Charting libraries for data visualization
• Docker for consistent local and production environments

The frontend communicates with a Flask backend that handles planning logic, optimization, NLP, and persistence.

---

Getting Started

Run the development server

npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev

Open http://localhost:3000 in your browser.
The development server supports hot reloading.

Docker Compose

Alternatively, the frontend can be run using Docker Compose:

docker compose up -d

This setup mirrors production and helps ensure environment consistency.

Project Structure (High Level)

• app/ – App Router pages and layouts
• components/ – Reusable UI components (planner, timetable, chatbot, charts)
• lib/ – API clients, helpers, and shared logic
• styles/ – Global styles and component-level styling

The structure is modular to keep planning, scheduling, and analytics features isolated and maintainable.

Design Principles

• Visual-first planning for long-term decisions
• Immediate feedback during edits to large multi-semester plans
• Frontend validation to prevent invalid or inconsistent states
• Predictable UX where users can understand why an action succeeds or fails

Notes

• Most UI components are custom-built to support non-trivial interactions such as drag-and-drop planning and timetable rendering.
• A significant portion of the complexity lies in managing state consistency across multi-semester edits and live updates.
• This repository focuses purely on frontend concerns; optimization, AI, and data processing live in the backend.