DEV Community: Borifan Dabasa

# Node.js API Development: From Zero to Production

Borifan Dabasa — Sat, 17 Jan 2026 13:03:40 +0000

By Borifan Dabasa | Full Stack Developer

Building RESTful APIs with Node.js and Express has been a core part of my work as a MERN stack developer. After building APIs for e-commerce platforms, appointment systems, and crypto trackers, I've developed a solid workflow that I'm sharing today.

Why Node.js for APIs?

When I started backend development, I chose Node.js because:

JavaScript everywhere - Same language for frontend and backend
Fast and scalable - Non-blocking I/O handles thousands of requests
Rich ecosystem - npm has packages for everything
Easy deployment - Vercel, Heroku, AWS all support it

Project Setup

Here's how I start every API project:

mkdir my-api && cd my-api
npm init -y
npm install express mongoose dotenv cors
npm install -D nodemon

My package.json scripts:

{
  "scripts": {
    "start": "node server.js",
    "dev": "nodemon server.js"
  }
}

Folder Structure

my-api/
├── config/
│   └── db.js           # Database connection
├── models/             # Mongoose models
├── routes/             # API routes
├── controllers/        # Business logic
├── middleware/         # Custom middleware
├── utils/              # Helper functions
├── .env                # Environment variables
└── server.js           # Entry point

1. Setting Up Express Server

// server.js
const express = require('express');
const cors = require('cors');
const dotenv = require('dotenv');
const connectDB = require('./config/db');

dotenv.config();
connectDB();

const app = express();

// Middleware
app.use(cors());
app.use(express.json());

// Routes
app.use('/api/users', require('./routes/userRoutes'));
app.use('/api/products', require('./routes/productRoutes'));

// Error handling
app.use((err, req, res, next) => {
  console.error(err.stack);
  res.status(500).json({ message: 'Something went wrong!' });
});

const PORT = process.env.PORT || 5000;
app.listen(PORT, () => console.log(`Server running on port ${PORT}`));

2. Database Connection

// config/db.js
const mongoose = require('mongoose');

const connectDB = async () => {
  try {
    await mongoose.connect(process.env.MONGO_URI, {
      useNewUrlParser: true,
      useUnifiedTopology: true,
    });
    console.log('MongoDB Connected');
  } catch (error) {
    console.error('MongoDB connection failed:', error.message);
    process.exit(1);
  }
};

module.exports = connectDB;

3. Creating Models

// models/User.js
const mongoose = require('mongoose');

const userSchema = new mongoose.Schema({
  name: {
    type: String,
    required: [true, 'Name is required'],
    trim: true
  },
  email: {
    type: String,
    required: [true, 'Email is required'],
    unique: true,
    lowercase: true
  },
  password: {
    type: String,
    required: [true, 'Password is required'],
    minlength: 6
  },
  role: {
    type: String,
    enum: ['user', 'admin'],
    default: 'user'
  }
}, { timestamps: true });

module.exports = mongoose.model('User', userSchema);

4. Controllers Pattern

I separate business logic from routes:

// controllers/userController.js
const User = require('../models/User');

// @desc    Get all users
// @route   GET /api/users
// @access  Public
exports.getUsers = async (req, res) => {
  try {
    const users = await User.find().select('-password');
    res.json({ success: true, data: users });
  } catch (error) {
    res.status(500).json({ success: false, message: error.message });
  }
};

// @desc    Create user
// @route   POST /api/users
// @access  Public
exports.createUser = async (req, res) => {
  try {
    const { name, email, password } = req.body;

    // Check if user exists
    const userExists = await User.findOne({ email });
    if (userExists) {
      return res.status(400).json({ 
        success: false, 
        message: 'User already exists' 
      });
    }

    const user = await User.create({ name, email, password });
    res.status(201).json({ success: true, data: user });
  } catch (error) {
    res.status(400).json({ success: false, message: error.message });
  }
};

5. Routes

// routes/userRoutes.js
const express = require('express');
const router = express.Router();
const { getUsers, createUser } = require('../controllers/userController');

router.route('/')
  .get(getUsers)
  .post(createUser);

module.exports = router;

6. Authentication with JWT

// middleware/auth.js
const jwt = require('jsonwebtoken');

exports.protect = async (req, res, next) => {
  let token;

  if (req.headers.authorization?.startsWith('Bearer')) {
    token = req.headers.authorization.split(' ')[1];
  }

  if (!token) {
    return res.status(401).json({ message: 'Not authorized' });
  }

  try {
    const decoded = jwt.verify(token, process.env.JWT_SECRET);
    req.user = decoded;
    next();
  } catch (error) {
    res.status(401).json({ message: 'Token invalid' });
  }
};

// Generate token
exports.generateToken = (id) => {
  return jwt.sign({ id }, process.env.JWT_SECRET, {
    expiresIn: '30d'
  });
};

7. Input Validation

// middleware/validation.js
exports.validateUser = (req, res, next) => {
  const { name, email, password } = req.body;

  if (!name || !email || !password) {
    return res.status(400).json({ 
      message: 'Please provide all required fields' 
    });
  }

  const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
  if (!emailRegex.test(email)) {
    return res.status(400).json({ message: 'Invalid email format' });
  }

  if (password.length < 6) {
    return res.status(400).json({ 
      message: 'Password must be at least 6 characters' 
    });
  }

  next();
};

8. Error Handling

// middleware/errorHandler.js
class ErrorResponse extends Error {
  constructor(message, statusCode) {
    super(message);
    this.statusCode = statusCode;
  }
}

const errorHandler = (err, req, res, next) => {
  let error = { ...err };
  error.message = err.message;

  // Mongoose bad ObjectId
  if (err.name === 'CastError') {
    const message = 'Resource not found';
    error = new ErrorResponse(message, 404);
  }

  // Mongoose duplicate key
  if (err.code === 11000) {
    const message = 'Duplicate field value entered';
    error = new ErrorResponse(message, 400);
  }

  res.status(error.statusCode || 500).json({
    success: false,
    message: error.message || 'Server Error'
  });
};

module.exports = { ErrorResponse, errorHandler };

9. Environment Variables

# .env
NODE_ENV=development
PORT=5000
MONGO_URI=mongodb://localhost:27017/mydb
JWT_SECRET=your_jwt_secret_here

10. Real-World Example: E-Commerce API

In my e-commerce project, I built:

Product Routes:

GET    /api/products          # Get all products
GET    /api/products/:id      # Get single product
POST   /api/products          # Create product (admin)
PUT    /api/products/:id      # Update product (admin)
DELETE /api/products/:id      # Delete product (admin)

Order Routes:

POST   /api/orders            # Create order
GET    /api/orders/myorders   # Get user orders
GET    /api/orders/:id        # Get order by ID

Best Practices I Follow

Use async/await - Cleaner than callbacks
Validate input - Never trust user data
Hash passwords - Use bcrypt
Rate limiting - Prevent abuse
CORS properly - Whitelist domains
Log errors - Use Winston or Morgan
API versioning - /api/v1/users
Documentation - Use Swagger/Postman

Testing Your API

// Using Postman or curl
curl -X POST http://localhost:5000/api/users \
  -H "Content-Type: application/json" \
  -d '{"name":"Borifan","email":"test@example.com","password":"123456"}'

Deployment

I deploy my APIs on:

Vercel - Serverless functions
Heroku - Traditional hosting
Railway - Modern alternative

# Deploy to Vercel
npm i -g vercel
vercel

Performance Tips

Use indexes in MongoDB
Implement caching with Redis
Compress responses with compression middleware
Use pagination for large datasets
Optimize queries - Select only needed fields

What I'm Learning Next

GraphQL APIs
WebSocket for real-time features
Microservices architecture
Docker containerization

Resources

Questions? Reach out at dabasaborifan@gmail.com

Connect:

GitHub: @Borifan02
LinkedIn: Borifan Dabasa

NodeJS #ExpressJS #MongoDB #API #Backend #MERN

# Full Stack Development Roadmap: My Journey to MERN Stack Mastery

Borifan Dabasa — Sat, 17 Jan 2026 12:57:37 +0000

By Borifan Dabasa | Full Stack Developer & Software Engineering Student

Two years ago, I started learning web development with zero coding experience. Today, I'm a Full Stack Developer building production applications with the MERN stack. This is the roadmap I wish I had when I started.

My Story

I'm currently studying Software Engineering at Haramaya University while working as a freelance Full Stack Developer. I've built e-commerce platforms, appointment systems, and crypto trackers—all while learning on the job.

This roadmap is based on my real experience, not theory.

Phase 1: The Foundation (2-3 months)

HTML & CSS

Start here. No shortcuts.

What I learned:

Semantic HTML5 elements
CSS Flexbox and Grid
Responsive design with media queries
CSS animations and transitions

Projects I built:

Personal portfolio website
Landing pages
Clone popular websites (Netflix, Spotify)

Resources:

freeCodeCamp HTML/CSS course
CSS Tricks for Flexbox/Grid
MDN Web Docs (bookmark this!)

JavaScript Fundamentals

This is where it gets real.

Core concepts:

// Variables and data types
let name = "Borifan";
const age = 22;

// Functions
function greet(name) {
  return `Hello, ${name}!`;
}

// Arrays and objects
const skills = ['HTML', 'CSS', 'JavaScript'];
const developer = {
  name: 'Borifan',
  role: 'Full Stack Developer'
};

// ES6+ features
const numbers = [1, 2, 3];
const doubled = numbers.map(n => n * 2);

// Async/Await
async function fetchData() {
  const response = await fetch('api/data');
  const data = await response.json();
  return data;
}

What to master:

Variables, functions, loops
Arrays and objects
DOM manipulation
ES6+ features (arrow functions, destructuring, spread operator)
Promises and async/await
Fetch API

Projects:

Todo list app
Calculator
Weather app using API

Phase 2: Frontend Framework - React (2-3 months)

React changed everything for me.

React Basics

// Component
function Welcome({ name }) {
  return <h1>Hello, {name}!</h1>;
}

// State
const [count, setCount] = useState(0);

// Effect
useEffect(() => {
  document.title = `Count: ${count}`;
}, [count]);

Learn in order:

JSX syntax
Components (functional)
Props and state
Hooks (useState, useEffect)
Event handling
Conditional rendering
Lists and keys
Forms

Projects I built:

Movie search app
E-commerce product catalog
Blog with routing

Advanced React

// Custom hooks
function useLocalStorage(key, initialValue) {
  const [value, setValue] = useState(() => {
    const item = localStorage.getItem(key);
    return item ? JSON.parse(item) : initialValue;
  });

  useEffect(() => {
    localStorage.setItem(key, JSON.stringify(value));
  }, [key, value]);

  return [value, setValue];
}

// Context API
const ThemeContext = createContext();

function App() {
  const [theme, setTheme] = useState('dark');

  return (
    <ThemeContext.Provider value={{ theme, setTheme }}>
      <Dashboard />
    </ThemeContext.Provider>
  );
}

Advanced topics:

Context API
Custom hooks
React Router
Performance optimization (memo, useMemo, useCallback)
Code splitting

Phase 3: Backend - Node.js & Express (2 months)

Time to build APIs.

Node.js Basics

// server.js
const express = require('express');
const app = express();

app.use(express.json());

app.get('/api/users', (req, res) => {
  res.json({ users: [] });
});

app.listen(5000, () => {
  console.log('Server running on port 5000');
});

What to learn:

Node.js fundamentals
Express.js framework
RESTful API design
Middleware
Error handling
Authentication (JWT)

Projects:

User authentication API
Blog API with CRUD operations
File upload system

Phase 4: Database - MongoDB (1-2 months)

MongoDB with Mongoose

// User model
const userSchema = new mongoose.Schema({
  name: String,
  email: { type: String, unique: true },
  password: String,
  createdAt: { type: Date, default: Date.now }
});

const User = mongoose.model('User', userSchema);

// CRUD operations
const user = await User.create({ name, email, password });
const users = await User.find();
const user = await User.findById(id);
await User.findByIdAndUpdate(id, { name: 'New Name' });
await User.findByIdAndDelete(id);

Learn:

MongoDB basics
Mongoose ODM
Schema design
Relationships
Aggregation
Indexing

Phase 5: Full Stack Integration (1-2 months)

Connect everything together.

MERN Stack Architecture

Frontend (React)
    ↓
API Calls (Axios/Fetch)
    ↓
Backend (Express)
    ↓
Database (MongoDB)

Example: User Registration Flow

// Frontend (React)
const handleSubmit = async (e) => {
  e.preventDefault();
  const response = await fetch('http://localhost:5000/api/users', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ name, email, password })
  });
  const data = await response.json();
};

// Backend (Express)
app.post('/api/users', async (req, res) => {
  const { name, email, password } = req.body;
  const hashedPassword = await bcrypt.hash(password, 10);
  const user = await User.create({ name, email, password: hashedPassword });
  res.json({ user });
});

Projects to build:

Todo App - Full CRUD with authentication
Blog Platform - Posts, comments, likes
E-commerce - Products, cart, checkout

Phase 6: Advanced Topics (Ongoing)

TypeScript

interface User {
  id: string;
  name: string;
  email: string;
}

const getUser = async (id: string): Promise<User> => {
  const response = await fetch(`/api/users/${id}`);
  return response.json();
};

Next.js

Server-side rendering
Static site generation
API routes
File-based routing

Testing

// Jest test
test('adds 1 + 2 to equal 3', () => {
  expect(sum(1, 2)).toBe(3);
});

// React Testing Library
render(<Button onClick={handleClick}>Click me</Button>);
fireEvent.click(screen.getByText('Click me'));
expect(handleClick).toHaveBeenCalled();

My Tech Stack Today

Frontend:

React.js / Next.js
TypeScript
Tailwind CSS
React Query

Backend:

Node.js / Express.js
MongoDB / Mongoose
JWT Authentication
RESTful APIs

Tools:

Git & GitHub
VS Code
Postman
Vercel / Netlify

Real Projects I Built

E-Commerce Platform - Full MERN stack with cart, payments
Blog Website - Next.js with TypeScript
Crypto Tracker - Real-time data with Chart.js
Appointment System - React with calendar integration

Check them out: github.com/Borifan02

Learning Resources That Helped Me

Free:

freeCodeCamp
The Odin Project
MDN Web Docs
YouTube (Traversy Media, Net Ninja)

Paid:

Udacity (Programming Fundamentals)
Educative (Fullstack Developer)

Tips from My Journey

Build projects, not tutorials - I learned more from one real project than 10 tutorials
Don't get stuck in tutorial hell - Watch, code along, then build something different
Git from day one - Commit everything
Deploy early - Use Vercel, Netlify, Heroku
Read documentation - It's your best friend
Join communities - Twitter, Discord, Reddit
Don't compare - Everyone's journey is different
Consistency > Intensity - Code every day, even 30 minutes

Common Mistakes I Made

Skipping fundamentals - Went to React too fast
Not using Git properly - Lost code multiple times
Ignoring responsive design - Had to rebuild projects
Not testing - Bugs in production
Overcomplicating - Simple solutions work best

Timeline Reality Check

My actual timeline:

Month 1-3: HTML, CSS, JavaScript
Month 4-6: React.js
Month 7-8: Node.js, Express
Month 9-10: MongoDB, Full Stack projects
Month 11-12: TypeScript, Next.js
Ongoing: Learning and building

Your timeline might be different. That's okay.

What's Next for Me?

GraphQL
Docker & Kubernetes
AWS/Cloud services
System design
Contributing to open source

My Advice to Beginners

Start today. Not tomorrow. Not next week. Today.

Pick one resource, follow it completely, build projects, and deploy them. That's it.

You don't need to know everything. You need to know enough to build something, then learn as you go.

Let's Connect

I'm always happy to help fellow developers:

GitHub: @Borifan02
LinkedIn: Borifan Dabasa
Email: dabasaborifan@gmail.com

Questions? Drop a comment or reach out directly!

Remember: Every expert was once a beginner. The only difference is they didn't give up.

WebDevelopment #MERN #FullStack #JavaScript #React #NodeJS #MongoDB #CareerAdvice

Building Scalable React Applications: Lessons from Real Projects

Borifan Dabasa — Sat, 17 Jan 2026 12:47:54 +0000

By Borifan Dabasa | Full Stack Developer

As a MERN stack developer who's built multiple production applications, I've learned that writing React code is easy—writing scalable React code is an art. Today, I'm sharing the architecture patterns and best practices I use in every project.

The Problem with "Just Start Coding"

When I built my first React app, I threw everything into components without thinking about structure. Fast forward three months, and I was drowning in prop drilling, duplicate logic, and components that did way too much.

Sound familiar?

1. Folder Structure That Scales

Here's the structure I use for all my React projects now:

src/
├── components/
│   ├── common/          # Reusable UI components
│   ├── layout/          # Layout components
│   └── features/        # Feature-specific components
├── hooks/               # Custom hooks
├── context/             # Context providers
├── services/            # API calls
├── utils/               # Helper functions
├── constants/           # Constants and configs
└── pages/               # Page components

Why this works: Each folder has a single responsibility. When I need to find something, I know exactly where to look.

2. Component Composition Over Complexity

I learned this the hard way. Here's a component from my early days:

// ❌ Bad: God component doing everything
function UserDashboard() {
  const [user, setUser] = useState(null);
  const [posts, setPosts] = useState([]);
  const [loading, setLoading] = useState(true);

  // 200 lines of logic...

  return (
    <div>
      {/* 300 lines of JSX */}
    </div>
  );
}

Now I break it down:

// ✅ Good: Composed components
function UserDashboard() {
  return (
    <DashboardLayout>
      <UserProfile />
      <UserStats />
      <UserPosts />
    </DashboardLayout>
  );
}

Rule of thumb: If your component is over 150 lines, it's probably doing too much.

3. Custom Hooks for Logic Reuse

Custom hooks changed my life. Instead of copying logic between components, I extract it:

// hooks/useAuth.js
export function useAuth() {
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const unsubscribe = auth.onAuthStateChanged(setUser);
    setLoading(false);
    return unsubscribe;
  }, []);

  return { user, loading };
}

// Now use it anywhere
function Profile() {
  const { user, loading } = useAuth();

  if (loading) return <Spinner />;
  return <div>{user.name}</div>;
}

I use custom hooks for:

API calls (useFetch, useApi)
Form handling (useForm)
Local storage (useLocalStorage)
Debouncing (useDebounce)

4. State Management: Keep It Simple

I see developers reaching for Redux immediately. Here's my approach:

Local state for component-specific data
Context for app-wide data (theme, auth)
Redux/Zustand only when Context becomes messy

For my e-commerce project, I used Context for cart and auth. That's it. No Redux needed.

// context/CartContext.js
export function CartProvider({ children }) {
  const [cart, setCart] = useState([]);

  const addToCart = (item) => {
    setCart([...cart, item]);
  };

  return (
    <CartContext.Provider value={{ cart, addToCart }}>
      {children}
    </CartContext.Provider>
  );
}

5. Performance Optimization

Three techniques I use in every project:

Code Splitting

// Lazy load heavy components
const Dashboard = lazy(() => import('./pages/Dashboard'));

function App() {
  return (
    <Suspense fallback={<Loading />}>
      <Dashboard />
    </Suspense>
  );
}

Memoization

// Prevent unnecessary re-renders
const ExpensiveComponent = memo(({ data }) => {
  return <div>{/* Heavy computation */}</div>;
});

Virtual Lists

For my crypto tracker with 1000+ coins, I use react-window:

import { FixedSizeList } from 'react-window';

<FixedSizeList
  height={600}
  itemCount={coins.length}
  itemSize={50}
>
  {CoinRow}
</FixedSizeList>

6. Error Boundaries

This saved me during production bugs:

class ErrorBoundary extends Component {
  state = { hasError: false };

  static getDerivedStateFromError(error) {
    return { hasError: true };
  }

  render() {
    if (this.state.hasError) {
      return <ErrorFallback />;
    }
    return this.props.children;
  }
}

// Wrap your app
<ErrorBoundary>
  <App />
</ErrorBoundary>

7. Environment Variables

Never hardcode API URLs:

// .env
REACT_APP_API_URL=https://api.example.com
REACT_APP_API_KEY=your_key_here

// Use in code
const API_URL = process.env.REACT_APP_API_URL;

Real-World Example: My Blog Project

In my Next.js blog (live at borifan-blog.vercel.app), I implemented:

File-based routing for automatic code splitting
ISR (Incremental Static Regeneration) for fast loads
TypeScript for type safety
Tailwind CSS for consistent styling

Result? Lighthouse score of 95+ and sub-second load times.

Key Takeaways

Structure matters - Organize by feature, not file type
Compose, don't complicate - Small, focused components
Extract logic - Custom hooks are your friend
Optimize smartly - Measure before optimizing
Plan for errors - Error boundaries save production

What's Next?

I'm currently exploring:

Server Components in Next.js 14
React Query for better data fetching
Micro-frontends for large apps

Want to see these patterns in action? Check out my projects on GitHub.

Questions? Drop a comment or reach out at dabasaborifan@gmail.com

Connect with me:

GitHub: @Borifan02
LinkedIn: Borifan Dabasa

React #WebDevelopment #JavaScript #Frontend #MERN