Final Project React/Redux: TeaTime

Posted by Ranika Williams on August 3, 2020

At last I have finally made it to the final project and it feels kind of bittersweet! A lot of things have happend over these past 15 months, from choosing to transition careers, to starting my coding journey, and deciding to take a leap of faith by enrolling into Flatirom School to learn software development all while working a full-time job. At the beginning of the year, I decided to quit my full-time job to immerse myself in the curriculum full-time, becoming a stay at home mom and teacher to my kids due to the pandemic. There were a few setbacks here and there but overall I’m proud to have pushed through regardless of wanting to quit during times of frustration.

For my final project I decided to create a single paged application based off my interest of drinking tea. I am not a tea expert, however, over the past year of experimenting, I wanted to create a simple application where users could learn about different teas (their origin and how they are commonly brewed) while also keeing a detailed record of their own teas with a timer feature to keep track of brewing time. TeaTime was created to serve those purposes. Simply put, a tea directory for learning different types of teas with suggestions on brewing instructions and a place to record teas with an included timer feature.

TeaTime was built with a Rails API back-end and a React/Redux front-end used to create functional, reactive code with Redux as a state manager. I was quickly able to learn how state and props worked in React, ultimately allowing me to understand and incorporate Redux and Thunk to handle state based on async actions called to the Rails back-end server. I also learned how to use React routing to be able to move between different parts of an application. The most challenging/satisfyling part of the project was planning the layout of the page, as each component takes up its own place to be rendered on the web page. Organization in my opinion, is key when working with React as you begin creating multiple components. So having somewhat of a folder structure for your files can really help with keeping components organized, avoiding components from quickly becoming disorganized and mesy. Overall, I really enjoyed this last section and after completing this project, I still have alot to learn about React. Eventually I would like dive into React Native to learn how to create mobile applications as well.