Jabar Builders

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

The Challenge

The client needed a website for his construction company. He also needed a dashboard to manage the projects and testimonials.

Solution & 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

Key Results

↗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

Technologies Used

Next.js

Tailwind CSS

Next.js API Routes

MongoDB

Vercel

Resend

Live Demo View Code