blog-web-app-v2

A blog web app demo, created with EJS, CSS and JavaScript, Node.js for the back-end. No database.

🚀 Getting Started

# Clone the repository
git clone https://github.com/nicolasmbronner/blog-web-app-v2.git

# Navigate to the project directory
cd blog-web-app-v2

# Install dependencies
npm i

# Start the server
node index.js

Visit http://localhost:3000 in your browser to access the blog.

📂 Project Structure

blog-web-app-v2/
├── src/              # Main source code
│   ├── routes/       # Route handlers
│   ├── data/         # In-memory data store
│   ├── services/     # Business logic (CRUD)
│   ├── utils/        # Utility functions
│   └── middleware/   # Authentication & other middlewares
├── tests/            # Unit tests
├── public/           # Static files
│   ├── css/         
│   └── js/          
├── views/            # EJS templates
│   ├── partials/     # Reusable components
│   └── pages/        # Main pages
├── docs/             # Technical documentation
└── index.js          # Application entry point

📚 Documentation

• Roadmap - Development plan and future features
• Technical Architecture - Detailed code structure and organization
• User Guide - Usage instructions and features explanation
• Changelog - Version history and updates

✨ Features

• Read articles with formatted dates
• Create, Edit, Delete your articles
• Client-side article interactions without page reloads
• Modular JavaScript architecture
• Light/dark mode toggle (in progress)
• Adaptable date formats based on device and context
• Cross platform responsive design

🔧 Technical Notes

• Uses Express.js for server-side rendering with EJS templates
• Client-side JavaScript organized in modules (ES6)
• In-memory article storage with full CRUD operations
• Custom middleware for HTTP method support
• Adaptive design for desktop and mobile devices
• RESTful API pattern with browser compatibility adaptations

🎨 Color Reference

Color	Hex
Background Dark	#141518
Main C.Dark	#FFFFFF
Secondary C.Dark	#F8F8F8
Background Light	#FFFFFF
Main C.Light	#000000
Secondary C.Light	#515151
Edit Color	#425DE1
Delete Color	#E14942

📸 Screenshots

Login page:

Login page with input:

Index page:

Article hovering with mouse, interaction icons (index page)

Article reading page

Deleted article notification:

Article edition page

Canceled article edition notification

New article page

Canceled new article notification

White theme

Tablet and Smartphone responsive design

Touch device swipe right to edit article (from index page):

Touch device swipe left to delete article (from index page):

👨‍💻 Author

• @nicolasmbronner

📄 License