https://github.com/aurelioo29/blog-system
A simple Blog System repository built with Next.js and MongoDB. It allows users to easily create and manage blog posts, providing a fast and SEO-friendly experience.
https://github.com/aurelioo29/blog-system
axios mongodb nextjs react-toastify tailwindcss
Last synced: 4 months ago
JSON representation
A simple Blog System repository built with Next.js and MongoDB. It allows users to easily create and manage blog posts, providing a fast and SEO-friendly experience.
- Host: GitHub
- URL: https://github.com/aurelioo29/blog-system
- Owner: aurelioo29
- Created: 2024-10-15T06:59:06.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-03-21T12:54:38.000Z (over 1 year ago)
- Last Synced: 2025-10-11T21:19:22.495Z (9 months ago)
- Topics: axios, mongodb, nextjs, react-toastify, tailwindcss
- Language: JavaScript
- Homepage:
- Size: 18.9 MB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 📖 Blog System
A blogging platform built with modern technologies like **Next.js**, **MongoDB**, **Axios**, **TailwindCSS**, and **React Toastify**. Users can create blogs, view detailed blog posts, and experience real-time interactions with a smooth UI.
## ✨ Features
- 📝 **View Blogs**: Browse through the list of blogs.
- 🔍 **Blog Details**: Click on a blog to view its full details.
- 🔔 **Notifications**: User-friendly notifications powered by `React Toastify`.
## 🛠️ Tech Stack
### 🌐 Frontend
- ⚛️ **Next.js** : A React framework for building server-side rendered and static web applications.
- 📡 **Axios**: For making HTTP requests.
- 🎨 **TailwindCSS**: Utility-first CSS framework for styling.
- 🔔 **React Toastify**: Elegant notifications for React applications.
### 🗄️ Backend
- 🍃 **MongoDB**: NoSQL database for storing blog data.
- 📜 **Mongoose**: Object Data Modeling (ODM) library for MongoDB.
## ✅ Prerequisites
Make sure you have the following installed:
- 🖥️ Node.js (v18 or above)
- 🍃 MongoDB
## 🚀 Installation
1. **Clone the repository**:
```bash
git clone
cd blog-system-main
```
2. Install dependencies:
```bash
npm install
# or
yarn install
```
3. Configure MongoDB:
- Open the file lib/config/db.js.
- Replace the connection string with your MongoDB credentials:
```js
import mongoose from "mongoose";
export const connectDB = async () => {
await mongoose.connect("your-mongodb-connection-string-here");
console.log("Connected to MongoDB");
};
```
4. Start the development server:
```bash
npm run dev
# or
yarn dev
```
🌐 The app will be available at http://localhost:3000.
## 📜 Available Scripts
In the project directory, you can run:
- 🔧 npm run dev: Runs the app in development mode.
- 🏗️ npm run build: Builds the app for production.
- 🚀 npm run start: Starts the production server.
- 🧹 npm run lint: Runs linting checks.
## 📂 Folder Structure
```bash
blog-system-main
├── app # Pages and API routes
├── assets # Static assets like images
├── components # Reusable React components
├── lib # Utility functions and helpers
├── public # Publicly accessible files
├── styles # Global CSS or Tailwind configuration
├── tailwind.config.js # TailwindCSS configuration
└── package.json # Project metadata and scripts
```
## 📦 Dependencies
Here are the main dependencies used in this project:
- axios: ^1.7.7
- mongoose: ^8.7.1
- next: ^14.2.23
- react: ^18
- react-dom: ^18
- react-toastify: ^10.0.6
- tailwindcss: Installed via PostCSS
## 🤝 Contributions
Feel free to fork this project and submit a pull request. Contributions are always welcome! 😊