Project Summary: Full Stack To Do App

This project gave me an absolute tonne of learning opportunities and experience – from refactoring existing code to using new technologies – all packed within less than two days. I really enjoyed it!

Check out the demo here (and the code here).

What is it and what does it do?

It’s a(nother) To Do app!

This completes the trifacta of To Do apps – vanilla JS, React and now full stack (PERN).

In this version, you can:

• Add a new todo
• Edit an existing todo
• Delete a todo
• Complete a todo

How was it built?

It was built using the PERN stack (PostgreSQL, Express, React, Node) by following this tutorial, though I refactored it a couple of times and extended it further.

The final stack looks like this:

• React + TypeScript + Material UI front-end, hosted on GitHub Pages
• Node + Express server, hosted on Heroku
• PostgreSQL database, also hosted on Heroku

The refactors involved transitioning from vanilla JS to TypeScript, and from Bootstrap to Material UI.

The main extension was adding the ability to ‘complete’ a todo item. This involved updates to the entire stack; the front-end visuals, the existing PUT API call, and a new column in the Postgres table.

Finally, the deployment is handled between GitHub pages for the front-end and Heroku for the back-end (server and database).

The initial tutorial took about 2.5 hours to complete, but I ended up spending another 9-10 hours on the refactors, improvements and deployment, bringing it to a total of around 12 hours.

What did I learn?

This project was great – I learned so much!

• The tutorial was a good reminder of how easy it can be (relatively speaking) to setup a basic Node/Express server with API endpoints
• The transition to TypeScript and Material UI wasn’t simple, but it also wasn’t as painful as it could’ve been – I learned the value of reading and using the documentation
• I got some more experience of deploying to two separate services within the same project, as well as pushing to different branches remotes
• I briefly used Heroku some time ago – but this took me deeper into creating a new app, deploying a server and provisioning a database
• More experience with dotenv and using environment variables on Heroku to avoid leaking sensitive information
• First time using Postgres (previously used MySQL / DynamoDB) – from installing it locally to running SQL via pgAdmin to create the remote table

What’s next?

I’ve built 3 different todo apps now so I probably won’t spend much more time on this, but there’s a few things I’d consider:

• Heroku takes some time delivering the data so some sort of “Loading…” message or spinner would let the user know what’s happening
• The visuals are really basic so I would look at making better use of Material UI and possibly it’s theming feature
• Currently the app uses a single database and table, and so all users share the same todo list – I would look to split this out, potentially adding some form of unique user ID to the todo items to ensure a user only sees their own