BlogSphere

A modern blog application built using the MERN stack (MongoDB, Express, React, Node.js) with Vite as the build tool. This project includes user authentication, CRUD operations for posts, and a clean, responsive UI.

Table of Contents

• Project Overview
• Technologies
• Features
• Installation
• Usage
• Development
• Building
• Linting
• Preview
• License

Project Overview

BlogSphere is a full-stack blog application that allows users to register, login, and create, edit, and view blog posts. The application has a clean design and includes functionality for searching and filtering posts by tags. It is built with modern web technologies and follows best practices for development and security.

Screenshots

Screenshots

Technologies

• React: A JavaScript library for building user interfaces.
• Vite: A fast build tool and development server.
• Tailwind CSS: A utility-first CSS framework for styling.
• MongoDB: A NoSQL database for storing user and post data.
• Express: A Node.js framework for building the backend server.
• Node.js: A JavaScript runtime for server-side scripting.
• date-fns: A library for working with dates.
• react-quill: A rich text editor for creating and editing blog content.
• react-router-dom: A library for handling routing in React applications.
• dotenv: A library for managing environment variables.
• FontAwesome: For icons.
• Heroicons: For SVG icons.

Features

• User Authentication: Register and log in to manage your blog posts.
• CRUD Operations: Create, read, update, and delete blog posts.
• Search Functionality: Search posts by title or summary.
• Tag Filtering: Filter posts by tags.
• Responsive Design: Works well on both mobile and desktop devices.
• Rich Text Editor: Use React-Quill to format blog content.

Installation

1. Clone the repository:

   git clone https://github.com/yourusername/vite-project.git
   
   
   

Install the dependencies:

2. npm install

Create a .env file in the root directory and add your environment variables, such as database connection strings. Usage

Development

To start the development server:

3. npm run dev

This will start Vite’s development server and open the application in your default web browser.

Building

To build the project for production:

4. npm run build

This command generates optimized files for production and places them in the dist directory.

Linting

To lint your code:

5. npm run lint

This command runs ESLint to check for code quality issues.

Preview

To preview the production build:

6. npm run preview

This will start a preview server to view the production build.

License