DEV Community: Nabin Kandel

A Quick Setup for NestJS 11 + Prisma 7 + PostgreSQL backend in seconds.

Nabin Kandel — Thu, 18 Jun 2026 16:46:58 +0000

🚀 Create Quick Nest

A Quick Setup for NestJS 11 + Prisma 7 + PostgreSQL backend in seconds.

The fastest way to start a NestJS + Prisma database project. Skip boilerplate, skip setup start building real features in minutes.

Create your project instantly:

bunx quick-nest my-app
# or
npx  quick-nest my-app

npm/bun pacakge :https://www.npmjs.com/package/quick-nest
Your NestJS + Prisma database is ready to go.

✨ Features

🏗️ NestJS 11 — Modern, opinionated Node.js framework
🗄️ Prisma ORM v7 — Type-safe PostgreSQL ORM with auto-migrations
🐘 PostgreSQL Database — Robust relational database included
🔐 JWT Authentication — Register, login, and protected routes
📝 Todo CRUD Example — Real-world patterns you can learn from
⚡ Bun Runtime — Fast, modern JavaScript runtime
🧩 Feature-Based Architecture — Scalable folder structure
📦 Zero Configuration Database Setup — Migrations run automatically
🧬 Prisma Client Auto-Generation — Type-safe database queries out of the box
☁️ Production Ready — Deploy to Vercel, Railway, Render, or Docker
🎯 Minimal Stack — No unnecessary abstractions or bloat

📦 Generated Stack

Technology	Version
NestJS	11.x
Prisma ORM	7.x
PostgreSQL	15+
TypeScript	6.x
Bun	1.2+
JWT	11.x
Passport	0.7+
bcrypt	6.x

⚡ Quick Setup: Database to Development

Get your NestJS + Prisma database running in 5 minutes.

1️⃣ Create Project

npm create quick-nest my-app
cd my-app

2️⃣ Configure Database

cp .env.example .env

Edit .env with your PostgreSQL credentials:

DATABASE_URL="postgresql://user:password@localhost:5432/quick_nest"
JWT_SECRET="your-super-secret-key-here"

3️⃣ Generate Prisma Client & Run Migrations

bunx prisma migrate dev --name init

This command:

Generates the Prisma client
Creates your PostgreSQL database schema
Seeds initial tables (User, Todo)

4️⃣ Start Development Server

bun run start:dev

✅ Done. Your API is live at http://localhost:3000

🗄️ What Happens Behind the Scenes

Prisma v7 connects to your PostgreSQL database
User & Todo tables are created automatically
Prisma Studio opens (optional) for data exploration
TypeScript types are generated for all database models

🗄️ Prisma v7 & Database

Included Database Features

Prisma ORM v7 — Latest version with performance improvements
PostgreSQL — Production-grade relational database
Type-Safe Queries — Full TypeScript support for all database operations
Auto-Generated Types — Database models auto-converted to TypeScript interfaces
Migrations — Version-controlled database schema changes
Prisma Studio — Visual database explorer (bunx prisma studio)

Common Database Commands

# Generate Prisma client (auto-run after migrations)
bunx prisma generate

# Create & run migrations
bunx prisma migrate dev --name add_feature

# View database with Prisma Studio
bunx prisma studio

# Reset database (development only)
bunx prisma migrate reset

📁 Project Structure

src/
├── common/
│   ├── decorators/        # Custom decorators
│   └── guards/            # Auth guards, etc.
├── core/
│   └── prisma/            # Prisma service singleton
├── modules/
│   ├── auth/              # Register, login, JWT
│   └── todo/              # CRUD example
├── app.module.ts
└── main.ts

prisma/
├── schema.prisma          # Database schema
└── migrations/            # Migration history

🔐 Included Features

Authentication

User Registration with validation
User Login with JWT tokens
Password hashing (bcrypt)
Protected route guards
Access token generation

Database

Prisma ORM v7 with PostgreSQL
Type-safe queries
Automatic migrations
Prisma Studio for data exploration

Todo Module (Example)

Create, read, update, delete todos
User ownership & isolation
Input validation
Clean service layer

📡 API Endpoints

Method	Route	Description
POST	/auth/register	Create new user
POST	/auth/login	Login & receive token
GET	/todos	List user's todos
GET	/todos/:id	Get single todo
POST	/todos	Create todo
PATCH	/todos/:id	Update todo
DELETE	/todos/:id	Delete todo

☁️ Deployment

Optimized for:

Vercel — Recommended for serverless
Railway — Simple, Git-connected
Render — Free tier available
Fly.io — Global deployment
Docker — Containerized deployments
Traditional VPS — Full control

📋 System Requirements

Tool	Version
Node.js	22+
Bun	1.2+
PostgreSQL	15+

🎯 Perfect For

Learning NestJS + Prisma + PostgreSQL — All three together
Building NestJS databases quickly — Zero config database setup
Prisma ORM projects — v7 best practices built in
Backend API development — With a real database layer
MVP & startup projects — From idea to API in minutes
Portfolio projects — Show employers production-ready code
Internship preparation — Learn modern NestJS patterns
Freelance projects — Get to feature development faster
SaaS backends — Scalable from day one
Hackathons — Get your database layer done first

🛠 Local Development

Clone & Setup

git clone https://github.com/nabinkdl/quick-nest.git
cd quick-nest
bun install

Run Locally

bun run start my-app

Force Overwrite

bun run start my-app --force

🌱 Extensible Foundation

The starter intentionally stays minimal—perfect for learning and quick MVPs. As your app grows, easily add:

🔴 Redis caching
🐳 Docker & Docker Compose
🚦 Rate limiting & throttling
📊 Logging & monitoring
📨 Email services
📁 File uploads & storage
🔄 Background jobs & queues
🌐 WebSockets & real-time features
🔑 OAuth (Google, GitHub, Discord)
🛡️ RBAC authorization
📚 Swagger API docs
🧪 Automated testing (Jest)
📈 Metrics & observability
🏢 Multi-tenancy

📦 Package

Available on npm:

npx  quick-nest my-app

Package name: quick-nest

📝 License

MIT

🚀 NestJS + Prisma V7 + Vercel Starter

Nabin Kandel — Sun, 14 Jun 2026 12:56:54 +0000

A minimal, production‑ready REST API with JWT authentication and todo CRUD, built with NestJS, Prisma v7, and PostgreSQL — optimised for Vercel serverless deployment.

Stop wrestling with boilerplate. Clone this, configure your database, and you've got a live API in minutes.

✨ What's included

🔐 JWT auth – register and login endpoints ready to go
📝 Full todo CRUD – each user manages their own private list
🧩 Clean NestJS architecture – separate modules for auth, todo, and a shared prisma service
⚡ Serverless‑ready – Prisma client singleton prevents connection exhaustion on Vercel
🛠️ Zero‑config deployment – push to GitHub, import to Vercel, done

⚡ Quick Setup

1. Clone and rename

git clone https://github.com/nabinkdl/Nest-setup my-app
cd my-app

Rename my-app to whatever fits your project. Then start fresh:

rm -rf .git && git init

2. Set project metadata (no manual editing)

npm pkg set name="your-name"
npm pkg set description="this is your description"
npm pkg set author="your name"
npm pkg set license="MIT"

3. Install dependencies

bun install        # you can also use npm or yarn

4. Configure your database

cp .env.example .env

Open .env and add your PostgreSQL connection string:

DATABASE_URL="postgresql://user:password@host:5432/mydb?schema=public"

Provider	Connection string tip
Neon	append `?sslmode=require`
Supabase	append `?pgbouncer=true`
Railway	use the provided string as‑is

5. Run the migration

bunx prisma migrate dev --name init

(Optional) Explore your data with Prisma Studio:

bunx prisma studio

6. Start developing

bun run start:dev

Your API is now live at http://localhost:3000 🎉

☁️ Deploy to Vercel

Push your repo to GitHub.
Import the project on vercel.com/new.
Add the environment variables:
- DATABASE_URL – your PostgreSQL connection string
- NODE_ENV – production
Hit Deploy – Vercel will automatically run:

   bunx prisma generate && bun run build

Your serverless NestJS API is now live!

📡 API Endpoints

All /todos routes require a JWT Bearer token in the Authorization header.

Method	Route	Body (JSON)	Description
POST	`/auth/register`	`{"email": "user@test.com", "password": "123"}`	Register a new user
POST	`/auth/login`	`{"email": "user@test.com", "password": "123"}`	Login, receive a JWT
GET	`/todos`	–	List all user's todos
GET	`/todos/:id`	–	Get a single todo
POST	`/todos`	`{"title": "Buy milk"}`	Create a todo
PATCH	`/todos/:id`	`{"title": "Buy milk updated"}`	Update a todo
DELETE	`/todos/:id`	–	Delete a todo

Try it with curl, Postman, or your future frontend.

📁 Project Structure

src/
├── app.module.ts             # Root module
├── app.controller.ts         # Root controller
├── main.ts                   # App entry point
├── common/                   # Shared utilities
│   ├── decorators/           # @CurrentUser, etc.
│   └── guards/               # JwtAuthGuard
├── core/
│   └── prisma/               # Prisma module & service (singleton)
└── modules/
    ├── auth/                 # Auth module (register, login, JWT)
    └── todo/                 # Todo CRUD module

prisma/
├── schema.prisma             # Database schema
└── migrations/               # Prisma migration files

Everything is intentionally minimal so you can understand and extend it with confidence.

💡 Notes

Singleton Prisma client – The PrismaService reuses a single client instance across serverless invocations to avoid exhausting database connections.
Never commit .env – use .env.example as a safe template for your team.
Best for – hobby projects, small startups, hackathons, or as a learning base. Need rate limiting or more complex logic? The architecture is clean enough to scale with your needs.

Building a NestJS + Prisma + Vercel Serverless API :quick setup

Nabin Kandel — Mon, 08 Jun 2026 18:06:31 +0000

NestJS + Prisma + Vercel Starter

Minimal REST API built with NestJS, Prisma v6, PostgreSQL — ready for Vercel serverless deployment.

Why Prisma v6?

Prisma v7 introduced breaking changes that require extra serverless adapters and additional configuration files. Prisma v6 works with Vercel out of the box — no extra setup needed.

Quick Setup

1. Clone the repo

git clone https://github.com/nabinkdl/prisma-Nest-vercel-setup.git my-app
cd my-app

Rename the folder to whatever fits your project (my-app above). Then remove the original git history so you can start fresh:
rm -rf .git
git init

🏷️ Set Project Details (No manual editing)

Instead of editing package.json, run:

npm pkg set name="your name"
npm pkg set description="this is your description"
npm pkg set author=" set author name"
npm pkg set license=" set license"

2. Install

npm install

3. Configure environment

cp .env.example .env

Set DATABASE_URL in .env:

DATABASE_URL="postgresql://user:password@host:5432/mydb?schema=public"

Provider	Connection string tip
Neon	append `?sslmode=require`
Supabase	append `?pgbouncer=true`
Railway	use the provided string as-is

4. Migrate database

npx prisma migrate dev --name init

Prisma Studio

 npx prisma studio

5. Start dev server

npm run start:dev
# → http://localhost:3000

Deploy to Vercel

Push repo to GitHub
Import project at vercel.com/new
Add environment variables:
- DATABASE_URL — your PostgreSQL connection string
- NODE_ENV — production
Deploy — Vercel automatically runs:

   prisma generate && npm run build

API Endpoints

Method	Route	Body	Description
GET	`/`	—	API info
GET	`/todos`	—	List all todos
POST	`/todos`	`{ "title": "string" }`	Create a todo
DELETE	`/todos/:id`	—	Delete a todo

Project Structure

src/
├── app.module.ts         # Root module
├── prisma/
│   ├── prisma.service.ts   # Singleton Prisma client
│   └── prisma.module.ts    # Global Prisma module
└── todo/
    ├── todo.controller.ts
    ├── todo.service.ts
    └── todo.module.ts
api/
└── index.js              # Vercel serverless entry point
prisma/
└── schema.prisma         # Database schema

Notes

Singleton pattern — PrismaService reuses a single client instance across serverless invocations to prevent connection exhaustion.
Two entry points — main.ts is for local development only (app.listen(3000)). Vercel uses api/index.js with ExpressAdapter and no listen call.
Never commit .env — use .env.example as the template for your team.
Best for — hobby/small projects

Build a Tiny NestJS Todo App: The Minimal MVC Approach

Nabin Kandel — Mon, 11 May 2026 15:57:57 +0000

NestJS is often praised for its scalability and enterprise-grade architecture, but that can sometimes make it feel intimidating for beginners. You might hear terms like "Dependency Injection," "Modules," and "Decorators" and wonder if you need a complex database setup just to get started.

You don't.

In this tutorial, we're going to strip away the complexity and build a tiny, in-memory Todo API using NestJS. We'll stick to a minimal MVC (Model-View-Controller) style pattern—though since this is an API, think of it as DTO-Service-Controller. No database, no ORM, just pure TypeScript logic.

By the end of this guide, you'll understand how data flows through a NestJS application.

📁 The Project Structure

We are keeping things flat and simple. Here is the file structure we will be working with:

src/
├── todo/
│   ├── dto/
│   │   └── create-todo.dto.ts
│   ├── todo.controller.ts
│   └── todo.service.ts
├── app.module.ts
└── main.ts

Step 1: Define the Data Shape (DTO)

In NestJS, it's best practice to define what your data looks like using a DTO (Data Transfer Object). This ensures that when a user sends data to our API, we know exactly what fields to expect.

Create src/todo/dto/create-todo.dto.ts:

export class CreateTodoDto {
  title: string;
  description?: string;
}

Note: In a production app, you might use class-validator to enforce rules (like making title required), but for this tiny app, a simple class definition is enough to define the type.

Step 2: The Service (Business Logic)

The Service is where the magic happens. It holds our data and performs operations on it. Since we aren't using a database, we'll store our todos in a simple array in memory.

Create src/todo/todo.service.ts:

import { Injectable } from '@nestjs/common';
import { CreateTodoDto } from './dto/create-todo.dto';

export interface Todo {
  id: number;
  title: string;
  description?: string;
}

@Injectable()
export class TodoService {
  private todos: Todo[] = [];
  private idCounter = 1;

  findAll(): Todo[] {
    return this.todos;
  }

  create(createTodoDto: CreateTodoDto): Todo {
    const newTodo: Todo = {
      id: this.idCounter++,
      ...createTodoDto,
    };
    this.todos.push(newTodo);
    return newTodo;
  }

  delete(id: number): boolean {
    const initialLength = this.todos.length;
    this.todos = this.todos.filter(todo => todo.id !== id);
    return this.todos.length < initialLength;
  }
}

Key Concept: The @Injectable() decorator tells NestJS that this class can be managed by the dependency injection system. This allows us to inject this service into our controller later.

Step 3: The Controller (Routes)

The Controller listens for incoming HTTP requests (GET, POST, DELETE) and delegates the work to the Service. It doesn't care how the data is saved; it just cares about receiving the request and sending back a response.

Create src/todo/todo.controller.ts:

import { Controller, Get, Post, Delete, Body, Param, HttpCode, HttpStatus } from '@nestjs/common';
import { TodoService } from './todo.service';
import type { Todo } from './todo.service';
import { CreateTodoDto } from './dto/create-todo.dto';

@Controller('todos')
export class TodoController {
  constructor(private readonly todoService: TodoService) {}

  @Get()
  findAll(): Todo[] {
    return this.todoService.findAll();
  }

  @Post()
  create(@Body() createTodoDto: CreateTodoDto): Todo {
    return this.todoService.create(createTodoDto);
  }

  @Delete(':id')
  @HttpCode(HttpStatus.OK)
  delete(@Param('id') id: string): { message: string } {
    const deleted = this.todoService.delete(parseInt(id, 10));
    if (!deleted) {
      return { message: 'Todo not found' };
    }
    return { message: 'Todo deleted successfully' };
  }
}

Key Concepts:

@Controller('todos'): Sets the base route for all endpoints in this class to /todos
@Get(), @Post(), @Delete(): Decorators that map methods to specific HTTP verbs
@Body(): Extracts the JSON payload from the request
@Param('id'): Extracts the id parameter from the URL (e.g., /todos/1)

Step 4: The Module

NestJS applications are organized into modules. The module acts as a container that tells NestJS which controllers and services belong together.

Update src/app.module.ts:

import { Module } from '@nestjs/common';
import { TodoController } from './todo/todo.controller';
import { TodoService } from './todo/todo.service';

@Module({
  controllers: [TodoController],
  providers: [TodoService],
})
export class AppModule {}

Since this is a tiny app, we are putting everything directly into the root AppModule. In larger apps, you would create a separate TodoModule and import it here.

Step 5: The Entry Point

Finally, we need to bootstrap the application. This is the standard boilerplate code generated by the Nest CLI.

Update src/main.ts:

import { NestFactory } from '@nestjs/core';
import { AppModule } from './app.module';

async function bootstrap() {
  const app = await NestFactory.create(AppModule);
  await app.listen(3000);
  console.log('🚀 Application is running on: http://localhost:3000');
}
bootstrap();

🧪 Let's Test It!

Start your development server by running:

npm run start:dev

Now, let's interact with our API using cURL, Postman, or your browser.

1. ➕ Create a Todo

Send a POST request to http://localhost:3000/todos with a JSON body:

{
  "title": "Learn NestJS",
  "description": "Build a simple Todo app"
}

2. 📋 Get All Todos

Send a GET request to http://localhost:3000/todos

You should see:

[
  {
    "id": 1,
    "title": "Learn NestJS",
    "description": "Build a simple Todo app"
  }
]

3. ❌ Delete a Todo

Send a DELETE request to http://localhost:3000/todos/1

You should receive:

{
  "message": "Todo deleted successfully"
}

If you GET the todos again, the list will be empty!

🎉 Conclusion

You've just built a functional REST API with NestJS!

This minimal example demonstrates the core architectural pattern of NestJS:

DTOs define the data shape.
Services handle business logic and data.
Controllers handle HTTP requests.
Modules wire everything together.

Enjoy your clean, tiny NestJS Todo app! ✨

Made with ❤️ for beginners

🚀 React + Vite + Tailwind CSS + Shadcn UI Setup (vanillaJS)

Nabin Kandel — Sun, 10 May 2026 01:39:57 +0000

A complete step-by-step guide to quickly set up **React + Vite + Tailwind CSS + Shadcn UI* with clean @/... alias imports — no TypeScript required!*

⏱️ Time to complete: ~10 minutes

🎯 Result: Production-ready React app with beautiful, accessible components

🧩 Step 1: Create a Vite + React Project

Scaffold your new project with Vite:

npm create vite@latest my-app
cd my-app

When prompted, select:
Option | Choice
Framework | React
Variant | JavaScript

✅ Vite will generate a lean, fast React starter with HMR (Hot Module Replacement) out of the box.

🌀 Step 2: Install Dependencies

Install core packages and Tailwind's official Vite plugin:

npm install
npm install tailwindcss @tailwindcss/vite

Package	Purpose
`tailwindcss`	Utility-first CSS framework
`@tailwindcss/vite`	First-party Vite plugin for Tailwind (no PostCSS config needed!)

🎨 Step 3: Configure `vite.config.js`

Replace the entire contents of vite.config.js with:

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import tailwindcss from "@tailwindcss/vite";
import path from "path";

// https://vite.dev/config/
export default defineConfig({
  plugins: [
    tailwindcss(),
    react({
      babel: {
        plugins: [["babel-plugin-react-compiler"]], // ✅ Optional: React Compiler for perf
      },
    }),
  ],
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "./src"), // ✅ Enable @/ imports
    },
  },
});

🔍 Why This Matters:

@tailwindcss/vite → Compiles Tailwind at build time (faster than PostCSS!)
@ alias → Import like import Button from "@/components/ui/button" instead of ../../../components/ui/button 🧹

⚙️ Step 4: Create `jsconfig.json` for Editor Support

At your project root, create jsconfig.json:

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  },
  "include": ["src"],
  "exclude": ["node_modules", "dist"]
}

💡 Benefits:

✅ VS Code autocomplete for @/ imports
✅ ESLint/Prettier understand your alias paths
✅ No more "Cannot find module" warnings 👻

🪄 Step 5: Import Tailwind in Your CSS

Open or create src/index.css and add:

@import "tailwindcss";

🎉 That's it! With @tailwindcss/vite, you don't need @tailwind base/components/utilities — the plugin handles it automatically.

(Optional) Clean up default styles:

Delete or empty src/App.css to avoid conflicting styles.

🌈 Step 6: Initialize Shadcn UI

Run the Shadcn CLI to set up your component library:

npx shadcn@latest init

Follow the prompts:
| Question | Recommended Choice |
|----------|-------------------|
| Style | New York or Default |
| Base color | Slate (neutral & accessible) |
| CSS variables | Yes (for theming) |

Then add your first components:

npx shadcn@latest add button card input

✅ Components land in src/components/ui/ — fully customizable, accessible, and Tailwind-powered.

💻 Step 7: Test Your Setup

Open src/App.jsx and replace with:

import { Button } from "@/components/ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";

export default function App() {
  return (
    <div className="flex min-h-screen items-center justify-center bg-gray-50 p-4">
      <Card className="w-full max-w-md">
        <CardHeader>
          <CardTitle className="text-center">🎉 Setup Successful!</CardTitle>
        </CardHeader>
        <CardContent className="flex flex-col gap-4">
          <p className="text-center text-gray-600">
            You're now running React + Vite + Tailwind + Shadcn UI.
          </p>
          <Button className="w-full">Click Me</Button>
          <Button variant="outline" className="w-full">
            Secondary Action
          </Button>
        </CardContent>
      </Card>
    </div>
  );
}

Then start the dev server:

npm run dev

🔗 Visit http://localhost:5173 — you should see a beautifully styled card with Shadcn buttons!

✅ Final Project Structure

my-app/
├── public/
├── src/
│   ├── components/
│   │   └── ui/          # 🎨 Shadcn components (button, card, input...)
│   ├── App.jsx          # 🏠 Main app component
│   ├── index.css        # 🎨 Tailwind import
│   └── main.jsx         # ⚡ React entry point
├── index.html
├── vite.config.js       # ⚙️ Vite + Tailwind + alias config
├── jsconfig.json        # 🧠 Editor alias support
├── tailwind.config.js   # 🎨 Auto-generated by Shadcn (optional to tweak)
├── package.json
└── ...

🧭 Pro Tip: Keep src/components/ui/ for Shadcn primitives, and create src/components/ for your custom composables (e.g., UserProfile.jsx, NavBar.jsx).

🛠️ Troubleshooting Quick Fixes

Issue	Solution
❌ `@/` imports not working	Restart VS Code; ensure `jsconfig.json` is at root
❌ Tailwind classes not applying	Verify `@import "tailwindcss"` is in `index.css`
❌ Shadcn components look unstyled	Check that `index.css` is imported in `main.jsx`
❌ Vite server won't start	Run `npm run dev -- --force` to clear HMR cache
❌ Button has no hover effect	Ensure `tailwind.config.js` includes `content` paths (Shadcn auto-generates this)

🧪 Bonus: Add a Dark Mode Toggle (Optional)

Shadcn supports theming out of the box! Add this to src/App.jsx:

import { useEffect, useState } from "react";
import { Button } from "@/components/ui/button";

export default function App() {
  const [dark, setDark] = useState(false);

  useEffect(() => {
    document.documentElement.classList.toggle("dark", dark);
  }, [dark]);

  return (
    <div className="flex min-h-screen flex-col items-center justify-center bg-background text-foreground transition-colors">
      <Button onClick={() => setDark(!dark)} variant="outline">
        {dark ? "☀️ Light Mode" : "🌙 Dark Mode"}
      </Button>
    </div>
  );
}

🌗 Requires darkMode: "class" in tailwind.config.js (Shadcn sets this by default).

🔗 Helpful Resources

🎯 Key Takeaways

✅ Vite = Blazing-fast dev server & build
✅ @tailwindcss/vite = Simpler Tailwind setup (no PostCSS!)
✅ @/ aliases = Cleaner, scalable imports
✅ Shadcn UI = Production-ready, accessible components — you own the code
✅ JavaScript-first = No TypeScript overhead for quick prototyping

🙌 If this guide helped you ship faster, give it a ❤️, share it with your team, or drop a comment with what you're building!

⚡️ Complete Setup Guide: Expo + NativeWind (2026 Edition)

Nabin Kandel — Sun, 10 May 2026 01:30:33 +0000

Build beautiful, responsive React Native apps with Tailwind CSS — the easy way.

💡 What is NativeWind?

NativeWind lets you use Tailwind CSS classes directly in React Native components. Write className="flex-1 bg-white" instead of verbose stylesheets. 🎨

📋 Prerequisites

Before we begin, make sure you have:

Tool	Install Command / Link
Node.js (LTS)	nodejs.org
npm or yarn	Comes with Node.js
Expo CLI	`npm install -g expo-cli`
Xcode (for iOS)	App Store ⚠️ macOS only
Android Studio (for Android)	developer.android.com

🍎 iOS Developers: Xcode is ~12GB and required to run the iOS Simulator. Install it early — it takes time!

🤖 Android Developers: Enable a virtual device via Android Studio's Device Manager.

🧱 Step 1: Create and Initialize Project

npx create-expo-app@latest my-app
cd my-app

✅ Test that everything works:

npm run ios
# or
npm run android

Key	Action
`i`	Open iOS Simulator
`a`	Open Android Emulator
`r`	Reload the app
`d`	Open developer menu

🔁 Step 2: Reset the Project (Optional Cleanup)

Expo's template includes demo files. Let's start fresh:

npm run reset-project

When prompted:

Do you want to move existing files to /app-example instead of deleting them? (Y/n):

👉 Press n to delete and get a clean Expo Router structure.

🌿 Step 3: Install NativeWind & Dependencies

💡 Keep your Metro bundler running in one terminal. Open a new terminal for installations.

npm install nativewind tailwindcss react-native-reanimated react-native-safe-area-context

Package	Purpose
`nativewind`	Tailwind for React Native
`tailwindcss`	Core Tailwind engine
`react-native-reanimated`	Smooth animations
`react-native-safe-area-context`	Handle notches & status bars

🌀 Step 4: Initialize Tailwind

npx tailwindcss init

This creates tailwind.config.js at your project root.

⚙️ Step 5: Update `tailwind.config.js`

Replace the entire file with:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./App.{js,jsx,ts,tsx}",
    "./app/**/*.{js,jsx,ts,tsx}",
    "./components/**/*.{js,jsx,ts,tsx}",
    "./screens/**/*.{js,jsx,ts,tsx}",
  ],
  presets: [require("nativewind/preset")],
  theme: {
    extend: {},
  },
  plugins: [],
};

🔍 The content array tells Tailwind which files to scan for class names.

🎨 Step 6: Create `app/globals.css`

Inside your app/ folder, create globals.css:

@tailwind base;
@tailwind components;
@tailwind utilities;

This imports Tailwind's utility classes into your app.

🧠 Step 7: Configure Babel — `babel.config.js`

At your project root, update babel.config.js:

module.exports = function (api) {
  api.cache(true);
  return {
    presets: [
      ["babel-preset-expo", { jsxImportSource: "nativewind" }],
      "nativewind/babel",
    ],
  };
};

✨ This enables NativeWind's CSS-in-JS transformation at build time.

🧩 Step 8: Customize Metro Config

Run the Expo helper:

npx expo customize metro.config.js

Then update metro.config.js:

const { getDefaultConfig } = require("expo/metro-config");
const { withNativeWind } = require("nativewind/metro");

const config = getDefaultConfig(__dirname);

module.exports = withNativeWind(config, { input: "./app/globals.css" });

🔄 This injects NativeWind's CSS processor into Expo's bundler.

📘 Step 9: Add TypeScript Support — `nativewind-env.d.ts`

At your project root, create:

nativewind-env.d.ts

Add this single line:

/// <reference types="nativewind/types" />

✅ Now your editor will recognize className props with autocomplete!

📂 Step 10: Update `app/_layout.tsx`

Import your global styles:

import { Stack } from "expo-router";
import "./globals.css";

export default function RootLayout() {
  return <Stack />;
}

🧭 expo-router uses file-based routing — _layout.tsx wraps all screens.

🧱 Step 11: Example Screen — `app/index.tsx`

Let's test NativeWind with a simple screen:

import { View, Text } from "react-native";

export default function Index() {
  return (
    <View className="flex-1 items-center justify-center bg-white">
      <Text className="text-red-500 text-2xl font-bold">
        Hello from NativeWind 🎉
      </Text>
    </View>
  );
}

✅ If you see red, bold, centered text — it's working!

🚀 Step 12: Restart with Cache Clear

Final step — clear Metro's cache to apply all config changes:

npx expo start -c

When prompted:

? Clear Metro bundler cache? (y/N)

👉 Press y

🎯 You're All Set!

✅ Expo + Router

✅ NativeWind + Tailwind CSS

✅ Hot reloading with class names

✅ TypeScript support

✅ iOS & Android ready

🛠️ Troubleshooting Tips

Issue	Solution
❌ `className` not working	Restart with `-c`, check `babel.config.js`
❌ iOS simulator won't launch	Ensure Xcode is installed + command line tools: `xcode-select --install`
❌ Styles not updating	Verify `globals.css` is imported in `_layout.tsx`
❌ TypeScript errors on `className`	Confirm `nativewind-env.d.ts` exists at root
❌ Metro bundler stuck	Delete `node_modules/.cache` and restart

💡 Pro Tip: Add this to your package.json for faster dev:

"scripts": {
  "ios:clean": "npx expo start -c --ios",
  "android:clean": "npx expo start -c --android"
}

🧪 Bonus: Quick Test Component

Try this in a new file to see NativeWind in action:

// app/components/TestCard.tsx
import { View, Text } from "react-native";

export default function TestCard() {
  return (
    <View className="m-4 p-6 bg-blue-100 rounded-2xl shadow-lg">
      <Text className="text-blue-800 text-lg font-semibold mb-2">
        🚀 NativeWind Works!
      </Text>
      <Text className="text-gray-600">
        Style with Tailwind, no StyleSheet needed.
      </Text>
    </View>
  );
}

Then import it in index.tsx — instant beautiful UI! 🎨

🔗 Helpful Resources

🙌 If this guide saved you time, give it a ❤️, share it with a fellow dev, or drop a comment with what you're building next!

Tags: #ReactNative #Expo #NativeWind #TailwindCSS #MobileDev #WebDevelopment #Beginners #Tutorial

Understanding JavaScript Classes Objects and the ‘new’ Keyword: A Beginner’s Guide

Nabin Kandel — Sun, 10 May 2026 01:17:38 +0000

JavaScript Classes & the `new` Keyword: A Beginner's Guide to OOP 🎯

If you're just starting with JavaScript and Object-Oriented Programming (OOP), the class and new keywords might seem confusing. Let me break it down in the simplest way possible.

📐 What is a Class?

Think of a class as a blueprint or a recipe. It doesn't contain actual data — it just describes what kind of data an object should have.

class Student {
  name;
  age;
  gender;
}

This Student class is like saying: "Every student should have a name, age, and gender."

But we haven't created any actual students yet—just the plan.

🛠️ Creating Objects from a Class

To create actual students (objects) from our blueprint, we use the new keyword:

const ram = new Student();
ram.name = "Ram";
ram.age = 10;
ram.gender = "Male";

const sita = new Student();
sita.name = "Sita";
sita.age = 9;
sita.gender = "Female";

const hari = new Student();
hari.name = "Hari";
hari.age = 11;
hari.gender = "Male";

✅ Now we have three real student objects, each with their own data.

🔍 Using the Data

Once created, you can access each student's information:

console.log(ram.name);    // Output: Ram
console.log(sita.age);    // Output: 9
console.log(hari.gender); // Output: Male

❓ Why Do We Need the `new` Keyword?

This is where most beginners get confused.

Why can't we just write const ram = Student()?

Without `new` ❌

const ram = Student();  // ❌ Error! This won't work

JavaScript doesn't understand that you want to create an object. It thinks you're trying to call a regular function.

With `new` ✅

const ram = new Student();  // ✅ This works!

The new keyword tells JavaScript:

"I want to create a brand new object based on this class."

⚙️ What Does `new` Actually Do?

When you use new Student(), JavaScript performs three important steps:

📦 Creates an empty object
🔗 Links it to the Student class (so it knows what properties/methods it should have)
✅ Returns the new object (and stores it in your variable)

🍪 A Real-World Analogy

Concept	Real-World Equivalent
Class	Cookie cutter 🍪
`new`	Pressing the cutter into dough
Object	The actual cookie you can eat

You can use the same cookie cutter (class) to make many cookies (objects), but each cookie is separate and can have different decorations (data).

📋 Quick Reference

Concept	What It Is	Example
Class	Blueprint/Template	`class Student { }`
Object	Actual instance with data	`const ram = new Student()`
`new`	Keyword to create objects	`new Student()`

🔑 Key Takeaways

✅ One class can create many objects
✅ Each object has its own independent data
✅ The new keyword is required to create objects from a class

💻 Complete Example

Here's everything together:

// 1️⃣ Define the blueprint
class Student {
  name;
  age;
  gender;
}

// 2️⃣ Create objects using 'new'
const ram = new Student();
ram.name = "Ram";
ram.age = 10;
ram.gender = "Male";

const sita = new Student();
sita.name = "Sita";
sita.age = 9;
sita.gender = "Female";

// 3️⃣ Use the data
console.log(ram.name);   // Ram
console.log(sita.age);   // 9

// 4️⃣ Each object is independent
ram.age = 11;            // Only changes ram's age
console.log(ram.age);    // 11
console.log(sita.age);   // Still 9 👍

Tags: #JavaScript #WebDevelopment #Programming #OOP #Beginners #LearnToCode

DEV Community: Nabin Kandel

A Quick Setup for NestJS 11 + Prisma 7 + PostgreSQL backend in seconds.

🚀 Create Quick Nest

✨ Features

📦 Generated Stack

⚡ Quick Setup: Database to Development

1️⃣ Create Project

2️⃣ Configure Database

3️⃣ Generate Prisma Client & Run Migrations

4️⃣ Start Development Server

🗄️ What Happens Behind the Scenes

🗄️ Prisma v7 & Database

Included Database Features

Common Database Commands

📁 Project Structure

🔐 Included Features

Authentication

Database

Todo Module (Example)

📡 API Endpoints

☁️ Deployment

📋 System Requirements

🎯 Perfect For

🛠 Local Development

Clone & Setup

Run Locally

Force Overwrite

🌱 Extensible Foundation

📦 Package

📝 License

🚀 NestJS + Prisma V7 + Vercel Starter

✨ What's included

⚡ Quick Setup

☁️ Deploy to Vercel

📡 API Endpoints

📁 Project Structure

💡 Notes

Building a NestJS + Prisma + Vercel Serverless API :quick setup

NestJS + Prisma + Vercel Starter

Why Prisma v6?

Quick Setup

Deploy to Vercel

API Endpoints

Project Structure

Notes

Build a Tiny NestJS Todo App: The Minimal MVC Approach

📁 The Project Structure

Step 1: Define the Data Shape (DTO)

Step 2: The Service (Business Logic)

Step 3: The Controller (Routes)

Step 4: The Module

Step 5: The Entry Point

🧪 Let's Test It!

1. ➕ Create a Todo

2. 📋 Get All Todos

3. ❌ Delete a Todo

🎉 Conclusion

🚀 React + Vite + Tailwind CSS + Shadcn UI Setup (vanillaJS)

🧩 Step 1: Create a Vite + React Project

🌀 Step 2: Install Dependencies

🎨 Step 3: Configure vite.config.js

🔍 Why This Matters:

⚙️ Step 4: Create jsconfig.json for Editor Support

💡 Benefits:

🪄 Step 5: Import Tailwind in Your CSS

🌈 Step 6: Initialize Shadcn UI

💻 Step 7: Test Your Setup

✅ Final Project Structure

🛠️ Troubleshooting Quick Fixes

🧪 Bonus: Add a Dark Mode Toggle (Optional)

🔗 Helpful Resources

🎯 Key Takeaways

⚡️ Complete Setup Guide: Expo + NativeWind (2026 Edition)

📋 Prerequisites

🧱 Step 1: Create and Initialize Project

🔁 Step 2: Reset the Project (Optional Cleanup)

🌿 Step 3: Install NativeWind & Dependencies

🌀 Step 4: Initialize Tailwind

⚙️ Step 5: Update tailwind.config.js

🎨 Step 6: Create app/globals.css

🎨 Step 3: Configure `vite.config.js`

⚙️ Step 4: Create `jsconfig.json` for Editor Support

⚙️ Step 5: Update `tailwind.config.js`

🎨 Step 6: Create `app/globals.css`

🧠 Step 7: Configure Babel — `babel.config.js`

📘 Step 9: Add TypeScript Support — `nativewind-env.d.ts`

📂 Step 10: Update `app/_layout.tsx`

🧱 Step 11: Example Screen — `app/index.tsx`

JavaScript Classes & the `new` Keyword: A Beginner's Guide to OOP 🎯

❓ Why Do We Need the `new` Keyword?

Without `new` ❌

With `new` ✅

⚙️ What Does `new` Actually Do?