steven/todo
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
No description
4 commits 1 branch 0 tags 127 KiB
Find a file
Exact
Steven Chetwynd 429725365d fix(docker): add missing swagger generation
2025-01-16 14:01:46 +00:00
src fix(server): add missing security headers 2025-01-10 15:09:38 +00:00
tests initial commit 2025-01-08 10:27:22 +00:00
.c8rc.json initial commit 2025-01-08 10:27:22 +00:00
.dockerignore initial commit 2025-01-08 10:27:22 +00:00
.env.example chore(README): add readme and example .env file 2025-01-16 14:00:07 +00:00
.eslintrc.json initial commit 2025-01-08 10:27:22 +00:00
.gitignore initial commit 2025-01-08 10:27:22 +00:00
Dockerfile fix(docker): add missing swagger generation 2025-01-16 14:01:46 +00:00
jsconfig.json initial commit 2025-01-08 10:27:22 +00:00
package-lock.json fix(server): add missing security headers 2025-01-10 15:09:38 +00:00
package.json fix(server): add missing security headers 2025-01-10 15:09:38 +00:00
README.md chore(README): add readme and example .env file 2025-01-16 14:00:07 +00:00
tsconfig.json initial commit 2025-01-08 10:27:22 +00:00

README.md

Todo App

A Todo app made in the style of TodoMVC

[[TOC]]

Description

I realised all the projects I have on Gitlab are test or learning projects, this means they are either unfinished or full of odd ideas. Which may not present my skills in a good light. This Todo is my A game, no crazy ideas, just web standards, well known patterns, and packages.

The main points of interest for this project are:

  • Progressive enhancement, will still work without JS or CSS
  • Content Negotiation, same endpoints can serve HTML or JSON
  • HATEOAS using hal+json

Installation and running

Docker

  1. Clone this repository
  2. run docker build -t todo
  3. run docker run -e REPOSITORY="file" -p 3000:3000 todo (see environment variables below to configure container)

Node

  1. Clone this repository
  2. run npm ci
  3. create a .env file as detailed below
  4. run npm run dev or node ./src/index.js

Environment variables

See example .env.example.

Variable Values Description
REPOSITORY "file"/memory" ("memory") Where should to todos be stored
PORT number (3000) Which port should the server use
COOKIE_SECRET string ("secret") Secret used to encrypt the cookies

Usage

Visit the website, new todos can be added, set as completed, deleted, filtered, and updated.

Try also visiting the site with css disabled, and/or with javascript disabled the site will remain functional.

Currently the server creates a cookie with an ID, the server stores any todos created using this ID. If the user clears their cookies their todos will be inaccessible.

Leasons Learnt / Future Changes

JSX express view engine

I chose this because I like the JSX format, and was hoping it would provide type safety, however this was not the case.

I would re-do this without using an express view engine and instead call the react renderToString/prerenderToNodeStream/renderToPipeableStream from the routes instead. Maybe with some additional handling and caching around it.