For my first real taste of using ReactJS I managed to create modern and featured Single Page Application. The Writing and Social App project was the focus of the React for the Rest of Us course. It is useful to compare the result of this application against the very similar one I built in the Full stack Javascript course.

Project Details

The entire focus of this project was the front-end user interface. So without going into too much detail, the React project relies on a Webserver project built with Node.js and uses MongoDB as its database. For live deployment, the MongoDB database is hosted on Atlas. It makes use  of Axios to perform the API calls for getting and setting data from the front-end. The front-end uses a fairly simple Bootstrap implementation and custom CSS for styling – although there is little focus on this. Once again this project makes use of Webpack for development and deployment.

React development included:

• Using Reducer, Context and Immer Reducer
• Suspense for Lazy loading components
• Modern React technique using Hooks
• Handling Asynchronous State events – state and dispatch
• Uses JsonWebToken for authentication

In developing the project locally you need the separate Web Server project (found here) – which required to be started using npm run start. For the front-end (React) project, it is started by running npm run dev – running on localhost:3000.

Application Features

The application contains many cool features and feels very fast to use. Here’s a list of features:

• Secure User Authentication – Registration and Login
• Create, Modify and Delete posts
• User gravatar profile picture
• localStorage for authentication tokens
• LIVE validation of Registration
• Search Posts ability
• Colored Flash messages for various events – Login, Create, Edit, Delete Posts
• Markdown support on Posts
• Follow Users (authors)
• Lists of posts (those you follow and you own)
• LIVE Chat feature with Logged in Users