Welcome to BlogWeb, an engaging full-stack blog application built with the MERN (MongoDB, Express.js, React, Node.js) stack! π Dive into a vibrant community where you can sign up, share your stories, manage posts, and connect with others through likes and comments. This is your space to create, engage, and inspire! β¨
- π Secure Authentication: Effortless sign-up and login with JWT (JSON Web Tokens) for robust security.
- βοΈ Craft Your Story: Create, edit, and delete blog posts with ease.
- π° Dynamic Home Feed: Explore a lively feed displaying all posts in chronological order.
- π Personal Dashboard: Track your posts, likes, and comments with insightful stats.
- β€οΈ Connect & Engage: Like and comment on posts to fuel conversations.
- πΌοΈ Vivid Visuals: Upload stunning cover images for your posts via Cloudinary.
- π€ Custom Profiles: Personalize your profile with a bio, location, and social media links.
- React βοΈ: Build dynamic and sleek user interfaces.
- React Router π§: Navigate smoothly with client-side routing.
- Axios π‘: Make seamless API calls with this promise-based HTTP client.
- React Toastify π: Display stylish notifications to keep users informed.
- CSS π¨: Create a modern, clean, and visually appealing experience.
- Node.js & Express π’: Power the server with a robust and scalable framework.
- MongoDB & Mongoose π: Manage data effortlessly with a NoSQL database and intuitive ORM.
- JSON Web Token (JWT) π: Secure API endpoints and manage user sessions.
- Bcrypt π‘οΈ: Protect passwords with hashing and salting.
- Cloudinary βοΈ: Store and manage post images in the cloud with ease.
- Node.js (v14.0.0 or higher) π’
- MongoDB Atlas or a local MongoDB instance ποΈ
- Navigate to the
serverdirectory:cd server - Install dependencies:
npm install
- Create a
.envfile in theserverdirectory and add:PORT=5000 MONGODB_URI=your_mongodb_connection_string JWT_SECRET=your_jwt_secret CLOUDINARY_CLOUD_NAME=your_cloudinary_cloud_name CLOUDINARY_API_KEY=your_cloudinary_api_key CLOUDINARY_API_SECRET=your_cloudinary_api_secret - Fire up the server in development mode:
npm run dev
-
Navigate to the
clientdirectory:cd client -
Install dependencies:
npm install
-
Create a
.envfile in theclientdirectory with:REACT_APP_BASE_URL=http://localhost:5000/api -
Launch the client app:
npm start
-
Visit
http://localhost:3000in your browser to explore BlogWeb! π
- π±οΈ Sign Up or Log In: Create an account or log in to start your journey.
- π Manage Posts: Write, edit, or delete your blog posts from your dashboard.
- ποΈ Explore the Feed: Check out the latest posts from the community.
- π¬ Interact: Like and comment to join the conversation.
- π Personalize: Update your profile with a bio, location, and social links.
Feel free to fork, tweak, or enhance BlogWeb to match your vision! Whether youβre adding new features, revamping the UI, or experimenting with the code, this project is your canvas. Share your creations with the community and letβs build something extraordinary together! π