Micro Blog Front End with React

January 22, 2018

Made with: ReactJS

Project Summary:

Micro-blog simulator made with ReactJS. Makes use of components and state. Includes a log-in form, an entry form for blog posts, and a list of posts in reverse chronological order.

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:

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

There are three state properties:

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


tech


eStore and Shopping Cart App Main Car Information Gallery with ReactJS


USA 2018Site made with Metalsmith and deployed in a Digital Ocean VPS