First steps in React and TypeScript — Diet Planner App
I want to start this article by first saying a big THANK YOU to one of my best friends, mentor and all around nice guy Gabriel Troia who introduced me to the world of Typescript and React and has been a big help ever since.
Having previously worked in the visual arts industry , I recently decided to start adventuring into the world of coding and to make the learning experience a bit more exciting I decided to do it while building a web app from start to finish, thinking that the challenges along the way should provide the foundation that I need going forward. So I started with learning React from scratch and picking a project— with my sister being a nutritionist I decided to build weekly meals planner that enables her to build custom diets for her patients.
It took me around 4 weeks to build the first working prototype, using class components in React , Google’s Firestore database for the backend and Redux for state management in React. The hardest bit of this phase was definitely learning how to use Redux and Redux Thunk for creating the centralised store in my app and connecting it to the back-end. Once I understood how Redux works, building the flow of the app became quite easy.
After finishing the first prototype I felt like I want to get into a typed language and so I started learning TypeScript. Also along the way I started learning how to work with hooks and function based components for a more cleaner code. With this in mind I started the project again from scratch, this time building it in TypeScript using Function-based components with Hooks and Storybook for component driven development.
Learning TypeScript has been such an improvement on my coding experience and provided so many benefits that I can hardly see myself going back to writing pure Vanilla JavaScript without any sort of type system. I could go on about all the benefits of TypeScript over Vanilla JavaScript but I think my friend Gabriel has covered that perfectly in his article : Why do I prefer my JavaScript in TypeScript ?
Also I have learned quite a bit about dealing with data in Google Firestore. The app is structured using several collections that are connected — the Patients collection which has multiple Diets, each Diet collection has 7 Menus, one for each day of the week — this have each an individual reducer and state inside my Redux store — and each Menu can contain a mixture of recipes, ingredients or independent food items for each meal of the day — breakfast, lunch, snacks etc. So each entry in the collection has multiple references to ID’s in other collections.
The biggest challenge this presented was when the user wants to update or delete and recipe or a food item because that needs to update the stats in all the menus and/or the recipes that use that particular item as well as checking the currently unsaved diet and see if that item is present and if so update that a well, even though it doesn’t have a reference in the database yet. To overcome this I wrote some functions that firstly query the database for all references to the item that is being modified or deleted, than constructing a local collection of the references on the client and passing that collection to another group of functions that parse it and update all the stats. After that is done the updated collection is dispatched using Redux Thunk to Firestore to be updated using the batch() function. In between these operations the app displays a pop-up notifying the user of the references it found and providing the option to either go forward with the changes and update all the references in the background or cancel the whole operation.
Next step has been leveraging the power of JSS, inline conditional styling of react components and flexbox to build a responsive design so the app can work well on mobile devices browser without the need to implement a native application. This presented quite a challenge because the layout was designed to work on a horizontal display whereas the mobile device is used vertically. I’ve done that with few functions that return a media query based on a breakpoint number that’s passed as an argument which in turn return different css properties. This functions can be spread conditionally as component styles based on the window width. That way can have different styles and layouts on the same component based on the screen size.
In closing I can say that building this first app from scratch has been an amazing journey and even though it took countless cups of coffee and sleepless nights struggling to figure out various issues that I encountered for the first time, I can honestly say I’m very much enjoying my time behind the keyboard.
Cheers.
