Micro Blog Front End with React

Mario Sanchez Carrion

I am a math tutor currently helping middle and high school students master common math concepts, and getting them prepared for the SAT and ACT tests.

I am also a computer programming enthusiast, especially interested in data analytics using Python, SQL and R.

I previously worked in international marketing and product development for Stanley Black & Decker, for more than 25 years.

👋 Contact me at mario@mariosanchez.org.

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 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.