DEV Community: Zaheer Ahmed

Stop Building Express Apps Manually: Introducing exp-mvc

Zaheer Ahmed — Tue, 16 Dec 2025 19:09:45 +0000

🎉 Announcing exp-mvc v1.2.0 - Express MVC Architecture Builder!

A CLI tool to generate and scaffold Express.js applications with MVC architecture.

✨ Features:

One-command project generation
Automatic component scaffolding
Auto dependency and package installation
Ready-to-use basic ejs view templates
Built-in Mongodb support

Get it now:

npm install exp-mvc

GitHub: https://github.com/ZaheerAhmedkhan65/exp-mvc
npm: https://www.npmjs.com/package/exp-mvc

After installing exp-mvc globally , run the following command:

expmvc new myapp

npx exp-mvc new myapp

This will create:

./myapp

with the full project structure.

Navigate to the project folder:

cd myapp

Inside your project folder, install dependencies:

npm install

configure the mongodb connection in the .env file

MONGODB_URI=mongodb://localhost:27017/myapp

Run the server:

npm start

npm run dev

Run the watch command to automatically install dependencies on file save:

npm run watch

Open the browser at http://localhost:3000

🔥 CLI Commands Reference

Once inside your generated project, use the expmvc command to generate components:

Generate Complete CRUD Scaffold

Create a full CRUD module with controller, model, service, route, and validation files:

expmvc generate scaffold User name:string email:string password:string age:number

Generate Individual Components

Generate a controller

expmvc generate controller Product

Generate a model with fields

expmvc generate model Category name:string description:string

Generate a route

expmvc generate route Order

Generate a service

expmvc generate service Auth

Generate a validation file

expmvc generate validation User

Generate a view (EJS template)

expmvc generate view home/index

Relations Between Models

1. Generate Individual Models with References:

# Generate User model
expmvc generate model User name:string email:string password:string

# Generate Post model with User reference
expmvc generate model Post title:string content:string user:ref:User

# Generate Comment model with User and Post references
expmvc generate model Comment content:string user:ref:User post:ref:Post

2. Create Relationships Between Existing Models:

# Add belongsTo relationship from Post to User
expmvc rel belongsTo Post User --field author

# Add hasMany relationship from User to Post
expmvc rel hasMany User Post --field posts

# Add belongsToMany relationship (for tags, categories, etc.)
expmvc rel belongsToMany Post Tag --field tags[]

3. Complete Relationship Scaffold:

# Scaffold User-Post relationship (One-to-Many)
expmvc sr User Post hasMany

# Scaffold Post-Comment relationship (One-to-Many)
expmvc sr Post Comment hasMany

# Scaffold User-Comment relationship (One-to-Many)
expmvc sr User Comment hasMany

4. Generate Complete CRUD with Relationships:

# Generate User scaffold
expmvc generate scaffold User name:string email:string password:string

# Generate Post scaffold with User reference
expmvc generate scaffold Post title:string content:string user:ref:User

# Then add the reverse relationship
expmvc rel hasMany User Post --field posts

Field Types Supported

# Available field types:
name:string           # String field
age:number            # Number field
isActive:boolean      # Boolean field
createdAt:date        # Date field
tags:array           , Array field
userId:objectid       # ObjectId reference

✨ Why Use This Generator?

Saves Hours: Skip repetitive setup and focus on business logic
Consistent Architecture: Enforces clean, maintainable structure
Production Ready: Includes validation, services, and middleware patterns
Scalable: Perfect for growing applications
Developer Friendly: Intuitive CLI with helpful commands

Perfect For:

Students learning Express.js
Backend developers starting new projects
Startups needing rapid prototyping
API bootstrapping and hackathons
Enterprise applications requiring structure

That One CSS Gap That Tricked Me For a Week (And The Simple Fix)

Zaheer Ahmed — Thu, 20 Nov 2025 17:36:27 +0000

How I learned that sometimes, the problem isn't your layout, it's your assumptions.

Hey everyone! 👋
I'm Zaheer Ahmed, a web application developer just starting to share my journey. For my first post, I wanted to talk about a problem that had me banging my head against the keyboard for an embarrassingly long time. I'm sharing this in the hope that I can save another new developer from the same frustration.

We've all been there: you're building a component, everything looks perfect in your mind, but the browser has other plans.

The Scene of the Crime

I was building a simple, responsive card grid. You know the one—a bunch of cards that wrap nicely into rows. I reached for my trusty CSS Grid, and it felt like the right tool for the job.

Here was my initial, perfectly logical code:

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

Simple, right? It should create columns that are at least 250px wide, and they should all be equal width (1fr). But I noticed something weird. On certain viewport widths, there was a larger-than-expected gap on the right side of the grid. It looked... unbalanced.

https://via.placeholder.com/600x200?text=Uneven+Gaps+Here!

My first thought? "Ah, must be a margin or padding issue." I spent hours using the browser's DevTools to inspect every element, looking for rogue margins. I tried margin: 0, padding: 0, and even the nuclear box-sizing: border-box on everything. Nothing worked.

The "Aha!" Moment in the DevTools

The breakthrough came when I stopped focusing on the content of the grid and started focusing on the grid container itself. I was resizing my browser window slowly when I saw it.

I changed my code to this:

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
  gap: 1rem;
}

Let's break down the magic: minmax(min(250px, 100%), 1fr)

This is saying:

min(250px, 100%): Use the smaller of either 250px or 100%of the grid's width. On large screens, 250px is smaller, so it uses that. But on a small screen, if the grid container is only 300px wide, 100% (which is 300px) is smaller than 250px, so it uses 100%.
This prevents the browser from having to deal with a large, leftover fragment of space. It ensures the columns are always flush and fill the container beautifully at any size.

https://via.placeholder.com/600x200?text=Perfectly+Flush+Grid!

The result was a perfectly flush, responsive grid without any weird gaps. It was one line of code, but it required a fundamental shift in how I understood the interaction between auto-fit, minmax, and container size.

My Key Takeaway

I learned that when CSS doesn't behave as expected, the solution isn't always to fight it with more CSS. Sometimes, you need to take a step back and really understand what your original instructions are telling the browser to do. The problem wasn't in my styling; it was in my logic.

This small victory taught me more about CSS Grid than any tutorial ever had.

Try It Yourself Live!

See the difference in action - try resizing this demo:

Your Turn!

Have you ever had a CSS "aha!" moment that changed how you think about layout? Maybe with Flexbox, positioning, or another Grid quirk? Share your stories in the comments - let's learn from each other's struggles!

If this helped you understand CSS Grid better, consider giving this post a like or sharing it with other developers who might benefit.

Follow me for more web development insights as I continue sharing my journey!

Happy coding!

Zaheer Ahmed

nice

Zaheer Ahmed — Tue, 18 Nov 2025 17:55:59 +0000

🎃 Halloween Party 2025: A Responsive Halloween Landing Page for the Dev.to Frontend Challenge 👻

Hadil Ben Abdallah ・ Oct 30

#devchallenge #frontendchallenge #webdev #javascript