A sleek, responsive blog platform built with Node.js, Express.js, and EJS. Create, read, edit, and delete blog posts with a beautiful glass-morphism design that works seamlessly across all devices.
Note: This is a session-based application with no database integration. All posts are stored in memory and will be lost when the server restarts, making it perfect for learning and demonstration purposes.
- Create Posts: Write and publish new blog entries with author information
- Read Posts: Browse through all published blog posts
- Edit Posts: Modify existing blog content and titles
- Delete Posts: Remove unwanted posts with confirmation
- Modern UI: Beautiful glass-morphism design with smooth animations
- Responsive: Optimized for desktop, tablet, and mobile devices
- Fast: Lightweight and performant with minimal dependencies
Experience Blogify in action: [Demo Link Coming Soon]
Home Page Create new blog posts with author information and content |
Read Page with Blog Posts Browse through all published blog posts with edit and delete options |
Phone View Home Page with Navbar on phone Dimensions |
Edit Modal In-place editing of blog posts through modal dialogs |
Delete Confirmation Modal Safe deletion with confirmation warnings and post preview |
About Page
- Backend: Node.js, Express.js
- Template Engine: EJS (Embedded JavaScript)
- Styling: Custom CSS with Glass-morphism effects
- Frontend Framework: Bootstrap 5 (CDN)
- Icons: Font Awesome 6
- Development: Modern ES6+ JavaScript
- Node.js (version 18 or higher)
- npm (comes with Node.js)
-
Clone the repository
git clone https://github.com/Ash-the-k/BlogWebApp.git cd BlogWebApp -
Install dependencies
npm install
-
Start the application
node index.js
-
Open your browser Navigate to
http://localhost:3000
BlogWebApp/
├── public/
│ └── styles/
│ └── main.css # Custom glass-morphism styles
├── views/
│ ├── partials/
│ │ ├── header.ejs # Navigation and header
│ │ ├── footer.ejs # Footer and scripts
│ │ ├── editModal.ejs # Edit post modal
│ │ └── deleteModal.ejs # Delete confirmation modal
│ ├── index.ejs # Home page with post creation form
│ ├── read.ejs # Blog posts listing page
│ └── about.ejs # About page with project details
├── index.js # Main server file
└── package.json # Project dependencies
- Create: Form-based post creation with author details
- Read: Dynamic rendering of all posts with EJS
- Update: In-place editing through modal dialogs
- Delete: Confirmation-based deletion with safety warnings
- Glass-morphism Design: Modern, translucent UI elements
- Responsive Layout: Mobile-first design approach
- Smooth Animations: Hover effects and transitions
- Intuitive Navigation: Clear call-to-action buttons
- Server-side Rendering: Fast page loads with EJS
- Form Handling: Secure POST request processing
- Static File Serving: Efficient CSS and asset deliverya
- Session Management: In-memory data storage (demo purposes)
Blogify embraces modern design principles with:
- Glass-morphism: Translucent, frosted glass effects
- Minimalism: Clean, uncluttered interface
- Accessibility: High contrast and readable typography
- Responsiveness: Seamless experience across all devices
The application is built with a mobile-first approach:
- Mobile: Optimized touch interactions and compact layouts
- Tablet: Balanced spacing and navigation
- Desktop: Full-featured experience with hover effects
- No Database: Posts don't persist between server restarts
- No Authentication: Single-user application
- No Image Uploads: Text-only blog posts
Test the application by:
- Creating multiple blog posts
- Editing post content and titles
- Deleting posts with confirmation
- Testing responsive design on different screen sizes
- Verifying form validation and error handling
Contributions are welcome! Please feel free to submit a Pull Request.
This project is licensed under the MIT License - see the LICENSE file for details.
Ashlesh Kanchan
- Dr. Angela Yu - The Complete Full-Stack Web Development Bootcamp
- Bootstrap Team - Responsive CSS framework
- Font Awesome - Icon library
- EJS Community - Template engine
This project demonstrates:
- Node.js & Express.js: Server-side development
- EJS Templating: Dynamic HTML generation
- CSS Animations: Modern UI effects
- Responsive Design: Mobile-first development
- Form Handling: User input processing
- Modal Interactions: JavaScript-based UI components
Star this repository if you found it helpful!
Built with ❤️ as part of "The Complete Full-Stack Web Development Bootcamp" by Dr. Angela Yu