mariapogosjan / project-happy-thoughts

Happy Thoughts

In this week's project we created a site similar to Twitter, named ‘happy thoughts’ 💌. We practice React state skills by fetching and posting data to an API.

The problem

I started with fetching the api to get the existing data in App.js After that I created two more components, one for the message list and one for the form where the users can post their messages. When I had built the structure of the app I styled it according to the guidelines and built methods to post messages and likes to the API.

I also added some fun functions as animations when the user has written more than 140 characters, submits their message, error message and a loader. I used some great npm libraries for some of the functions:

moment to convert time
React-Toastify to add nice looking alert message to notice the user about an error React-loader-spinner to have a heart loder before the message list fetch is done.

I had a huge problem with connecting my heart button and the amount of likes, and also getting the date to be able to show how many likes a user has made compared to the existing likes. From my one to one with our code coach and some great googling I managed to solve it and got a great result.

Tech

• React
• JSX
• API
• useState
• useEffect
• localStorage
• CSS

View it live

Write your lovely happy thoughts here: https://your-happy-thoughts.netlify.app/ BE: https://project-happy-thoughts-api-5j5sndevjq-lz.a.run.app/