Talk about Stressful Times: How COVID-19 Shaped My First React-Hooks-Redux App
Tags: react, redux, showdev
Published: 2020-05-23 16:55:12

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: <br/>[*Flatiron* Chill Lounge](https://chill-lounge.netlify.app/).

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](https://chill-lounge.netlify.app/) was born.

### Structure

With the help of draw.io, I was able to visualize my domain model...
![Chill Lounge Domain Model](https://dev-to-uploads.s3.amazonaws.com/i/s7gurcf0nla9bug58miy.png)

...as well as my React component tree:
![Chill Lounge Component Tree](https://dev-to-uploads.s3.amazonaws.com/i/nw22fvznu62gmrcmiskt.png)

### Feature

There are 3 main features in this web app:

####1. Guide 
Inspired by [youfeellikeshit.com](http://youfeellikeshit.com/), the Guide contains 5 sets of questions. Each subsequent question or guide is dynamically rendered based on the user input.

- On stage:
![Chill Lounge Demo Guide](https://dev-to-uploads.s3.amazonaws.com/i/plt9kxgnt3pwz0pglu6e.gif)

- 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:
![Chill Lounge Guide Logic](https://dev-to-uploads.s3.amazonaws.com/i/8l9otygq7ep3ew61sdwq.png)

In terms of saving user inputs, I was able to leverage React-Redux:
```js
// 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:
```js
// 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:
![Chill Lounge Demo Report](https://dev-to-uploads.s3.amazonaws.com/i/7k3lhx9cao4tpo6n9wfh.gif)

- Behind the scenes:
It was my first time utilizing an external library: [React Calendar](https://www.npmjs.com/package/react-calendar), and created interactivity through trial and error. I remember jumping up and down when I made it work.
```js
// 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:
![Chill Lounge Demo Board](https://dev-to-uploads.s3.amazonaws.com/i/xjn1vy7vfuvcv4fwq8xb.gif)

- 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 :)