ByteBliss

Unleash Your Voice, Share Your Story: Where Words Find Home - Welcome to Our Blogging Haven!


See Live Here · · View Demo

---

ScreenShots 📸

---

About The Project

bytebliss.mp4

Welcome to my MERN stack blog app! This application leverages MongoDB for data storage, Express.js for seamless server-side operations, React.js for a dynamic user interface, and Node.js for managing the backend. With this full-stack setup, users can effortlessly create, read, update, and delete blog posts.

It's designed to be user-friendly, making sharing and managing your content a breeze. Explore and enjoy the world of easy and efficient blogging with my MERN stack application.

---

Functionality

🔐 Authentication (Login and Signup):
Enables users to securely sign up for new accounts and log in to access the platform using their unique credentials.

🏠 Home Page:
Serves as the primary landing space where users can explore featured or recent blog posts and navigate through the application's content.

📝 CRUD Operations:
Allows users to Create, Read, Update, and Delete blog posts, offering complete control over managing their content.

✍️ Blog Editor:
Provides an intuitive interface for users to craft and edit blog posts, including text formatting, media embedding, and content organization.

👤 Profile Management:
Empowers users to manage their profiles, update information, and personalize their account settings.

👍🗨️ Like and Comment on Articles:
Facilitates engagement by enabling users to like posts and leave comments, fostering a sense of community interaction.

📚 Save Article for Later:
Allows users to bookmark or save articles, creating a reading list for easy access to preferred content.

📄 Pagination:
Enhances user experience by dividing content into pages, ensuring a more organized and manageable layout.

⏱️ Debouncing:
Optimizes the user interface by controlling repetitive actions, enhancing performance and responsiveness.

📱 Mobile Responsiveness:
Ensures the application functions seamlessly across various mobile devices, providing a user-friendly experience on smartphones and tablets.

---

Built with

Frontend (JavaScript)

• React.js
• React Router DOM
• CKEditor 5 Classic Build
• React Icons

Backend (JavaScript)

• Node.js
• Express.js
• JWT (JSON Web Tokens)
• Bcrypt.js
• Nodemailer
• Slugify

Database

• MongoDB
• Mongoose

Middleware

• Multer

Testing (JavaScript)

• Jest
• React Testing Library
• User Event
• @testing-library/jest-dom
• @testing-library/react

Other Tools

• Axios (HTTP client for making requests)
• UUID (for generating unique identifiers)
• Dotenv (for environment variables)
• CORS (Cross-Origin Resource Sharing)
• Path (for handling file paths)
• Express Async Handler (for handling asynchronous functions in Express)
• Web Vitals (for measuring web performance)

Development and Deployment

• Nodemon (for automatic server restart)
• PM2 (Process Manager for Node.js applications)