zbtnot/todont

An app to keep track of tasks

todont

Yet another app to keep track of tasks

Architecture

Frontend

• TypeScript
• React
• Tailwind CSS
• Storybook

Backend

• TypeScript
• Express for routing
• Zod for schema validation
• Knex for data management (MySQL backing store)
• Hurl for integration tests

Development

• Install just for task running
• Clone the repo
• Copy .env.dist to .env and fill it out to your heart's content
• Assemble the frontend and backend with just build
  • Alternatively use watchers just watch-ts and just watch-css
• Stand up the dev environment just docker
  • Environment will be live at
    • port 8080 for the frontend
    • port 8081 for the backend
    • port 8082 for the db
• Assemble the database schema with just db
• Run integration tests with just hurl
• Run storybook with just storybook

License

The source code contained within this repository is available under the terms of the ISC license.

The kitten at public/assets/logo.png comes from this unsplash image and is used under the unsplash license.

todont's Issues

Add jest

Add todo items and container for them

• Component for an individual todo
  • displays the description
• Container component for a list of todos
  • separated by done and not done

Add base scaffold

• readme
• license
• base directory structure

Add base frontend bits

• Add tailwind
• Add heroicons
• Add a cool logo with a cat
• Add a navbar and base page using the cool cat logo

Add and wire component for creating tasks

• text box that creates a todo
• should be wired up to the list so it gets added on success

Add backend endpoints for CRUD operations on a todo

Overview

A todo contains three pieces of information:

• an optional unique identifier (used for updates/deletes)
• a string representing its details
• a boolean representing its state (done = true)

The data structure resembles the form:

{
    id?: number;
    description: string;
    done: boolean;
}

Endpoints

GET /todo

• retrieves the list of todos

GET /todo/:id

• retrieves the specified todo
• returns not found if the record does not exist

POST /todo

• creates a todo
• accepts a json body with only the fields mentioned above (except id)
  • on validation failure returns unprocessable entity
• returns the location header /todo/:id where id is the unique identifier for this created record

PUT /todo/:id

• updates a todo
• accepts a json body with only the fields mentioned above (except id)
  • on validation failure returns unprocessable entity
• returns no content on success
• returns not found if the record does not exist

DELETE /todo/:id

• deletes a todo
• no body for this request
• returns no content on success
• returns not found if the record does not exist

Data storage and validation

For this project we will use mysql with the knex query builder.
Request handlers will leverage zod for schema generation and validation.

Add development tools and backend base

• just for tasks
• docker compose
• node / nginx / mysql
• express

Add eslint

Add storybook

Add logging

Right now the backend doesn't have any logging.
We should add pino and wire up our endpoints for basic logging info

Add notification bar for messages about errors

Add component that displays notifications to the end user

add production build

tweak esbuild to generate a production build if the environment is set for it