Jan 23, 2018

Micro Blog Front End with React

Twitter-inspired micro blog simulator made with ReactJS

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 use the create-react-app application for all the scaffolding and heavy lifting so that we can focus on the code.

Our app has six components:

  • Our main App.js
  • A Greeting.js component, that displays a Login.js component if the user is not logged in, or the Profile.js component if our user is logged in.
  • An AddPost.js component to manage the post input field, and
  • A Post.js component 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 instruct the Greeting.js component what to display via a 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.

Finally, there is a second log in button called “Auto Login”. Once pressed, the app gets the profile info of a default user that is hard coded in a users.js file so that you won’t have to type anything. This is useful when you plan to come back to the app often and want to load your info quickly (sort of an express log in).

Content licensed under CC0-1.0 | Code licensed under GNU GPLv3