Skip to content

A React project focused on state management, API interactions for fetching and posting data. Features include a design-aligned UI, sorted thought display by recency, like count for each thought, a form for new thoughts, and a like functionality.

Notifications You must be signed in to change notification settings

trista1987/Happy-Thoughts

 
 

Repository files navigation

Happy thoughts Project

On this website, you can share your thoughts and give other people's thoughts a like.

The Problem

In this week's project, I practiced my React state skills by fetching and posting data to an API. From this project, I met some problems:

  • This is my first time to work on posting data to API. At the beginning, I couldn't understand how the POST method works. Also when I fetch data from API, especially from thie project, you also need to fetch the data which you just post, it was a little complicated to me.
  • I'm so glad to find the moment() method for posting time.
  • I tried to put the animation the data is loading, but I don't know how to test whether I success or not for the animation. So I deleted from my code. I keep the animation in the file. I will keep working on it later.
  • For the like button, I wanted to make it like Instagram style, the button's background color will change once I click, I made it by useState, but then I realized if I use useState(boolean). It only works for click, not the result I expected. I found it can also made by array, I will try make by this way also.
  • If I have time, I will keep working on the stretch goal, remain characters and two goals I've mentioned above. From the current project I made, it will pop up an alert if the character number is incorrect.

I have practiced component and props. Made differents components and their CSS components.

I am satisfied what I have done so far. I was a great project for refreshing API knowledges.

View it live

https://trista-happy-thoughts.netlify.app/

About

A React project focused on state management, API interactions for fetching and posting data. Features include a design-aligned UI, sorted thought display by recency, like count for each thought, a form for new thoughts, and a like functionality.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 68.2%
  • CSS 28.2%
  • HTML 3.6%