How supriya2233/blog-web-application works
Purpose and Runtime
A server-rendered blog CRUD application for creating, listing, editing, and deleting categorized posts. It runs on Node.js with Express and renders HTML through EJS. The server entry point is app.js; package scripts and dependencies are defined in package.json.
Posts are intentionally ephemeral: application state lives in an in-memory array and is lost whenever the Node process restarts.
Server and Routing Boundary
app.js is the central application controller. It owns Express initialization, static-file serving, EJS view rendering, request parsing, and the routes that implement post lifecycle operations.
The browser interacts through normal HTTP page/form requests rather than a separate API. Route handlers read form data, mutate in-memory state, then render or redirect to EJS pages.
Grounding:
• app.js
• views/index.ejs
• views/edit.ejs
Post Lifecycle and State
The core domain is a blog post, including content and category information. The in-memory post collection is the persistence boundary and source of truth for all views.
Primary flow:
1. A user opens the post list.
2. The server renders available posts.
3. Create and edit forms submit to Express routes.
4. The route mutates the in-memory collection.
5. The browser is redirected or receives a newly rendered page.
6. Delete requests remove a post from the same collection.
There is no database, authentication system, external API, or durable storage layer.
Grounding:
• app.js
• views/new.ejs
• views/edit.ejs
Presentation Layer
EJS templates define the server-generated screens:
• views/index.ejs presents the blog/post listing and navigation to actions.
• views/new.ejs provides post-creation input.
• views/edit.ejs provides post-update input.
• views/404.ejs is the fallback presentation for unmatched resources.
Templates are the boundary between server-owned post data and browser HTML.
Grounding:
• views/index.ejs
• views/new.ejs
• views/404.ejs
Static Client Assets
Express serves browser assets from public. Styling is centralized in public/css/style.css, supporting the responsive interface. Client-side theme behavior is isolated in public/js/theme.js, which handles light/dark mode independently of post CRUD state.
Grounding:
• public/css/style.css
• public/js/theme.js
• app.js
Operational Model
The application is a single Node process, normally started with npm and exposed locally on port 3000. Development mode uses Nodemon for process restart on source changes; this also clears posts because state is process-local.
There is no deployment infrastructure, background worker, message queue, cache, database, or third-party service represented in the repository.
Grounding:
• package.json
• package-lock.json
• app.js
Components 10
Node Runtime
- npm scripts & dependencies · Starts Express or Nodemon development mode.
package.json - Express application · Owns routing, parsing, rendering, and static serving.
app.js - In-memory posts · Process-local source of truth; resets on restart.
app.js
Server-rendered UI
- Post listing · Renders posts and action navigation.
views/index.ejs - Create post form
views/new.ejs - Edit post form
views/edit.ejs - Not-found page · Fallback for unmatched resources.
views/404.ejs
Static Assets
- Responsive styles
public/css/style.css - Theme behavior · Handles light/dark mode independently of CRUD state.
public/js/theme.js
Other components
- Browser · Uses page and form HTTP requests.
Connections 15
- npm scripts & dependencies → Express application: starts
- Browser → Express application: HTTP pages & forms
- Express application → In-memory posts: reads and mutates
- Express application → Post listing: renders list
- Express application → Create post form: renders create form
- Express application → Edit post form: renders edit form
- Express application → Not-found page: renders fallback
- Post listing → Browser: HTML response
- Create post form → Browser: HTML response
- Edit post form → Browser: HTML response
- Not-found page → Browser: HTML response
- Express application → Responsive styles: serves
- Express application → Theme behavior: serves
- Responsive styles → Browser: applies UI styling
- Theme behavior → Browser: toggles theme