Assignments > Project 2: Full Stack Application: Student Academic Management Tool

Due on Tue, 05/06 @ 11:59PM. 20 Points.

new Video Walkthroughs

• Video folder
• Development server architecture diagram
• Production server architecture diagram

	Part of the Stack	Video	Length
1	Overview	Introduction to the system architecture	12:11
2	Overview	Docker development environment	6:27
3	Overview	Docker production environment	4:51
4	Python Web Server	How the SQLAlchemy setup works	11:54
5	Python Web Server	How to make a new SQLAlchemy model and database table	18:46
6	Python Web Server	How to make a FastAPI Endpoint	9:18
7	Python Web Server	Understanding the Depends module and Pydandic	9:56
8	Deployment	Supabase (for the PostgreSQL Database)	6:35
9	Deployment	Render (for the Python + React Web App)	10:25
10	Deployment	GitHub Actions (CI/CD)	17:11
11	UI / React	Walkthrough of existing UI code	13:01
12	UI / React	Todo Component Stub	12:58
13	UI / React	Display TODOs in UI	7:34
14	UI / React + Server	Filter by logged-in user	9:04

Learning Objectives

• Overview Slides

This project is designed to give you practice working with real-world software engineering tools and practices including:

1. Version Control Workflows & DevOps
   • Extending and contributing to an existing codebase.
   • Using version control workflows (branches, commits, merges, pull requests).
   • Working within the continous integration pipeline (linting, testing, GitHub Actions).
   • Debugging and troubleshooting deployment issues in a realistic environment.
   • “Everything as code” – managing your dependencies, containers, continuous integration pipelines, and infrastructure configurations in declarative files (e.g., package.json, pyproject.toml, Dockerfile, compose.yml, GitHub workflow .yml files).
   • Deploying a full-stack app to a cloud platform (e.g., Render, Railway, or Fly.io).
2. Project Management & Communication
   • Creating a shared project plan, assign tasks, and manage progress.
   • Communicating effectively with teammates during development.
   • Identifying meaningful new features that add value to a real-world academic planning tool.
   • Translating ideas into working, testable software components.
3. Programming
   • Designing and implementing new backend routes using FastAPI.
   • Creating and using new SQLAlchemy models to represent domain concepts.
   • Building corresponding frontend screens with React and TypeScript.
   • Connecting frontend and backend using RESTful API conventions.
   • Writing tests

Project Overview

The goal of this project is to extend a partially completed Academic Planning web application built with React (frontend), FastAPI (backend), and PostgreSQL (database) using SQLAlchemy (ORM).

This tool currently supports basic features like viewing available courses and adding them to a schedule. Your job is to enhance it by designing and implementing two new API routes, two new models, and two corresponding screens in the frontend. Your additions should provide real value to users—think creatively about what students, advisors, or faculty might need in a planning tool.

In addition to coding, this project emphasizes collaboration, version control workflow, and deployment. You’ll be expected to use Git to manage your work, open Pull Requests for review, and deploy your final project to a cloud platform.

You’ll work in small teams, planning features together, dividing work, resolving conflicts, and managing deadlines. Use your project management skills to create a plan and iterate toward a polished final product.

Roles and Responsibilities

There are many different roles that are necessary to make your project successful. Talk with your team around dividing up these roles. Multiple people can share a role; people can also rotate in and out of roles. You get to decide.

Starter Code

The starter code provided to you includes the following:

Backend Starter Code

• Prebuilt FastAPI endpoints:
  • POST /api/token – Get a JWT token.
  • GET /api/courses – Retrieves all available courses and filters on select attributes (e.g., instructor, location, etc.).
  • GET /api/schedule/me/ – Retrieves courses associated with the logged-in user’s schedule (basic functionality, in need of enhancements).
• User authentication system (JWT-based login/logout).
• Prebuilt PostgreSQL database with the following SQLAlchemy models:
  • User
  • Course
  • Instructor
  • Location
  • Schedule

Frontend Starter Code

• Starter React app with:
  • Login screen
  • Simple search form to retrieve courses matching a user’s query preferences
  • A fake schedule with some dummy classes

Declarative System Files

• Dockerfiles for both development and for cloud deployment
• Linter and formatter scripts
• A starter GitHub actions script for continuous integration

Team Assignments

Your teams are listed below. Each member of your team has been assigned a task from the GitHub Issue Tracker. Some of you will be working on the same Python class, so make sure you only work on the tasks to which you were assigned:

Potential Project Ideas

Your team will extend a partially completed Academic Planning web application, but feel free to interpret this assignment broadly. Possible ideas include:

1. Course Planner. Enhancing the schedule UI by displaying a weekly calendar of their courses; allowing students to map out the remaining courses they’re thinking of taking.
2. Study Group Manager. Matches students with peers based on shared courses and availability; could include a chat or note-taking feature; each course could have an area for taking notes, uploading screenshots, etc.
3. Internship / REU Tracker. Assists students in tracking job applications and networking contacts; helps plan how to incorporate course assignments/projects into a resume, LinkedIn, GitHub, or portfolio.
4. Task / Assignment Tracker. Users log assignments, deadlines, and progress for each course; could include email/text notifications.
5. Work/Life Balance Support. Helps students consider how coursework supports other life priorities.
6. Some other idea of your choice… Feel free to propose your own interpretation of this assignment. Creativity is encouraged.

Deliverables

Grading Criteria (100 Points)

Minimum Required Features

All teams must:

• Create at least two new database models (e.g., StudySession, Internship, StudyGroup, Task, Calendar).
• Build FastAPI endpoints for any relevant CRUD operations (Create, Read, Update, Delete) needed to support the functionality of your site.
• Develop React UI components/screens to interact with FastAPI endpoints.
• Give the app a look and feel (colors, fonts, styling, accessibility, usability, etc.).
• Enforce security (users should not see data that doesn’t belong to them).
• Write tests for all backend functionality (you don’t need to run tessts for React stuff) and ensure linter/formatter checks pass.
• Cloud deployment – Update Dockerfile to integrate dependencies and schemas.

Optional Stretch Goals (Extra Credit)

Each feature below is worth 5 points (maximum of 10 extra points):

• Calendar API integration (sync with Google Calendar).
• Collaboration/chat features – Share schedules, chat with other logged-in users.
• Email or text notifications for schedule updates or reminders.
• Automated course data updates – Periodically refresh course listings from the Meteor site.
• Waitlist feature – Display real-time seat availability and send notifications when a course opens.
• Admin dashboard:
  • Allow instructors/admins to modify course offerings.
  • Provide analytics on course popularity.
• UI Enhancements:
  • Add dark mode.
  • Improve keyboard navigation and screen reader compatibility.
  • Ensure full responsiveness and mobile-friendliness.
• Propose your own stretch goal!