Skip to content

Charul192/blog-application

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 

History

20 Commits
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

πŸ“ Blog Application

A full-stack blog application built with Node.js, Express, and MongoDB that allows users to create, read, and manage blog posts with user authentication and file uploads.

πŸ› οΈ Tech Stack

  • Backend: Node.js, Express.js
  • Database: MongoDB with Mongoose ODM
  • Template Engine: EJS (Embedded JavaScript)
  • Authentication: JWT (JSON Web Tokens)
  • File Upload: Multer
  • Frontend: Bootstrap 5, HTML5, CSS3
  • Development: Nodemon for auto-restart

✨ Features

  • πŸ” User Authentication: Sign up, sign in, and secure session management
  • πŸ“– Blog Management: Create, view, and manage blog posts
  • πŸ–ΌοΈ Image Upload: Upload cover images for blog posts
  • πŸ’¬ Comments System: Users can comment on blog posts
  • πŸ“± Responsive Design: Bootstrap-powered responsive UI
  • πŸ”’ Protected Routes: Authentication middleware for secure access
  • πŸͺ Cookie-based Sessions: Secure user session management

Project Structure

BLOG-APPLICATION/
β”‚
β”œβ”€β”€ middlewares/                 # Custom middleware functions
β”‚   └── auth.js                  # Middleware to handle authentication checks
β”‚
β”œβ”€β”€ models/                      # Mongoose schemas for database collections
β”‚   β”œβ”€β”€ blog.js                  # Blog post schema
β”‚   β”œβ”€β”€ comment.js               # Comment schema
β”‚   └── user.js                  # User schema
β”‚
β”œβ”€β”€ node_modules/                # Installed npm packages
β”‚
β”œβ”€β”€ public/                      # Publicly accessible assets
β”‚   └── images/
β”‚       └── uploads/             # Uploaded images (like blog cover images)
β”‚
β”œβ”€β”€ routes/                      # Express route definitions
β”‚   β”œβ”€β”€ blog.js                  # Routes related to blogs
β”‚   └── user.js                  # Routes for user signup, login, etc.
β”‚
β”œβ”€β”€ services/                    # Helper/service functions
β”‚   └── auth.js                  # Auth service for login/signup logic
β”‚
β”œβ”€β”€ views/                       # EJS templates for rendering UI
β”‚   β”œβ”€β”€ partials/                # Reusable UI components (header, nav, etc.)
β”‚   β”‚   β”œβ”€β”€ head.ejs
β”‚   β”‚   β”œβ”€β”€ nav.ejs
β”‚   β”‚   └── script.ejs
β”‚   β”œβ”€β”€ addBlog.ejs              # Form to add a new blog post
β”‚   β”œβ”€β”€ blog.ejs                 # Single blog post page
β”‚   β”œβ”€β”€ home.ejs                 # Homepage displaying all blogs
β”‚   β”œβ”€β”€ signin.ejs               # User sign-in page
β”‚   └── signup.ejs               # User registration page
β”‚
β”œβ”€β”€ index.js                     # Entry point of the application
β”œβ”€β”€ notes.txt                    # Developer notes or to-do list
β”œβ”€β”€ package.json                 # Project metadata and dependencies
└── package-lock.json            # Exact version lock for dependencies

βš™οΈ Installation and Setup

Prerequisites

Make sure you have the following installed:

Step-by-step Installation

  1. Clone the repository

    git clone https://github.com/melroy12/blog-application.git
    cd blog-application
  2. Install dependencies

    npm install
  3. Start MongoDB

    Make sure MongoDB is running on your system:

    # On Windows (if MongoDB is installed as a service)
    net start MongoDB
    
    # Or start manually
    mongod
  4. Start the application

    For development with auto-restart:

    npm run dev

    For production:

    npm start
  5. Access the application

    Open your browser and navigate to: http://localhost:8000

πŸš€ Usage Guide

Getting Started

  1. Homepage: Visit the homepage to see all published blog posts
  2. Sign Up: Create a new account using the sign-up form
  3. Sign In: Log in with your credentials
  4. Create Blog: Once logged in, create new blog posts with images
  5. View Blogs: Click on any blog card to read the full post
  6. Comments: Add comments to blog posts (requires authentication)

Key Routes

  • / - Homepage with all blogs
  • /user/signup - User registration
  • /user/signin - User login
  • /blog/add-new - Create new blog post
  • /blog/:id - View individual blog post

File Upload

The application supports image uploads for blog cover images:

  • Supported formats: Common image formats (PNG, JPG, JPEG, etc.)
  • Files are stored in public/uploads/ directory
  • Automatic filename generation with timestamps

πŸ”§ Configuration

Database Configuration

The application connects to MongoDB using the following default configuration:

mongodb://127.0.0.1:27017/blogify

To change the database connection, modify the connection string in index.js:

mongoose.connect('your-mongodb-connection-string')

Environment Variables

For production deployment, consider using environment variables:

const PORT = process.env.PORT || 8000;
const MONGODB_URI = process.env.MONGODB_URI || 'mongodb://127.0.0.1:27017/blogify';

πŸ“¦ Dependencies

Production Dependencies

  • express - Web framework
  • mongoose - MongoDB object modeling
  • ejs - Template engine
  • jsonwebtoken - JWT authentication
  • multer - File upload handling
  • cookie-parser - Cookie parsing middleware
  • bootstrap - CSS framework
  • crypto - Cryptographic functionality

Development Dependencies

  • nodemon - Development server with auto-restart

🀝 Contributing

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

πŸ“ API Endpoints

User Routes

  • GET /user/signin - Sign in page
  • GET /user/signup - Sign up page
  • POST /user/signin - Process sign in
  • POST /user/signup - Process sign up
  • GET /user/logout - User logout

Blog Routes

  • GET /blog/add-new - Add new blog page
  • POST /blog/ - Create new blog post
  • GET /blog/:id - View specific blog
  • POST /blog/comment/:blogId - Add comment to blog

πŸ” Security Features

  • JWT-based authentication
  • Password hashing
  • Protected routes with middleware
  • Cookie-based session management
  • Input validation and sanitization

πŸ™ Acknowledgments

  • Express.js community for the excellent framework
  • MongoDB team for the robust database solution
  • Bootstrap team for the responsive CSS framework
  • All contributors who help improve this project

πŸ‘©β€πŸ’» Author

  • Made with ❀️ by Charul192
  • Feel free to fork, clone, or contribute!

⭐ Support the Project

  • If you found this project useful or interesting, please give it a star on GitHub β€” it helps others discover it too!

πŸ” Back to top

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Contributors 4

  •  
  •  
  •  
  •