TeaTime

TeaTime is a React Application built for the aspiring tea drinker. I made this project from scratch using React, Redux, and Ruby on Rails as an API. This application was created to track favorite tea blends, learn about different tea types, and steep tea using a built-in timer.

Tea Time Project

Purpose and Goal

This past year, I began developing an interest in drinking tea and learning more about the different types. I wanted to create a simple application where other tea drinkers could:

  1. Learn about different teas as well (including their origin and brewing suggestions).
  2. Keep a detailed record of their teas, which could also be updated.
  3. Utilize a timer feature to keep track of steeping time.

I found that the best way to implement these features were to use state to pass data throughout the application and to render content.

Architecture

React was used for this application for its simplicity and reusable components. Redux was also used for state management to store and manipulate data throughout the entire application. A Rails RESTful API was constructed as the backend server to handle data persistence within the database.

Obstacles & Thought Process

The most challenging part of the project was the organization. While planning the application's layout, I needed to be sure of which components would be required and where I wanted each component rendered on the UI. This process took some time; however, sketching out a visual helped organize the layout. As I began creating multiple components, I was very mindful of code structure and readability. I also focused on breaking the code into smaller reusable components as much as possible.

Lessons Learned

I learned a lot from building this application. I quickly learned 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 backend server. I also learned how to use React Router to navigate between different parts of an application. Staying organized, focusing on code structure, and readability made the application very manageable and saved me headaches during the debugging process.