The App
Recently I found a website that offers random challenges so you can upskill your frontend game. I have previously used this website for another challenge but this time I wanted to take an idea and make it my own.
I took inspiration from the Todo app challenge and added features to make it useful for everyone. It was not followed fully as I had no need for features like dark mode or filtering based on task state.
The goal was to create a single source of truth where any user can access a generated list by a user who has logged in using Facebook. This would become handy for things like shopping lists or task lists.
Click here to see the code.
Weapons of choice
- Next JS - After a successful previous experience, I did not want to move away from it
- Tailwind CSS - Utility based CSS framework, makes it super easy to try many different properties as the design is just a jpg
- Next Auth - Needed a fast way to implement Facebook authentication as I want the lists to be unique to each user
- Firestore / ReactFire - Previously used VueFire to create a realtime solution and figured I would try the React equivalent
- Vercel - Next and Vercel is the perfect combo
What I learnt
Authentication can be tricky. I needed to work out how to prevent users from seeing locked pages they were not meant to see. In the end, I created a higher-level component which validates if a user can be on this page. Then from the page level it was then a case of setting boolean values for pages which are public.
When inputs are controlled, you need to account for the caret position. Since I wanted the list to update in realtime, I needed to account for the inputs to constantly be re-rendered. Luckily you can save and set the caret position using local state.
Wanted an easy way to share list and turns out there is something called a Web Share API. This works exactly like how you share on your favourite apps. Very easy to implement. From there users can add additional items to the list.
Challenges
Environment variables tripped me up many times as I was building this app.
Firstly, my ReactFire just would not work. I traced the issue back to Firebase not initialising as intended. After googling, turns out if you want to use variables on the client side you need to start the naming as NEXT_PUBLIC_ . As soon as I updated all the environment variables which need to be public, I started to see data on my app.
Secondly, I could not get Facebook to authenticate myself and redirect me to the users lists page. After reading the documentation, turns out I forgot to set the NEXTAUTH_URL. Once I did that, I was able to get through and see all my lists.
Because I wanted the lists to be unique to a user, I needed to find an identifier for the user. Hooking into the sign in callback provided something called a sub which stands for subject part of a JSON web token. This value did not seem to change so I used it and passed it as a query when getting the list results.