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.
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
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.
- 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
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
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