A public music-themed blog where users can write, view, filter, edit, and delete posts.
The backend was built with javascript, node.js, express, mongodb atlas,
bcryptjs to encrypt and decrypt the users' password, colors to make certain console logs pop out,
cors tells the browser that the app at its origin has access to resources at another origin,
dotenv to keep certain information secret, express-async-handler to handle async express route exceptions,
jsonwebtoken to give each user a unique token, multer to upload files, and prop-types to declare the type of props for eslint.
The developer version's backend, which can be cloned in the below section, also features prettier to make the code easier to read, eslint (Airbnb and Prettier configurations) to find problems in the code, nodemon to restart the app when a server change is made, and concurrently to run both the client and server simultaneously.
The frontend utilizes Material-UI with Emotion for styling, axios for HTTP requests, react-redux, redux-persist, and reduxjs/toolkit to manage the logged in user's state, and react-router-dom to handle the app's web routing.
- Open your terminal and type git clone https://github.com/christiandeandemesa/MERN-blog.git
- Cd into MERN-blog, then type git checkout 4609cd63cf3 to get commit before deployment.
- To download the backend dependencies, stay in the root folder (MERN-blog) and type npm install.
- To download the frontend dependencies, cd into the client folder and type npm install.
- Create an account or login to MongoDB Atlas.
- Click New Project, name your project, click Next, then Create Project.
- Click Build a Database, and choose the free option.
- Leave AWS as the Cloud Provider & Region, the region closest to where you are, and click Create Cluster.
- Type in a username and password, click Create User, leave it on My Local Environment, click Add My Current IP Address, then Finish and Close.
- Click Connect, Connect your application, then copy the connection string.
- Create a .env in your root folder and add the following:
PORT = 5000
MONGO_URI = MongoDB connection string (Note: Don't forget to replace <password> with your password)
JWT_SECRET = Any Text Here
- Open the terminal, and type npm run dev to run both the client and server.
- User can register and log in to their account.
- Logged in user can view, edit, and delete their profile (Note: deleting your profile will also delete your posts).
- Logged in user can write, edit, and delete their post(s).
- User can filter all the posts using the categories list.
- Responsive web design for all portrait and landscape devices.
- Browser support for Edge/Internet Explorer.
- Apply Google Fonts styling.
- Cross browser support for Chrome, Firefox, Opera, and Safari.
- User will have the ability to type a category or user in a search field to filter all the posts.
- User will have a select box to filter all the posts by oldest or newest date.
- User will be able to like or unlike posts.
- Logged in user will be able to view the like count of any of their posts.
- Logged in user will be able to leave comments on posts.
- Logged in user will be able to view the comments of any of their posts.
- Attempting to upload your own image for your profile or post will cause an interal server error on the deployed website because of an unknown issue in userRoute.js and postRoute.js
multer-bug.mp4
- Christian Demesa: https://github.com/christiandeandemesa