Skip to content

shyamtala003/blogging-site

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

64 Commits
 
 
 
 
 
 

Repository files navigation

Hey there 👋
I'm Shyam, a creative coder and self-proclaimed full-stack developer. I make it my mission to translate user-focused designs into pixel-perfect websites as well as developed robust backend for it.

Full-Stack MERN Developer - Blogging Site

I Deployed my Project frontend(client) part on Vercel. so you can check it out 👇
https://dotblogs.vercel.app/

I Deployed my Project backend(api) part on Render.com. so you can check it out 👇
https://dotblogs.onrender.com/api/v1


Project Description

Developed a fully functional and responsive blogging website using MERN stack, hosted on Render.com for back-end and Vercel for front-end. Implemented features allowing users to write, edit,delete, and share their blog posts, as well as add high-quality images to their content using Cloudinary and Multer for image uploading at the back-end. User input was gathered using React Quill, a rich text editor, to allow bloggers to create content in a more user-friendly format. Password encryption using bcryptjs and user authentication through JSON Web Tokens (JWT) was also implemented for secure user access. Built using React.js and pure CSS for a modern and sleek design.


Key skills and technologies used:

  • MERN stack (MongoDB, Express, React.js, Node.js) Render.com and Vercel for hosting
  • Cloudinary and Multer for image uploading at the backend
  • React Quill for user input
  • bcrypt.js for password encryption
  • JSON Web Tokens (JWT) for user authentication
  • React.js and pure CSS for front-end development
  • Responsive design and user-friendly interface implementation

To get started with this project, you need to first clone the repository to your local machine:
  git clone https://github.com/shyamtala003/blogging-site

frontend set-up


Then, navigate to the project directory and then goto client folder and install the required dependencies:

cd blogging-site/client
npm install

then set the following environment variables in .env (📌 paste backend api url)

VITE_API_URL=http://localhost:4000/api/v1

Then, run command

npm run dev

backend set-up


Then, navigate to the project directory and then goto api folder and install the required dependencies:
cd ..
cd blogging-site/api
npm install

then set the following environment variables in .env (📌 for backend)

PORT=4000
MONGO_URL=your mongdb url

JWT_SECRET=your secret
JWT_EXPIRY=2d
COOKIE_EXPIRY=2

CORS_ORIGIN=http://localhost:5173

CLOUD_NAME=get from cloudinary 
API_KEY=get from cloudinary 
API_SECRET=get from cloudinary 

Then, run command

npm run dev

mind mapping


This Project took around 35:00 Hours ⏲️ to complate.

Author

About

Blogging site using mern stack

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published