CSE 341 | Learning Activity

W03 Learning Activity: Team Project Orientation

Overview

Purpose: Learn about how to organize a team project.
Task: Read the following information and complete the activity instructions below.

This week, you will begin working in your team project. This project is different from the individual API projects you have built so far. Instead of starting with an empty folder and step-by-step instructions, you are joining an existing application with existing files, patterns, decisions, and problems.

This kind of project is often called a brownfield development project. A greenfield project starts fresh. A brownfield project already exists, and your job is to understand it well enough to improve it without breaking the parts that already work.

Brownfield work is important because most professional software development happens in existing codebases. Developers spend a lot of time reading code, tracing behavior, fixing bugs, improving old designs, and coordinating changes with other people. This team project is designed to help you practice those real engineering skills.

Discipleship: Making room for one another

Working in teams can sometimes be difficult because we are all very different. We come from different backgrounds and perspectives, we have different skills, and we have different circumstances we are balancing as we study together in this course.

And yet, learning to work with a team is a critical part of preparing for employment. Even more, it is essential as we learn to live with and support our brothers and sisters in our communities.

As you prepare to work with your team on this project this week, consider these words from Elder Gerrit W. Gong, a modern-day Apostle of Jesus Christ, in his talk Room in the Inn:

First, we come to the Inn as we are, with the foibles and imperfections we each have. Yet we all have something needed to contribute. Our journey to God is often found together.

...

Second, He entreats us to make His Inn a place of grace and space, where each can gather, with room for all. As disciples of Jesus Christ, all are equal, with no second-class groups.

Invitation: As you work together in this course, remember that each of us has different strengths and weaknesses. Please be patient with yourself and your teammates. Remember that by working together, we can lift and strengthen one another and accomplish more than we could on our own.

Preparation Material

What is the team project?

The team project is called Kizuna Rail. It is a fictional scenic railway booking website. The application uses Node.js, Express, EJS templates, static frontend assets, and a JSON-based data store. The repository also includes intentional technical debt so you can practice understanding and improving an existing project.

As you work on this project, resist the urge to rewrite everything immediately. A big part of brownfield development is learning to make careful, limited changes that fit the existing system and reduce risk for your team.

Greenfield versus brownfield work

Greenfield project	Brownfield project
You create most of the structure from scratch.	You inherit existing structure and decisions.
The main challenge is choosing a design.	The main challenge is understanding the current design before changing it.
You usually know why each file exists.	You often need to trace code to discover why files exist.
Changes are usually isolated to your own work.	Changes must be coordinated with teammates and existing behavior.

Useful brownfield habits

Read before changing.
Run the application locally before making a feature branch.
Trace one request from route to model to view before editing code.
Make small commits that are easy for teammates to review.
Ask questions when existing code behavior is unclear.
Preserve working behavior unless your issue specifically asks you to change it.

Activity Instructions

Set up your team repository locally

Work as a team

You created a copy of the team project repository during the Week 02 team activity. In this activity, use your team's copy of the repository, not the original template repository. Your team should coordinate setup, questions, branches, pull requests, and reviews together.

Use the repository your team created in Week 02. If you already cloned it, open that folder in VS Code. If you have not cloned it yet, clone your team's repository from GitHub using the VS Code "Clone Repository" option or by running the following commands in your terminal.

git clone https://github.com/YOUR-TEAM/YOUR-TEAM-REPO.git
cd YOUR-TEAM-REPO

Make sure your local main branch is up to date before you begin exploring.

git switch main
git pull origin main

Install the project dependencies. In this course, use npm for Node.js projects.

npm install

Make a copy of the .env.example file and name it .env.

Check the environment settings. The example .env file has some values such as PORT=3000 and NODE_ENV=development. If your team later adds secrets or deployment-specific settings, be careful not to commit sensitive values to GitHub.

Start the development server.

npm run dev

Open the application in your browser at http://127.0.0.1:3000. You should be able to see the main page and click on some of the options.

If the project does not start

Read the terminal error carefully. Check that dependencies are installed, the .env file exists, and port 3000 is not already being used by another app. Bring unresolved setup problems to your team quickly so everyone can work from a running project.

Review the codebase

Before changing any code, spend time reading the project structure. Open the files and folders listed below and make notes about what each part seems to do.

README.md
package.json
server.js
src/routes/router.js
src/routes/
src/models/model.js
src/models/seeds/
src/views/routes/
public/

Answer these architecture questions

Use your team's repository to answer the following questions. After you have thought through a question, expand the example answer and compare it with what you found.

What is the main purpose of the application?

Example answer

Kizuna Rail is a fictional scenic railway booking website. It lets users browse railway routes, view route details, work through booking screens, and explore development scenarios. The project is not just a finished product; it is also a training codebase for practicing brownfield development.
Where does the application start?

Example answer

The main entry point is server.js. It creates the Express app, initializes the file-based database, configures middleware, sets up EJS views, mounts the main router, defines error handling, and starts listening on the configured port.
How are routes organized?

Example answer

The main router is in src/routes/router.js. It maps top-level paths such as /, /about, /routes, and /scenarios. More specific route behavior is split into files in src/routes, such as route-listing pages, route details, booking, confirmation, and scenarios.
Where is the application's data access code?

Example answer

Right now, the project will load static data from files. Later, your team will change this to use a MongoDB database.

The main data functions are in src/models/model.js. This file exports functions for working with routes, stations, schedules, ticket classes, and confirmations. Currently, the data is loaded through src/models/db-in-file.js, and seed data lives in src/models/seeds.
How does this project render pages?

Example answer

The project uses EJS templates. The server configures EJS as the view engine and points Express to src/views. Route handlers call res.render() with a template name and data. Shared layout pieces live in src/views/partials, and route-specific pages live in folders such as src/views/routes and src/views/scenarios.

You will be making changes to this approach to have pages consume APIs and use JavaScript to update the pages dynamically.
Where do static frontend files live?

Example answer

Static files are served from the public folder. That folder includes CSS, images, and browser JavaScript. Express makes those files available directly to the browser with express.static().
What scripts are available for local development?

Example answer

The project scripts are listed in package.json. The most important command for local work is npm run dev, which starts the app with Nodemon and the local .env file. The npm start command runs server.js directly. The npm run reset command restores the file-based data store.
What makes this a brownfield project?

Example answer

The project already has working pages, existing route files, existing data functions, established file organization, and intentional technical debt. Your team is not starting with an empty project. You are learning how the current app works and then making focused improvements through issues, branches, pull requests, and reviews.
Why should you be careful before refactoring?

Example answer

In an existing app, code may depend on other code in ways that are not obvious at first. A change that looks small can break a view, route, data function, or teammate's work. Refactoring is valuable, but it should be done intentionally, tested carefully, and kept within the scope of the issue your team is working on.
What should you do when you do not understand part of the code?

Example answer

Trace the request path, read the related files, run the app, add temporary notes for yourself, and ask your team. In a brownfield project, confusion is normal at first. The goal is to turn confusion into a shared understanding before making changes.

Deliverables Checklist

You can run the team project locally.
You can explain what brownfield development means.
You can identify the app entry point, main router, data model file, views folder, and public assets folder.
You can explain how a browser request moves through the project at a high level.
Your team has discussed any setup or architecture questions that came up during the activity.