Coding Challenge: Emergency Handoff

In this challenge assignment, you will step into a real-world scenario that developers frequently encounter: taking over someone else's project mid-development. Your coworker had a family emergency and will be out for at least a week. The client's website is almost ready for launch, but several critical tasks remain unfinished. You have been asked to complete the work so the site can launch on schedule.

Unlike previous assignments where you built features from scratch, this challenge requires you to read, understand, and modify existing code. This tests a different but equally important skill set: code comprehension, debugging, and working within an established codebase with its own patterns and conventions.

The project is for Kizuna Rail, a Japanese railway company launching an English-language website to attract international tourists. Your coworker left you a detailed todo list of what still needs to be done. Your job is to complete each task and deliver the final product.

Preparation

This assignment uses a pre-built project repository. You will use the GitHub template feature to create your own copy, then clone it to your local machine to work on it.

1. Create Your Copy and Clone the Repository

Start by creating your own copy of the project:

1. Visit the repository at https://github.com/byui-cse/kizuna-rail
2. Click the Use this template button in the upper right corner and select Create a new repository
3. Give your repository a name (kizuna-rail) and create it under your GitHub account
4. Clone your new repository to your local machine:

   
                   git clone https://github.com/YOUR-USERNAME/kizuna-rail.git
                   cd kizuna-rail
               

2. Install Dependencies and Start the Server

This project uses pnpm as its package manager. Install the required dependencies and start the development server:

        # Install all project dependencies
        pnpm install
        
        # Start the development server
        pnpm run dev
    

The server should start on http://127.0.0.1:3000. Open this URL in your browser to view the site.

3. Review the Scenario

Before starting work, familiarize yourself with the project by visiting these pages in your browser:

• http://127.0.0.1:3000/scenarios — Explains the purpose of this practice site
• http://127.0.0.1:3000/scenarios/emergency-handoff — Contains the detailed todo list for this challenge

The emergency handoff page provides background context about the project and lists six specific tasks that need to be completed. Read through the entire scenario before you begin working on the tasks.

Challenge Instructions

Your coworker left you a detailed todo list that needs to be completed before the site can launch. The complete list of tasks, along with specific requirements and helpful hints, is available on the emergency handoff scenario page within the running application.

Each task requires you to read existing code, understand how it works, and make targeted improvements or fixes. Work through the tasks systematically, testing each one thoroughly before moving to the next.

Testing Your Work

As you complete each task from the todo list, test your implementation thoroughly to ensure it works correctly. The emergency handoff scenario page provides specific testing guidance for each task.

General testing strategies include:

• Navigate through the site and verify that all pages load without errors
• Test interactive features by clicking buttons, selecting options, and submitting forms
• Check the browser console for JavaScript errors or warnings
• Verify that any filtering or sorting features work with different combinations of parameters
• Test edge cases like missing parameters or invalid values
• Ensure your changes work across different browsers if possible

The scenario page includes specific URLs and verification steps for each task. Use these to confirm that your implementation meets the requirements before moving to the next task.

Git Workflow Suggestions

While not required, you may find it helpful to use Git branches to organize your work on each task. This mirrors professional development practices where features and fixes are developed in isolation before being merged.

A suggested workflow for this project:

1. Create an issue or note for each task to track your progress
2. Create a new branch for each task as you begin working on it
3. Commit your changes when a task is complete
4. Merge the branch back to main after testing
5. Move to the next task and repeat the process

This approach helps you isolate changes, makes it easier to undo mistakes, and provides a clear history of your work. However, the primary focus of this assignment is completing the tasks, not mastering Git workflows.

Submission Requirements

When you have completed all tasks from the todo list:

1. Record a video demonstration (2-3 minutes preferred, 5 minutes maximum) walking through each completed task. Show how you solved each requirement and demonstrate that your implementation works correctly.
2. Upload your video to YouTube (as unlisted), OneDrive, Google Drive, or another file sharing service
3. If you are using a cloud storage solution, ensure the link is set to viewable by anyone with the link. Any submissions requiring permission or access requests will receive a zero.
4. Push your completed code to your repository on GitHub
5. Submit both the video link and your GitHub repository URL

Hints and Tips

The emergency handoff scenario page includes specific hints for each task, but here are some general strategies for working with unfamiliar code:

Understanding the Codebase

• Start by exploring the project structure. Identify where views, controllers, models, and static assets are located.
• Use your code editor's search function to find relevant files. For example, searching for "routes" or "filter" can help you locate files related to those features.
• Follow the flow of data from routes to controllers to views. Understanding this path will help you identify where changes need to be made.
• Read existing code carefully to understand the patterns and conventions used in the project. Match your changes to these patterns.

Debugging Strategies

• Use console.log() statements to inspect values at different points in your code. This helps you understand what data you are working with.
• Check your browser's developer console for JavaScript errors that might indicate problems with your changes.
• Use your browser's network tab to see what requests are being made and what query parameters are being sent.
• Test changes incrementally. Make small modifications, test them, then move to the next change. This makes it easier to identify what broke if something stops working.

Common Pitfalls

• Remember to update import paths after reorganizing files. Missing or incorrect paths will cause the server to crash.
• When working with helper functions, ensure they are properly exported from their module and imported where needed.
• Query parameters are always strings. Convert them to the correct data type if needed for comparisons or calculations.
• Test edge cases like missing query parameters, invalid values, or empty results to ensure your code handles all scenarios gracefully.

Key Concepts Summary

This challenge assignment reinforced critical real-world development skills that go beyond writing new code. You practiced reading and understanding existing code, navigating an unfamiliar codebase, debugging issues in someone else's work, and making targeted improvements without breaking existing functionality.

The tasks covered several technical concepts from previous assignments: accessibility improvements, file organization and architecture, query parameter filtering, helper function creation and usage, data transformation in models, and CSS media queries for print styles. Applying these concepts in a pre-built project demonstrates your ability to transfer knowledge to new contexts.

Taking over someone else's project mid-development is a common scenario in professional software development. Whether a team member leaves, priorities shift, or emergencies occur, developers must frequently work with code they did not write. This experience builds the adaptability and problem-solving skills that separate effective developers from those who can only work on greenfield projects.