Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/princeinscripts/blog-app
A Full-Featured Blogging Web Application built with the MERN stack, enabling users to create, read, update, and delete blog posts, along with user authentication, image uploading, liking, commenting, and responsive design.
https://github.com/princeinscripts/blog-app
axios bcrypt ckeditor cloudinary daisyui express jsonwebtoken mongodb mongoose morgan multer nodemailer react react-dom react-hot-toast react-icons react-redux redux-persist slugify
Last synced: about 2 months ago
JSON representation
A Full-Featured Blogging Web Application built with the MERN stack, enabling users to create, read, update, and delete blog posts, along with user authentication, image uploading, liking, commenting, and responsive design.
- Host: GitHub
- URL: https://github.com/princeinscripts/blog-app
- Owner: PrinceInScripts
- Created: 2024-01-07T03:42:22.000Z (12 months ago)
- Default Branch: main
- Last Pushed: 2024-06-01T15:02:01.000Z (7 months ago)
- Last Synced: 2024-06-02T12:03:27.841Z (7 months ago)
- Topics: axios, bcrypt, ckeditor, cloudinary, daisyui, express, jsonwebtoken, mongodb, mongoose, morgan, multer, nodemailer, react, react-dom, react-hot-toast, react-icons, react-redux, redux-persist, slugify
- Language: JavaScript
- Homepage: https://write-wave.vercel.app/
- Size: 2.64 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
A Blogging WriteWave Web App
* [Configuration and Setup](#configuration-and-setup)
* [Key Features](#key-features)
* [Technologies used](#technologies-used)
- [Frontend](#frontend)
- [Backend](#backend)
- [Database](#database)
* [📸 Screenshots](#screenshots)
## Configuration and Setup
In order to run this project locally, simply fork and clone the repository or download as zip and unzip on your machine.
- Open the project in your prefered code editor.
- Go to terminal -> New terminal (If you are using VS code)
- Split your terminal into two (run the Frontend on one terminal and the Backend on the other terminal)
In the first terminal
```
$ cd Frontend
$ npm install (to install frontend-side dependencies)
$ npm run start (to start the frontend)
```
In the second terminal
- cd Backend and Set environment variables in config.env under ./config
- Create your mongoDB connection url, which you'll use as your MONGO_URI
- Supply the following credentials
```
# --- Config.env ---
NODE_ENV = production
PORT =5000
URI =http://localhost:3000
MONGO_URI =
ACCESS_TOKEN_SECRET=
ACCESS_TOKEN_EXPIRY=1d
REFRESH_TOKEN_SECRET=
REFRESH_TOKEN_EXPIRY=10d
RESET_PASSWORD_EXPIRE =
SMTP_HOST = "smtp.gmail.com"
SMTP_PORT =
SMTP_USERNAME =
SMTP_PASSWORD =
SMTP_FROM_EMAIL =
CONTACT_US_EMAIL =
FRONTEND_URL=http://localhost:5173
```
```
# --- Terminal ---
$ npm install (to install backend-side dependencies)
$ npm start (to start the backend)
```
## Key Features
- User registration and login
- Authentication using JWT Tokens
- CRUD operations (Blog create, read, update and delete)
- Upload user ımages and blog ımages to the server
- Liking blog and Comment on blog
- Toast loading effect
- Responsive Design
## Technologies used
This project was created using the following technologies.
#### Frontend
- [React js ](https://www.npmjs.com/package/react) - JavaScript library that is used for building user interfaces specifically for single-page applications
- [React Hooks ](https://reactjs.org/docs/hooks-intro.html) - For managing and centralizing application state
- [react-router-dom](https://www.npmjs.com/package/react-router-dom) - To handle routing
- [axios](https://www.npmjs.com/package/axios) - For making Api calls
- [Tailwind CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) - For User Interface
- [CK-Editor](https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/frameworks/react.html) - Rich Text Editor
- [React icons](https://react-icons.github.io/react-icons/) -
Small library that helps you add icons to your react apps.
#### Backend
- [Node js](https://nodejs.org/en/) -A runtime environment to help build fast server applications using JS
- [Express js](https://www.npmjs.com/package/express) -The server for handling and routing HTTP requests
- [Mongoose](https://mongoosejs.com/) - For modeling and mapping MongoDB data to JavaScript
- [express-async-handler](https://www.npmjs.com/package/express-async-handler) - Simple middleware for handling exceptions inside of async express routes and passing them to your express error handlers
- [jsonwebtoken](https://www.npmjs.com/package/jsonwebtoken) - For authentication
- [Bcryptjs](https://www.npmjs.com/package/bcryptjs) - For data encryption
- [Nodemailer](https://nodemailer.com/about/) - Send e-mails from Node.js
- [Dotenv](https://www.npmjs.com/package/dotenv) - Zero Dependency module that loads environment variables
- [multer](https://www.npmjs.com/package/multer) - Node.js middleware for uploading files
- [slugify](https://www.npmjs.com/package/slugify) - For encoding titles into a URL-friendly format
- [cors](https://www.npmjs.com/package/cors) - Provides a Connect/Express middleware
#### Database
- [MongoDB ](https://www.mongodb.com/) - It provides a free cloud service to store MongoDB collections.
## Screenshots
