Blog Application with MongoDB & RESTful API

A modern full-stack blog application built with Node.js, Express, MongoDB, and EJS templating engine. This application uses Fetch API for all CRUD operations, enabling proper RESTful methods (GET, POST, PUT, DELETE) without page reloads. Features a clean, responsive interface with real-time feedback.

📋 Table of Contents

• Features
• Technologies Used
• Prerequisites
• Installation
• Configuration
• Usage
• Project Structure
• API Routes
• Database Schema
• Contributing
• License

✨ Features

• Create Blog Posts: Write and publish blog posts with title and body content via Fetch API
• Update Blog Posts: Edit existing posts with pre-populated form using RESTful PUT method ✨ NEW!
• Delete Blog Posts: Remove posts with confirmation using RESTful DELETE method
• View All Posts: Browse all published blog posts on the homepage
• Individual Post View: Read full blog posts on dedicated pages
• RESTful API: Proper HTTP methods (GET, POST, PUT, DELETE) via Fetch API
• No Page Reloads: Smooth user experience with AJAX operations
• Real-time Feedback: Loading states and success/error messages
• About Page: Learn more about the blog
• Contact Page: Get in touch with the blog author
• Responsive Design: Mobile-friendly interface
• MongoDB Integration: Persistent storage for all blog posts
• EJS Templating: Dynamic content rendering with reusable components

🛠️ Technologies Used

• Backend:

  • Node.js
  • Express.js ^4.21.1
  • Mongoose ^8.8.1 (MongoDB ODM)

• Frontend:

  • EJS ^3.1.10 (Embedded JavaScript templating)
  • HTML5
  • CSS3
  • Vanilla JavaScript (ES6+)
  • Fetch API (RESTful AJAX operations)

• Database:

  • MongoDB

• Dev Dependencies:

  • Nodemon ^3.1.7 (Auto-restart development server)

📦 Prerequisites

Before you begin, ensure you have the following installed on your system:

• Node.js (v12.x or higher recommended)
• MongoDB (v4.x or higher)
• npm (comes with Node.js)

🚀 Installation

1. Clone the repository (or download the project files):

   git clone <repository-url>
   cd monBlogwithDB

2. Install dependencies:

   npm install

3. Configure environment variables:

   • Copy the example environment file:

     cp .env.example .env

   • Edit .env and update the values as needed:

     NODE_ENV=development
     PORT=4000
     MONGODB_URI=mongodb://localhost/my_blog
     DB_NAME=my_blog
     APP_NAME=My Blog
     

4. Ensure MongoDB is running:

   • Start MongoDB service on your local machine:

     # Windows
     net start MongoDB
     
     # macOS/Linux
     sudo systemctl start mongod

5. Start the application:

   • For development mode (with auto-restart on file changes):

     npm run dev

   • For production mode:

     npm start

6. Access the application:

   • Open your browser and navigate to: http://localhost:4000

⚙️ Configuration

Environment Variables

The application uses environment variables for configuration. Create a .env file in the root directory:

# Environment
NODE_ENV=development

# Server Configuration
PORT=4000

# Database Configuration
MONGODB_URI=mongodb://localhost/my_blog
DB_NAME=my_blog

# Application Configuration
APP_NAME=My Blog

Important: Never commit your .env file to version control. Use .env.example as a template.

MongoDB Connection

The application connects to MongoDB using environment variables configured in your .env file:

// Configuration is centralized in src/config/config.js
const config = {
  db: {
    uri: process.env.MONGODB_URI || "mongodb://localhost/my_blog",
    name: process.env.DB_NAME || "my_blog",
  },
};

To use a different database:

• Update MONGODB_URI and DB_NAME in your .env file

Port Configuration

The default port is 4000. To change it:

• Update the PORT variable in your .env file

📖 Usage

Creating a New Blog Post

1. Navigate to the "Create Post" page (/create)
2. Fill in the following fields:
   • Title: The title of your blog post
   • Body: The main content of your post
3. Click "Create Post" button
4. The form is submitted via Fetch API (no page reload)
5. You'll see a loading spinner and success message
6. Automatically redirected to the homepage where your new post appears

Technical Details:

• Form submission intercepted by JavaScript
• Data sent as JSON to POST /api/posts
• Server returns JSON response with status
• Client-side JavaScript handles success/error feedback

Deleting a Blog Post

1. Navigate to any blog post (/post/:id)
2. Click the "🗑️ Delete Post" button
3. Confirm deletion in the popup dialog
4. Post is deleted via Fetch API DELETE method
5. Success message appears and you're redirected to homepage

Technical Details:

• Button click triggers JavaScript event handler
• Fetch API sends DELETE /api/posts/:id request
• Server deletes post and returns JSON confirmation
• No page reload - smooth user experience

Editing a Blog Post ✨ NEW!

1. Navigate to any blog post (/post/:id)
2. Click the "✏️ Edit Post" button
3. Pre-populated form displays with current title and body
4. Modify the content as needed
5. Click "Update Post" button
6. Post is updated via Fetch API PUT method
7. Success message appears and you're redirected to the updated post

Technical Details:

• Click handler redirects to /edit/:id page route
• Form displays current post data pre-filled
• Form submission sends PUT /api/posts/:id request with updated data
• Server updates post and returns JSON confirmation
• JavaScript redirects to post view page on success
• Shows loading spinner and error messages

Viewing Blog Posts

• Homepage (/): Displays all blog posts
• Individual Post (/post/:id): Click on any post to view its full content

Navigation

• Home: View all blog posts
• About: Learn about the blog
• Contact: Contact information
• Create Post: Write a new blog post

📁 Project Structure

monBlogwithDB/
├── index.js                 # Main application file (server setup)
├── package.json             # Project dependencies and scripts
├── .env                     # Environment variables (not in git)
├── .env.example             # Environment variables template
├── .gitignore              # Git ignore rules
├── src/
│   ├── config/
│   │   └── config.js       # Centralized configuration
│   ├── controllers/
│   │   ├── blogController.js    # Blog post logic
│   │   └── pageController.js    # Static page logic
│   ├── routes/
│   │   └── routes.js       # Route definitions
│   ├── models/
│   │   └── BlogPost.js     # Mongoose schema for blog posts
│   ├── views/
│   │   ├── index.ejs           # Homepage template
│   │   ├── post.ejs            # Individual post view template
│   │   ├── create.ejs          # Create post form template
│   │   ├── edit.ejs            # Edit post form template (NEW!)
│   │   ├── about.ejs           # About page template
│   │   ├── contact.ejs         # Contact page template
│   │   └── layouts/
│   │       ├── header.ejs      # Reusable header component
│   │       ├── footer.ejs      # Reusable footer component
│   │       ├── navbar.ejs      # Navigation bar component
│   │       └── scripts.ejs     # JavaScript includes
│   └── db.mjs              # Database connection utilities
└── public/
    ├── css/
    │   └── styles.css      # Application styles
    ├── js/
    │   ├── scripts.js      # Bootstrap theme script
    │   └── app.js          # App-specific Fetch API handlers (NEW!)
    └── assets/
        └── img/            # Images and media files

🛣️ Routes Architecture

📄 Page Routes (Render HTML)

These routes serve HTML pages for users to view in their browser:

Method	Route	Description	Returns
GET	/	Display all blog posts (homepage)	HTML
GET	/about	Display about page	HTML
GET	/contact	Display contact page	HTML
GET	/create	Display create post form	HTML
GET	/edit/:id	Display edit post form with pre-filled data	HTML
GET	/post/:id	Display individual blog post by ID	HTML

🔌 API Routes (Return JSON)

These routes handle data operations via Fetch API and return JSON responses:

Method	Route	Description	Returns	Called By
POST	/api/posts	Create and save a new post	JSON	Fetch API
PUT	/api/posts/:id	Update an existing post	JSON	Fetch API
DELETE	/api/posts/:id	Delete a post by ID	JSON	Fetch API

🎯 Why Two Types of Routes?

Important Concept: This application separates page rendering from data operations.

Page Routes (without /api/)

• Purpose: Render HTML pages that users see
• Example: When you visit /create, you see a form with input fields
• Returns: Full HTML page with header, navbar, footer, etc.
• Usage: Direct browser navigation

API Routes (with /api/)

• Purpose: Handle data operations (Create, Update, Delete)
• Example: When you submit the form, JavaScript sends data to /api/posts
• Returns: JSON response with success/error status
• Usage: Called by JavaScript Fetch API (AJAX)

Why This Structure?

1. RESTful Design: /api/* clearly indicates JSON endpoints
2. Separation of Concerns: HTML rendering vs data operations
3. Modern Standard: Industry best practice for web applications
4. Better UX: No page reloads, instant feedback
5. Flexibility: Easy to build mobile apps or other clients using the same API

Example Flow:

User clicks "Create Post" button
    ↓
Browser navigates to GET /create (page route)
    ↓
Server renders create.ejs with form
    ↓
User fills form and clicks "Submit"
    ↓
JavaScript intercepts form submission
    ↓
Fetch API sends POST to /api/posts (API route)
    ↓
Server processes data, returns JSON
    ↓
JavaScript receives response, shows message
    ↓
Redirect to homepage on success

🗄️ Database Schema

BlogPost Model

{
  title: String,           // Title of the blog post
  body: String,            // Content of the blog post
  username: {
    type: String,
    default: 'SuperDupont' // Default author name
  },
  datePosted: {
    type: Date,
    default: Date.now()    // Automatically set to current date
  }
}

🔧 Development

Running in Development Mode

The project uses nodemon for automatic server restarts during development:

npm run dev

This command runs nodemon index.js, which will automatically restart the server when you make changes to your files.

Running in Production Mode

For production deployment, use:

npm start

This runs node index.js without automatic restarts.

Available Scripts

• npm start - Start the application in production mode
• npm run dev - Start the application in development mode with auto-restart
• npm test - Run tests (not yet implemented)

🐛 Troubleshooting

MongoDB Connection Issues

If you encounter MongoDB connection errors:

1. Ensure MongoDB is running: mongod --version
2. Check if the MongoDB service is active
3. Verify the connection string in index.js

Port Already in Use

If port 4000 is already in use:

1. Stop the process using port 4000, or
2. Change the port number in index.js

Dependencies Issues

If you encounter package-related errors:

rm -rf node_modules package-lock.json
npm install

🤝 Contributing

Contributions are welcome! Here's how you can help:

1. Fork the project
2. Create your feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

📝 License

This project is licensed under the ISC License.

👤 Author

Created by SuperDupont

---

� Technical Highlights

Fetch API Implementation

This application uses the modern Fetch API instead of traditional HTML form submissions, enabling:

1. Proper HTTP Methods:

   • ✅ DELETE (not possible with HTML forms)
   • ✅ PUT (not possible with HTML forms)
   • ✅ POST with JSON payloads
   • ✅ Custom headers

2. Better User Experience:

   • No page reloads
   • Loading indicators during operations
   • Real-time success/error messages
   • Smooth transitions

3. Code Example - Delete Post:

// Client-side (app.js)
const response = await fetch(`/api/posts/${postId}`, {
  method: "DELETE",
  headers: { "Content-Type": "application/json" },
});
const data = await response.json();

// Server-side (blogController.js)
export const deletePost = async (req, res) => {
  const deletedPost = await BlogPost.findByIdAndDelete(req.params.id);
  res.status(200).json({
    success: true,
    message: "Blog post deleted successfully",
  });
};

4. Code Example - Update Post (NEW!):

// Client-side (app.js) - Form submission via Fetch
const response = await fetch(`/api/posts/${postId}`, {
  method: "PUT",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify({ title, body }),
});
const data = await response.json();

// Server-side (blogController.js)
export const updatePost = async (req, res) => {
  const updatedPost = await BlogPost.findByIdAndUpdate(
    req.params.id,
    req.body,
    { new: true, runValidators: true }
  );
  res.status(200).json({
    success: true,
    message: "Blog post updated successfully",
    post: updatedPost,
  });
};

5. Code Example - Create Post:

// Client-side (scripts.js)
const response = await fetch("/api/posts", {
  method: "POST",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify({ title, body, username }),
});
const data = await response.json();

// Server-side (blogController.js)
export const createPost = async (req, res) => {
  const newPost = await BlogPost.create(req.body);
  res.status(201).json({
    success: true,
    post: newPost,
  });
};

Why Not Use HTML Forms?

HTML Form Limitations:

• ❌ Only supports GET and POST methods
• ❌ Requires full page reload
• ❌ No loading states or progress indicators
• ❌ Cannot send JSON payloads
• ❌ Limited error handling

Fetch API Advantages:

• ✅ Supports all HTTP methods (GET, POST, PUT, DELETE, PATCH)
• ✅ No page reloads (better UX)
• ✅ Full control over requests and responses
• ✅ Native JSON support
• ✅ Promise-based (async/await)
• ✅ Better error handling

🚀 Future Enhancements

Potential features to add:

• ✅ Delete blog posts (Already implemented!)
• ✅ Update/Edit blog posts (Already implemented!)
• User authentication and authorization
• Image upload for blog posts
• Comments section
• Post categories and tags
• Search functionality
• Rich text editor
• Pagination for blog posts
• Admin dashboard
• Like/favorite posts
• Share to social media

---

Happy Blogging! 🎉