Please read this whole README before starting.

Welcome to the code test!

This test is meant to help us get an understanding of your technical knowledge and how you tackle problems. The way you go about finding your solutions and implementing them is just as important to us as the final product. This test should take you about 2 to 4 hours.

When you’re finished with the test, please email us to schedule a code review! We’ll ask for a demo of what you have working as well as have a conversation about how you made what you made.

Create an application to create, view, update, and destroy ‘todo’ items. The application should be a single page application based in a popular framework (React, Vue, Svelte, or similar) with a backend based which interacts with a SQL or NoSQL style database.

• Fork this repository into a public repository on your account

• Commit early and often. We'll likely be following along with your progress.

• A link to your repository with code in it.

• A text description of the todo
• A checkbox to mark the todo as done or undone

• The user should be able to create a new TODO item
• The user should be able to destroy a TODO item
• The user should be able to update the text description of a TODO item

• TODOs should be Created, Updated, Listed, Viewed, and Destroyed via REST or graphQL
• TODOs should be stored in your database on the backend.

If you find that you have completed the earlier items with time to spare, please consider adding the following

• Deploy your TODO app to the internet so we can see it in action
• Test it on Mobile device sizes.
• Write unit tests for your code.
• Edit this ReadMe with new suggestions for how to improve this code test

1. Add tooltips for each action icon
2. Save todos in browser (localStorage or IndexDB) to allow app to work when disconnected from internet
3. Add users

This application uses NextJS and Postgres (with Prisma).

The best way to run this project is with Docker Compose.

At the root of the project:

1. Open docker-compose.yml file
   1. Uncomment line 8, environment: and line 9 - DATABASE_URL=
2. Open prisma/schema.prisma
   1. Uncomment line 7 with env("DATABASE_URL")
   2. Comments line 8 with env("POSTGRES_PRISMA_URL") and line 9 with env("POSTGRES_URL_NON_POOLING")
3. Run docker compose up to run and see logs
4. or run docker compose up -d to run only

This project includes all frontend, backend, and database code.

The frontend code includes everything except the ./app/src/app/api folder

The backend code is in ./app/src/app/api

The backend code interacts with the database via the ORM prisma. The prisma code can be found in its folder ./app/src/app/prisma

This is where the db seed file (seed.ts) is and the db schema file (schema.prisma).

• Install & Use NextJS
• Set up Google Material Icons
• Google Material Icons
• Combine state into one object
• Review HTTP methods
• ORM Prisma Docs
• Prisma in NextJS Examples
• Docker: How to use postgres, adminer, & node in containers
• Prisma Generate Client during Build

I typicaly create an idea of the data modals needed for an application before coding. Here is a data modal for this todo code test.

Similarly, I typically start applications with a little design work to create an idea of how data will be display and interacted with. Here is the design created for this todo code test.