This project covers topics like: CSS Mobile friendly, React Main Concepts and something on React project folder structure. Its free hosted at http://springfieldchat.rf.gd/ if you want to check it working.
To start, type some text in some avatar textarea and send the message. Those areas may appear at the bottom of your screen if you access it from a mobile device (on screen smallers than 820 px). The message will appears at the posts area.
You can "like" some post by clicking on like button to see the post like count increase. Send another message from the same avatar and like it too. Independent posts has individual counts, but the avatar gets the total amount of "likes" from all of his posts. You can reset the data pressing "clear all" button.
In the project directory, you can run:
Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.
The page will reload if you make edits.
You will also see any lint errors in the console.
Launches the test runner in the interactive watch mode.
See the section about running tests for more information.
I'd like to thanks the people behind these links:
React main concepts: https://reactjs.org/docs/hello-world.html
CSS grid guide: https://css-tricks.com/snippets/css/complete-guide-grid/
React project folder structure (fits for me): https://hackernoon.com/structuring-projects-and-naming-components-in-react-1261b6e18d76