Talk about Stressful Times: How COVID-19 Shaped My First React-Hooks-Redux App

It was early March 2020 in NYC.

I was approaching the finishing line of my 4-month coding bootcamp, which some of you can probably guess from the name of my final product:
Flatiron Chill Lounge.

My classmates and I were thrilled to have made it this far. Although it was nerve-wracking having to build our own milestone projects within two weeks, we knew we had each other: tapping on shoulders and debugging together.

We even planned on bringing beer+wine+champagne to our Science Fair.

Then the COVID-19 outbreak happened.

Everything was shutting down. The beer-and-wine celebration suddenly went out of the window. No more shoulder taps. We were on our own.

Or were we?

That was when it hit me: OK, no more BYOB parties. OK, we need to take care of ourselves. How about creating a virtual space that combines a self-care guide with a little virtual booze and positive vibes?

And just like that, Flatiron Chill Lounge was born.

Structure

With the help of draw.io, I was able to visualize my domain model…

…as well as my React component tree:

Feature

There are 3 main features in this web app:

1. Guide
Inspired by youfeellikeshit.com, the Guide contains 5 sets of questions. Each subsequent question or guide is dynamically rendered based on the user input.

  • On stage:
  • Behind the scenes:
    The biggest challenge of building the Guide was figuring out how to render content dynamically AND save user inputs along the way.

As a visual thinker, I decided to draw out the Guide logic, which allows me to structure my code:

In terms of saving user inputs, I was able to leverage React-Redux:

// grab user info from the store
const user = useSelector(state => state.user)
// update user results on the frontend
const dispatch = useDispatch()
const action = {
type: ‘SET_RESULTS’,
payload: resultsData.user.results
}
dispatch(action)

For both key functions (rendering content and saving user inputs), I took full advantage of Reack Hooks, like so:

// set states of guide content
const [content, setContent] = useState(“intro”)
// set states of user results
const [eat, setEat] = useState(0)
const [sleep, setSleep] = useState(0)
const [exercise, setExercise] = useState(0)
const [mood, setMood] = useState(0)

2. Wellness Report
This page displays the results of user inputs; each set of results contains 4 wellness indicators (eat/sleep/exercise/mood) and can be filtered by date.

  • On stage:
  • Behind the scenes:
    It was my first time utilizing an external library: React Calendar, and created interactivity through trial and error. I remember jumping up and down when I made it work.
// change results based on calendar date click
function onChange (calDate) {
setCalDate(calDate)
const filteredResults = userResults.filter(result => {
const newResultFormat = new Date(result.created_at).toLocaleString().split(“,”)[0]
const newCalDateFormat = calDate.toLocaleString().split(“,”)[0]
return newResultFormat === newCalDateFormat
})
setResultArr(filteredResults)
}

3. Message Board
This section contains all user-generated message cards; the user can also search or filter specific cards.

  • On stage:
  • Behind the scenes:
    I had the most fun with this part. It was my putting-it-all-together moment: build search/filter functions, call external APIs, save data to the back end, and display data on the front end. I am a true full-stack developer.

Final Thoughts 🧘‍♀️

Of course, this app has a lot of room for growth, considering I was only given two weeks to build, deploy, and learn to implement React Hooks and Redux in the midst of the coronavirus outbreak.

All in all, I am proud to have completed a full-functioning web app that hopefully brings joy and delight in this uncertain time. And I hope you enjoy the virtual cocktails as well :)

Fullstack Developer: React with Rails. Currently exploring data structures, D3 visualization, and other front-end magic.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store