Technical Interview: Debugging

Introduction

This repository is a to do list SPA using React for the UI layer. The back-end is a CRUD api.

The /todo endpoint for the API is artificially slowed down to ~0.5s response times to make UI sequences more visible.

Requirements

• Docker
• Node.js (v18.3.0)
• just
• fnm

Optional:

• gh

Getting Started

1. Clone repository

   # with 'gh' cli
   gh repo clone moment-eng/interview-debugging-react
   
   # with git
   git clone https://github.com/moment-eng/interview-debugging-react.git

2. Ensure you have correct version of Node.js installed. We recommned fnm (fast node manager) or nvm (node version manager). You can also download 18.3.0 directly from https://nodejs.org/download/release/v18.3.0/

   node --version
   # should print out "v18.3.0"
   
   # set correct version with fnm
   fnm use $(cat .nvmrc)
   
   # set correct version with nvm
   nvm use $(cat .nvmrc)

3. Install dependencies

   # in root directory
   just install

4. Start the Docker application

5. Launch services

   # in root directory
   just run

Front-end is available at: http://localhost:3000

API is available at: http://localhost:3001

Both the Front-end and API are setup to support hot reloading when changes to files are made.

API Endpoints

Path	Method	Description	Example Request Body	Example Response Body
/	GET	"Hello, World". Useful for testing that the API is running	n/a	"Hello, World"
/todo	POST	Creates a new to do entry and returns created object	{description: 'Foo'}	{id: 'abc-123', status: 'todo', description: 'Foo'}
/todo	GET	Returns list of to do entries	n/a	{todos: [{id: 'abc-123', status: 'todo', description: 'Foo}]}
/todo	PUT	Updates to do entry and returns updated object	{id: 'abc-123', description: 'Hello, World' }	{id: 'abc-123', status: 'todo', description: 'Hello, World' }
/todo	DELETE	Removes to do entry and returns list of to do entries	{id: 'abc-123'}	{todos: []}

Notes

• React documentation
• Create React App documentation
• Fastify documentation