CSE 341 | Assignment

W03 Assignment: Mongoose and Frontend APIs

Overview

Purpose: Demonstrate your knowledge of this week's concepts.
Task: Complete the assignment requirements and submit the required deliverables.

This week, you will work with your team in the Kizuna Rail codebase. Kizuna Rail is a fictional scenic railway booking website for tourists in Japan. The existing application includes trip information, stations, schedules, ticket classes, a booking flow, and booking confirmations.

Team-based work begins this week

This is not an individual assignment. You will coordinate with teammates, claim assigned issues, and open pull requests through the team workflow. Your teammates will review your pull requests and those code reviews must be completed by the beginning of next week.

Assignment Requirements

In this assignment, your team will be refactoring the existing code to clean it up, add some dynamic functionality to the pages, and prepare it for future assignments. In particular, you will do the following:

Use Mongoose for the database interaction.
Clean up the backend logic so it follows a clear model, view, controller pattern.
There will be two types of controller functions: those that render EJS pages, and API controller functions that send JSON responses.
The existing EJS controller functions will be refactored to use the new model functions.
There will be two types of routes: routes that render EJS pages, and routes that expose API endpoints.
Several current pages will be updated to use client-side JavaScript to dynamically hydrate page content by calling the web services. This will make it easier to add features such as searching and pagination in the future.
In other cases, the main content of the page will continue to be rendered by EJS, but dynamic sections of the page will use the APIs.

You will use the following file organization pattern:

Mongoose Schemas

src/models/schemas/trains.js - already completed as an example.
src/models/schemas/trips.js
src/models/schemas/stations.js
src/models/schemas/schedules.js
src/models/schemas/ticket-classes.js
src/models/schemas/bookings.js

Models

src/models/trains.js - already completed as an example.
src/models/trips.js
src/models/stations.js
src/models/schedules.js
src/models/ticket-classes.js
src/models/bookings.js

Controllers

src/controllers/trains.js - already completed as an example.
src/controllers/trips.js
src/controllers/stations.js
src/controllers/schedules.js
src/controllers/ticket-classes.js
src/controllers/bookings.js

Routes

src/routes/ejs-routes.js: routes that render EJS pages.
src/routes/api-routes.js: routes that expose JSON API endpoints.

Feature Sets

The following feature sets describe the specific work that needs to be completed. Each person on the team should be assigned to complete one feature set. Feel free to help one another as needed so that everyone can complete their assigned work.

The first three feature sets are required for all teams. If you have at least four team members, you should also complete feature set 4. If you have five team members, you should also complete feature set 5.

You can break each feature set into as many GitHub issues and Pull Requests as you would like, but each feature set must have at least one GitHub issue and one Pull Request.

Feature Set 1: Trips

Required Task

This feature set must be completed by all teams, because it will be used in future assignments.

Create the Mongoose schema for trips in src/models/schemas/trips.js.
Create the following model functions in src/models/trips.js. (These functions should use Mongoose and your new schema to query the database and return the results.)
- getTripById
- getAllTrips
Create the following API controller functions in src/controllers/trips.js. (These should send JSON responses with the appropriate status codes for success, failure, and so forth.)
- getTripById
- getAllTrips
Create the following API routes in src/routes/api-routes.js (including Swagger documentation):
- /api/trips: returns all trips.
- /api/trips/{id}: returns one trip by ID.
Update the trip list page (/src/view/trips/list.ejs) to use the web service hydration approach. This page should no longer use EJS to iterate through the trips and render the content. Instead, it should use client-side JavaScript to fetch the data from the API and populate the page dynamically. (See the src/views/trains.ejs page for an example.)
Refactor the current details.js EJS controller function to use the new trips model function. Give it a name and move it from details.js into controllers/trips.js.
Refactor the current list.js EJS controller function. It should not need to call the trips model functions because the content will be populated dynamically on the client side. Give this function a name and move it from list.js into controllers/trips.js.
Update the current routing logic for the trips EJS routes to use the new EJS controller functions and move these functions to routes/ejs-routes.js.

Feature Set 2: Schedules

Required Task

This feature set must be completed by all teams, because it will be used in future assignments.

Create the Mongoose schema for schedules in src/models/schemas/schedules.js.
Create the following model function in src/models/schedules.js. (This function should use Mongoose and your new schema to query the database and return the results.)
- getSchedulesByTripId, which receives a trip ID and an optional month number and returns the schedules for that trip.
Create the following API controller function in src/controllers/schedules.js. (This should send JSON responses with the appropriate status codes for success, failure, and so forth.)
- getSchedulesForTrip: Receives a trip ID.
- getSchedulesForTripAndMonth: Receives a trip ID and a month number.
Create the following API route in src/routes/api-routes.js (including Swagger documentation):
- /api/trips/{id}/schedules: returns the schedules for a trip.
- /api/trips/{id}/schedules?month={month}: returns the schedules for a trip in a specific month.
Update the trip details page (src/view/trips/details.ejs) so the schedules component is powered by the API and updates when the user selects a month. When the user selects a month, the client-side JavaScript should fetch the relevant schedule data from the API and update the displayed schedules accordingly.
Update the existing trip details EJS controller function. It should no longer need to get the schedules, because those will be populated later on the client side.

Feature Set 3: Bookings

Required Task

This feature set must be completed by all teams, because it will be used in future assignments.

Currently, the when creating a booking, the application uses a collection named confirmations. For this feature, rename the collection and any related code to use the term bookings rather than confirmations for the collection.
Create the Mongoose schema for bookings in src/models/schemas/bookings.js.
Create the following model functions in src/models/bookings.js. (These functions should use Mongoose and your new schema to query the database and return the results.)
- createBooking: This function should receive all necessary booking information, including passenger data, and create a new booking document.
- getAllBookings
- getBookingById
Create the following API controller function in src/controllers/bookings.js. (This should send JSON responses with the appropriate status codes for success, failure, and so forth.)
- getAllBookings
Create the following API route in src/routes/api-routes.js (including Swagger documentation):
- /api/bookings: returns all bookings.
Move processBookingRequest to controllers/bookings.js and refactor it to use the new booking model functions.
Move bookingPage to controllers/bookings.js and refactor it to use the new booking model functions.
Update the routing logic for the existing booking routes.
Create a new bookings admin page (src/views/bookings.ejs) with an EJS controller in src/controllers/bookings.js and an EJS route that maps to /bookings-admin. This page should use client-side JavaScript to call the bookings API and dynamically populate the list of bookings. It should not use EJS to iterate through the bookings and render them on the page. (See the trains page for an example of this approach.)

Feature Set 4: Ticket Classes

Optional Task

This feature set should be completed if you have at least four team members.

Create the Mongoose schema for ticket classes in src/models/schemas/ticket-classes.js.
Create the following model functions in src/models/ticket-classes.js. (These functions should use Mongoose and your new schema to query the database and return the results.)
- getAllTicketClasses
- getTicketClassesForDay
Create the following API controller functions in src/controllers/ticket-classes.js. (These should send JSON responses with the appropriate status codes for success, failure, and so forth.)
- getAllTicketClasses
- getTicketClassesForDay
Create the following API routes in src/routes/api-routes.js (including Swagger documentation):
- /api/ticket-classes: returns all ticket classes.
- /api/ticket-classes?day={day}: returns ticket classes available for a specific day.
Refactor the current bookingPage EJS controller function to use the new ticket-class model functions.
Update the booking page (/src/view/bookings/booking.ejs) so that when the user selects a day of the week, available ticket options remain active and unavailable ticket options are grayed out and disabled. To do this, your page should use client-side JavaScript to fetch the relevant ticket class data from the API and update the displayed options accordingly.

Feature Set 5: Stations

Optional Task

This feature set should be completed if you have five team members.

Create the Mongoose schema for stations in src/models/schemas/stations.js.
Create the following model functions in src/models/stations.js. (These functions should use Mongoose and your new schema to query the database and return the results.)
- getAllStations
- getStationById
Create the following API controller functions in src/controllers/stations.js. (These should send JSON responses with the appropriate status codes for success, failure, and so forth.)
- getAllStations
- getStationById
Create the following API routes in src/routes/api-routes.js (including Swagger documentation):
- /api/stations: returns all stations.
- /api/stations/{id}: returns one station by ID.
Update the trip details page (/src/view/trips/details.ejs) to include an expandable element or popup that displays detailed station information which is fetched from the API. Currently the page only lists the station names. Change this so that next to the station name there is a button or image that triggers client-side JavaScript to call the API and populate the page with station information.

Workflow

Complete the setup tasks

Before starting any additional feature work, make sure your team has completed the setup tasks from the team activity. Your team should have a working deployed instance of the app and a shared MongoDB database that everyone can use.

Select and coordinate features

Make sure every feature set has an owner.
If your team has fewer than five people, ensure that the first three tasks are assigned.
Post the decisions in your Microsoft Teams channel so everyone knows who is responsible for each piece of work.

Develop a spec for each of your features

For each feature assigned to you, write a detailed spec before coding. This spec should follow the pattern from your previous assignments. You are welcome to use a single spec for your entire feature set, but you might find it simpler and easier to create multiple specs for various parts.

Make sure to include the following information:

An overall description of the feature.
The data model of the collections involved.
The API endpoints including the request and response formats and status codes.
A test plan with specific checks.
Anything else that would be needed for someone to implement this feature.

Create GitHub issues

Create at least one GitHub issue for your feature set. Include the information from your spec in the issue description.

Implement the features

Use AI to Help

You are encouraged to use AI to help write the code for your features. Rather than use a single prompt to update all of the files at once, you should go through each file individually and use AI to assist with the implementation as you go. This is important for two key reasons:

You need to understand each line of code that you are contributing to your project. Your teammates (and your future company) will expect you to be able to explain and maintain the code you write.
AI might not follow all of the conventions, expectations, and requirements of the assignment.

Follow these steps to implement your feature set and open a pull request. If you created multiple issues, you should repeat this process for each one and create multiple pull requests.

Create a branch for the issue.
Implement the work.
Test the change locally.
Run the ESLint check and correct any reported errors before creating the pull request.
Create a walkthrough video that includes the following:
- Show the feature working locally.
- Show the code and walk through the key functions, describing what the lines of code do.
- Describe the major decisions you had to make and why you choose the solution you did. (You must describe at least one decision.)
Open a pull request and include the following:
- Make sure it connects to the GitHub issue.
- Include a brief summary of the changes.
- Include the verified Test Plan steps from the issue.
- Include a link to your walkthrough video.
Post in your Microsoft Teams channel that the PR is ready for review.
Repeat this process for any additional issues you created.

Pull requests are required

Each assigned feature should be completed through a pull request. Do not push code directly to main.

You must have at least one pull request to receive credit for this assignment.

Prepare for code review

Your teammates will review these pull requests (PRs) as soon as they are ready, and these code reviews are all due at the beginning of Week 04. Make sure each PR is ready for review before the end of this assignment.

The PR should connect to the GitHub issue it resolves.
The PR description should explain what changed.
The PR description should include clear testing notes.
The PR should include a link to the walkthrough video.
The PR should be posted in your Microsoft Teams channel as ready for review.

Complete the reflection

Download the Week 03 reflection template.
Answer the questions in your own words.
Upload the completed reflection document to Canvas.

Deliverables Checklist

Your team completed the setup tasks from the team activity.
Your team completed the remaining Data Collection features.
Your team completed the remaining Frontend API Page features.
You created pull requests for your assigned work.
You shared your PRs in Microsoft Teams when they were ready for review.
You submitted PR links in Canvas.
You uploaded your reflection document to Canvas.