Blog | Listing Web App (Full Stack)

This is a MERN Stack project consisting of 6 pages with routes. The project can be used for listing, blog, social media, content creation and etc...

- create .env file and store the MongoDB URL inside.
- useContext is used to manage the states 
- The UI is not fully responsive
-The images in the source code cannot use for any purpose
- Site is fully optimized.

How to start the project?
Click here to check out the demonstration video.

Project Notes (dev notes📐)

CSS

Making the FistLetter of a Word .singlePostDesc::first-letter { margin-left: 20px; font-size: 30p font-weight: 600; }

React Router Kink of in html looks through its the children Routes and renders the first one that matches the current URL

Multer => a node.js middleware for handling multipart/form-data , which is primarily used for uploading files. It is written on top of busboy for maximum efficiency.

axios => middleware help to fetch data from the DB to the frontend.

useLocation => The useLocation hook returns the location object that represents the current URL. 

Page Redirect =>

window.location.replace("/login")

JS

post.username == user?.username && (

In this expression, ?  look for username is the user is true.

autofocus
The autofocus property sets or returns whether a text field should automatically get focus when the page loads, or not.

Express

Router A router object is an isolated instance of middleware and routes. You can think of it as a “mini-application,” capable only of performing middleware and routing functions. Every Express application has a built-in app router.

Mongoose

$set -> operator replaces (update) the value of a field with the specified value.

Multi

This library help to upload files.

ContextAPI()

The React Context API is a way for a React app to effectively produce global variables that can be passed around. This is the alternative to "prop drilling" or moving props from grandparent to child to parent, and so on. Context is also touted as an easier, lighter approach to state management using Redux.

React.createContext() is all you need. It returns a consumer and a provider. The provider is a component that as its names suggests provides the state to its children. It will hold the "store" and be the parent of all the components that might need that store. Consumer as it so happens is a component that consumes and uses the state. More information can be found on React's documentation page

Registration Phase

The FormData interface provides a way to easily construct a set of key/value pairs representing form fields and their values, which can then be easily sent using the XMLHttpRequest.send() method. It uses the same format a form would use if the encoding type were set to "multipart/form-data".

URL.createObjectURL()

The URL.createObjectURL() static method creates a DOMString containing a URL representing the object given in the parameter.