idasylven / project-happy-thoughts

The assignment for week 11 the TECHNIGO Boot Camp was to build a “Happy Thoughts Twitter”, sending and receiving data from an API using React and useEffect.

Minimum requirements for this brief included: to make a form in which the user can post new happy thoughts, for the app to sort the most recent post to be displayed at the top of the page and oldest at the bottom, to show the text content of the 20 most recently posted messages and how many likes they have.

We also had to follow a set design and I´m happy to say I got really close to the provided sketch in terms of proportions and layout, researching similar Google fonts and without using a color picker tool. Header and background color was not part of the design, just something I added ontop. I´ve used Flexbox to display and align items in general, and to make the page responsive. I used Animista.net to generate the scale up animation for the message list on page re-load, and for when the user is posting a new message. Tab indexes and aria-labels are added for accessability purposes.

I really like building things in React. I still find the syntax hard, but feel like I´m getting used to some of the fundamental structures now. As usual there is a constant battle of how the code can be reduced with more neat solutions, further divided and separated into even smaller components etc. I am keeping it kind of lengthy for now, so I can track exactly what is happening throughout the code when I come back to it.

When I have more time I would like to add a proper counter to the input field (the minimum amount of characters is 5 by default), displaying how many characters out of 140 in total that remains when the user starts typing.

To view the project live, please follow this link: https://pensive-shirley-fd39b0.netlify.app/