Jabar Builders

A construction company website.Admin can add, edit and delete projects and users can view projects and contact the company.

Next.js · Tailwind CSS · Next.js API Routes · MongoDB · Vercel · Resend

Live site

The approach

I used Next.js with Tailwind CSS on the frontend and MongoDB for the database and Next js Inbuilt API routes. I also used Vercel for hosting and Resend for email integration.

Architecture


    // Architecture Overview
    ├── /docs                # Documentation
    ├── /public              # Public assets
    ├── /src
    │   ├── /app              # App routes
    │   │   ├── /api              # API routes
    │   │   ├── /(main)           # Main public routes
    │   │   ├── /(admin)          # Admin dashboard routes
    │   ├── /components      # Reusable UI components
    │   ├── /config          # Config for the project   
    │   ├── /hooks           # Hooks for the project
    │   ├── /lib             # Lib for the project
    │   ├── /models          # Models for the project
    │   ├── /types           # Types for the project
    │   └── /middleware.ts   # Middleware for the project

What it moved

Achieved 300ms average page load time (95th percentile under 1.2s)
Admin can add, edit and delete projects and testimonials
Users can view projects and contact the company
Animations and transitions are used to make the website more engaging