Earthmoving Solution Limited — Web Application & Machinery Portal

Earthmoving Solution Limited — Web Application & Machinery Portal

Project Overview

A full-stack enterprise web application and heavy construction machinery platform developed for Earthmoving Solution Limited (EMSL). The platform combines a modern industrial corporate website with a database-driven machinery catalog, technical product information, quotation workflow, and a dedicated administrative portal.

Designed as a scalable business platform rather than a static corporate website, the system enables EMSL to centrally manage machinery, brands, categories, technical specifications, media assets, FAQs, SEO metadata, and website configuration through a secure internal management interface.

Key Features

• Dynamic heavy machinery catalog with real-time search, filtering, pagination, and categorized browsing
• Detailed machinery pages with technical specifications, product highlights, rich descriptions, FAQs, related equipment, and quotation actions
• Product quotation workflow with product information automatically passed into the inquiry form
• Custom EMSL administrative portal for centralized content and catalog management
• Product, brand, category, and subcategory management with publishing and archival controls
• Rich-text technical content management powered by Tiptap
• Dynamic technical specification builder for structured equipment data
• Internal media asset library with MongoDB GridFS-based file storage and streaming
• Secure administrator authentication using JWT sessions, HTTP-only secure cookies, and bcrypt password hashing
• Database backup and restore functionality covering products, brands, categories, media metadata, and site settings
• Live database health metrics and administrator security settings
• Dynamic SEO metadata, OpenGraph configuration, and Schema.org JSON-LD structured data
• Interactive Three.js/WebGL 3D excavator experience integrated into the homepage
• Responsive industrial design system implemented with Tailwind CSS
• Accessibility-focused interface with keyboard navigation, text resizing, contrast controls, reading assistance, motion controls, and voice-based screen reading support
• On-demand Next.js route revalidation to reflect administrative content changes across the public website

Technology Stack

Frontend & Application

• Next.js 16 (App Router)
• React 19
• TypeScript 5
• Tailwind CSS v4

Backend & Data

• MongoDB
• Mongoose 9
• REST API architecture
• MongoDB GridFS for media storage

Authentication & Security

• JWT authentication
• jose
• HTTP-only secure session cookies
• bcrypt password hashing

Interactive & Content

• Three.js / WebGL
• Tiptap rich-text editor
• Lucide React
• Custom SVG components

SEO & Accessibility

• Dynamic metadata
• OpenGraph support
• Schema.org JSON-LD structured data
• WCAG-oriented accessibility features
• Keyboard and assistive interaction support

Engineering Highlights

The application was architected around a shared MongoDB-backed data layer connecting the public-facing platform with the internal EMSL Portal. REST API endpoints provide structured operations for authentication, products, categories, brands, media, settings, and database management.

The catalog management system supports structured product data, technical specifications, rich descriptions, SEO metadata, OpenGraph assets, FAQs, media galleries, publishing states, and content preview workflows. This provides the business with a centralized system for maintaining and publishing its machinery inventory.

The administrative portal also includes operational features such as database export and restoration, administrator password management, live database metrics, and configurable public catalog behavior.

Project Scope

Public Platform

• Corporate website
• Machinery catalog
• Product detail pages
• Services and technical support sections
• Infrastructure project showcase
• Brand and partner profiles
• Contact and quotation workflow

Administrative Platform

• Secure administrator portal
• Machinery catalog management
• Brand and category management
• Media asset management
• SEO and content controls
• Database backup and restore
• System and security settings

Portfolio Summary

Role: Full-Stack Web Developer
Type: Enterprise Web Application / Machinery Management Platform
Architecture: Database-driven full-stack application
Core Technologies: Next.js, React, TypeScript, Tailwind CSS, MongoDB, Mongoose, Three.js