LoadMap is a web application designed to help students visualize and manage their academic workload. Instead of relying on simple to-do lists or excel spreadsheets, LoadMap shows how heavy or light a student’s schedule is across daily, weekly, and monthly views by weighting assignments based on due dates, importance, and estimated worklaod. Students will be able to plan out not just academic deadlines, but personal and work goals and deadlines as well. Calendar view will also allow students to be able to properly organize themselves. This allows students to plan ahead, avoid burnout, and make informed decisions about their time.
Note
This README.md file documents the progress of the application across multiple deliverables. Each section corresponds to a specific Canvas submission and includes a checklist of rubric items along with descriptions of completed work.
For this deliverable I completed the following items.
- Proper use of Markdown
- A concise and compelling elevator pitch
- Description of key features
- Description of how I will use each technology
- One or more rough sketches of the application
College students often know what assignments they have due, but not how heavy their overall workload really is. LoadMap helps students visualize their academic load using daily, weekly, and monthly planning views. By weighting assignments based on due dates and importance, LoadMap highlights busy days and stressful weeks, allowing students to plan ahead, distribute work more evenly, and reduce last-minute stress.
The application uses a calendar-based layout with three primary views: daily, weekly, and monthly. The weekly view is the main planning interface, displaying assignment density and total workload per day. The monthly view provides a high-level overview to identify heavy weeks in advance, while the daily view focuses on detailed task planning. Students will be able to swap between School, Work, and Personal planning and see their individual folders as well.
Assignments are visually represented using color intensity and bars to indicate workload weight. Users can add, edit, or delete assignments, and the visual workload updates immediately to reflect changes.
- Daily, weekly, and monthly planning views
- Visual workload indicators based on assignment weight
- Assignment creation, editing, and deletion
- Forecasting of heavy workload days and weeks
- User accounts with saved personal data
- Personal, Work, and Academic planning
- Calendar view to see overview of assignments
I am going to use the required technologies in the following ways:
- HTML
Used to structure the application layout, including navigation, calendar views, forms, and modals. - CSS
Used for responsive design, visual hierarchy, and color-coded workload indicators. - React
Used to create reusable components such as calendar views, assignment cards, and input forms. React state and hooks will manage assignment data and view switching. - Service
A Node.js and Express backend will handle API requests for creating, updating, and retrieving assignments and workload data. - DB/Login
MongoDB will store user credentials and assignment data. Authentication will ensure each user only accesses their own data. - WebSocket
WebSockets will provide real-time updates so that assignment changes instantly update workload visualizations.
For this deliverable I did the following. I checked the box [x] and added a description for things I completed.
- Server deployed and accessible with custom domain name - My server link.
For this deliverable I did the following. I checked the box [x] and added a description for things I completed.
- HTML pages - I made 5 different pages: Home, Tasks, Calendar, Notes, and About
- Proper HTML element usage - I spent a lot of time working on the navigation elements and placeholder elements.
- Links - I put a link to my GitHub repo and links between pages.
- Text - Most of the pages have some sort of text.
- 3rd party API placeholder - I put this placeholder on the calendar page to use Google Calendar.
- Images - I made a gallery on the home page to put images.
- Login placeholder - I put a login placeholder at the top of the home page.
- DB data placeholder - I put this in a dashboard at the top of the home page.
- WebSocket placeholder - I put this in a dashboard at the top of the home page.
For this deliverable I did the following. I checked the box [x] and added a description for things I completed.
- Header, footer, and main content body - I made a header, footer, and overall style guide with specific colors.
- Navigation elements - I made the navigation links apart of the styled header. (Bootstrap)
- Responsive to window resizing - I made sure the pages resize with the window. (Mainly with Bootstrap and the flex elements.)
- Application elements - I did a lot of overall styling of the various elements, especially the placeholders, to match the branding and colors that I want.
- Application text content - I mainly styled the organization of it and allignment.
- Application images - I styled the gallery on the home page.
For this deliverable I did the following. I checked the box [x] and added a description for things I completed.
- Bundled using Vite - I just followed the commands to install and use Vite.
- Components - Moving the files and folders around along with the html and css code was pretty straightforward but it took a lot to figure out the difference between the home page and app.jsx.
- Router - I had to rework the given router code a good bit once moving my files and folders around.
For this deliverable I did the following. I checked the box [x] and added a description for things I completed.
- All functionality implemented or mocked out - I added the login feature (making certain pages invisible), add the filter function for tasks and notes, added functionality to add new notes and tasks, made the click away feature reactive for the tasks, and connected the calendar to the tasks that are made to show which days have tasks due and how many (along with the various pop up pages for adding tasks, notes, and seeing tasks on calendar days.)
- Hooks - useState manages application state such as tasks, notes, and authentication, while useEffect persists data to localStorage to maintain state across sessions. Hooks enable reactive UI updates throughout the application.
For this deliverable I did the following. I checked the box [x] and added a description for things I completed.
- Node.js/Express HTTP service - I created an Express backend in a separate service directory that runs on port 4000 and handles API requests from the frontend.
- Static middleware for frontend - Express uses static middleware to serve the built frontend files when deployed.
- Calls to third party endpoints - The frontend calls the public Advice Slip API using fetch to retrieve a random motivational quote for the home dashboard.
- Backend service endpoints - Implemented REST API routes for tasks:
- GET /api/tasks
- POST /api/tasks
- DELETE /api/tasks/:id
- Tasks are now stored and managed by the backend service instead of local storage.
- Frontend calls service endpoints - The React Tasks component loads, creates, and deletes tasks using fetch requests to the Express API.
- Supports registration, login, logout, and restricted endpoint - Added backend authentication routes. User passwords are hashed using bcrypt before being stored on the server. Implemented a protected route (GET /api/restricted) that verifies a user session via cookies. A test button on the home page demonstrates that the endpoint is accessible only when logged in.
For this deliverable I did the following. I checked the box [x] and added a description for things I completed.
- Stores data in MongoDB - Tasks and notes are stored in MongoDB collections and accessed through backend API routes. All data is persisted and retrieved per user using a userId field, ensuring data is not stored in memory.
- Stores credentials in MongoDB - User accounts are stored in MongoDB with securely hashed passwords using bcrypt. Authentication is handled through login endpoints that validate credentials against stored hashes.
For this deliverable I did the following. I checked the box [x] and added a description for things I completed.
- Backend listens for WebSocket connection - Implemented using ws and attached to Express server.
- Frontend makes WebSocket connection - A shared WebSocket client connects on app load.
- Data sent over WebSocket connection - Backend broadcasts task and note updates.
- WebSocket data displayed - UI updates in real-time across browser sessions.
- Application is fully functional - Real-time sync works across tabs/devices.