Happy Thoughts – Technigo Bootcamp Project 2025 #41
Conversation
- Implemented Form component to submit new quotes - Each quote stored as an object with text, time, and likes - Added QuoteBox to display quotes with dynamic like button - Displayed time since submission using getTimeAgo function - Likes are tracked individually for each quote - Styled components applied for layout, buttons, and quote cards
KausarShangareeva
changed the title
| const [thoughts, setThoughts] = useState([]); | ||
| const [loading, setLoading] = useState(true); | ||
| const [error, setError] = useState(null); | ||
| const [likedpost, setLikedPosts] = useState(function () { |
There was a problem hiding this comment.
Nice work with using localStorage for the liked thoughts!
One thing threw me off a bit and that is how the variable likedpost is named here. When I read it without looking at the rest I thought it was a singular value. But then when I saw the implementation it was an array. likedPosts would have been the correct name.
(Same for the localStorage item name)
A tiny thing, but these things in bigger projects where you kind of gaze over the entirety tend to cause more thinking than it has too :)
| } else { | ||
| setShowError(false); | ||
| const res = await fetch( | ||
| "https://happy-thoughts-api-4ful.onrender.com/thoughts", |
There was a problem hiding this comment.
Saving the API url in one place, as a constant (in another file and export it from there) in one place makes it easier when you have to change it. Then you only have to change it in one place :)
| onChange={handleChange} | ||
| ></StyledInput> | ||
| <p> | ||
| 140 / |
There was a problem hiding this comment.
Saving numbers like 140 (that is used 3 times here and then in the components RichedLimit and TooLong), in a variable makes it easier to do updates when it has to be changed.
| export function RichedLimit({ charCount }) { | ||
| return ( | ||
| <RichedLimitStyled> | ||
| You have riched the limit (- {charCount - 140}) |
There was a problem hiding this comment.
140 should have been a prop, so that this component can be more flexible :)
| return ( | ||
| <TooLongStyled> | ||
| Sorr, but your message is <strong>too Long</strong>, plece delete - | ||
| {charCount - 140} |
|
Really good work Kausar! There were some things about repetition and stuff that should have been props, but other than that I think you did a good job! |
2 participants
Hi there! 👋
I built Happy Thoughts as part of my Technigo JavaScript Bootcamp 2025 journey. This interactive app lets users read, post, and like positive thoughts in a friendly, dynamic, and responsive interface.
Key Features:
This project helped me practice React, API data fetching, state management, responsive design, and creating interactive UI components. Hope you enjoy exploring it! 🌟