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!
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
dotenvand 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
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