The End is Neigh!
We have almost done it, we are right at the end. Frodo is in Mount Doom. Darth Vader is throwing the emperor down the tube. The battle of Hogwarts has begun. The Game of Thrones writing has gone to shit.
In this 5 part series, we explored all the tooling you needed in order to pull off a completely type safe To Do List. We Have all the tools, All the allies, and all the life lessons we need in order to complete our journey:
YOU ARE HERE
Tying it all together - Lets put all our hard work to good use with some examples.
You should have the following installed:
node: version 14 or greater. I recommend NVM if you need to switch versions between projects
yarn: You could use npm if you like, but this guide will be using yarns in it’s examples.
Docker: We use docker to setup a development database. You can always install postgers directly on your machine if you don’t want to use Docker. Just make sure postgres is running on port 5432.
Part 5: Tying it all together
We finally get to reap the benefits of all our setup. To wrap this all up, lets finish off our app.
Adding Todo Items
First, lets add a way to actually add a todo. We can add a method to the list-resolver. In a bigger app, you may consider giving TodoItems their own resolver.
addTodoItemto the end of
Regenerate SDK using
Add a button for adding a todo. Which is the same technique used for adding a list:
We did it! We can add todo lists. Only one thing left. Marking our items as done.
Marking todo items as done.
We will follow the same basic flow.
Add a mutation for toggling a review item. We will again abuse
libs/graphql/src/lib/list/list-resolver.tsout of sheer laziness.
Add another mutation to
Regenerate SDK using
Update the front end to use our toggle.
Voila! …………………………… Damn it! What is this nonsense?!
TypeORM is sorting our todoItems by last modified, so items are jumping around as we click them. that is not a great user experience. Lets go ahead and sort them on the front end by id. In a real application, you would want to sort them in part of your query, but in the spirit of maximum laziness, we are just going to sort by ID on the front end.
Last but not least, lets just add some styling, animations, and The Wooley Way logo.
If you want to see everything that was changed, and how terribly lazy I was while making it look good, I squashed it all into one commit for you. If you are curious, but not that curios:
Added a bunch of framer motion animations.
Styled the buttons to match our hackerman logo.
It’s been quite a journey, friends!
Thanks for sticking it out to the end. This was a long series, but hopefully it was worth the read. I hope you learned some new neato things for your next project. If you use this setup in any projects, make sure to tweet it to me: @ericwooley. I’d love to follow your progress!
If you would like to see more content like this, make sure to sign up for the news letter.
If you spot an error, or have any recommendations, please:
If you really liked this content, please consider sharing it.