Made with: ReactJS

Source Files Live Demo

This front end project is inspired in a minimal version of Twitter. We use React components and JavaScript ES6 classes, and put into practice the concept of state. It also uses JSX syntax.

We start by running Create React App, which provides the scaffolding for our site and performs all the lifting so that we can focus on the code.

Our app has six components:

• App.js: our main component
• Greeting.js
• Login.js (if the user is not logged in)
• Profile.js (if the user is logged in).
• AddPost.js to manage the post input field, and
• Post.js which lists the posts in reverse chronological order.

State is concentrated in the main App.js, and then passed down to the other components via props.

There are three state properties:

• posts: an object with a list of all posts
• user: the information of the user who is logged-in at any given moment
• isLoggedIn: a boolean indicating if somebody is logged in or not

The isLoggedIn boolean tells the Greeting.js component what to display via conditional rendering: if false, display a log-in form Login.js. If true, display the current user’s profile Profile.js.

Once logged in, users can write posts and they will immediately appear as the first post of the list.

Check the app in action here.