make run
to run app in dev modemake docker
to build docker imagesmake docker-run
to build and run docker images
Your task is to build a full-stack "Todo" Application in TypeScript. There are two discrete components to this system: A web client that will allow the user to interact with the application and a back-end API that the web client interacts with to store and retrieve data. Each component should run in its own process, however the entire project should be contained in a single git repository. The system does not need to support multiple users or persist data between application restarts though several bonus tasks including adding data persistence are outlined in the sections below. The final step is packaging the application in a manner that makes starting the application in development mode easy. The completed version should take no longer than 6 hours to produce but will take significantly less for candidates familiar with the required toolchain. Some implementation details are intentionally left to your discretion. This helps us determine your familiarity with the TypeScript ecosystem and best-practices.
The two models you will need are provided:
enum TodoStatusEnum {
Active = 'Active', // the todo has is not completed
Inactive = 'Inactive', // the todo is completed
Archived = 'Archived', // the todo is archived (bonus)
}
interface Todo {
title: string; // the title of the todo
status: TodoStatusEnum; // the status of the todo
lastUpdatedAt: number // a unix timestamp representing the time the todo was last updated
createdAt: number; // a unix timestamp representing the time the todo was created
}
Fork this repository into your GitHub account. When you are finished, make a pull request back to this repository. Include a short summary of your experience completing this project in the pull request description.
Bootstrap the front-end application however you best see fit. We recommend using a tool like create-react-app. The front-end should make HTTP requests to the backend to retrieve, create, and update todos. Style your front-end as best you see fit (this is not part of the grading). Your application will be graded on the following criteria:
- The user can create a todo with a title via a form.
- The user can view a table of todos.
- The user can edit the status and title of a to do via the todo table.
- The user can delete a todo via the todo table
- The user can archive a todo (Bonus Task)
- The user can view a table of archived todos at the
/archived
endpoint (Bonus Task)
- React for the view layer
- Redux for state management (do not use React.useState or React.useContext)
- styled-components for CSS
- Axios or Apollo GraphQL (Bonus Task) for data fetching
Bootstrap the back-end application however you best see fit. The back-end should accept HTTP requests from the front-end and retrieve, create, and update todos stored in memmory. The backend DOES NOT need to support multiple users, authentication, or persist todos between restarts. You may add support for authentication or persistence as a bonus task. Your application will be graded on the following criteria:
- The back-end has a endpoint that allows for the creation of a todo
- The back-end has an endpoint that allows all todos to be retrieved as a list
- The back-end has an endpoint that allows a todo to be edited
- The back-end has an endpoint that allows a todo to be deleted
- The back-end requires a user to be authenticated to take the above actions (Bonus Task)
- The back-end persists todos between restarts (Bonus Task)
- Provide a single
make run
command that will install all dependencies and start the applications - Provide a single
make build
command that builds the both the front-end and back-end applications into Docker images and tags them aslatest
(Bonus Task) - Provide a single
make docker-run
command that builds both applications as Docker containers and runs them in a manner that allows them to communicate (Bonus Task)