⚡ Zap-Shift | Delivery App

Zap-Shift is a fully responsive Delivery App UI built from a Figma design and implemented using ReactJS, TypeScript, and TailwindCSS v4.

This project focuses on clean architecture, reusable components, structured layouts, and scalable front-end engineering practices.

---

📌 Project Overview

Zap-Shift is a static frontend implementation of a delivery application interface.

The purpose of this project is to translate a structured Figma design into a clean, maintainable, and scalable React application using modern frontend standards.

Key Technical Pillars

• Figma-to-Code Accuracy: Structured implementation of spacing, typography, and layout hierarchy.
• Mobile-First Responsiveness: Responsive layout powered by TailwindCSS utility classes.
• Type Safety: Strict TypeScript interfaces for component props and data structures.
• Reusable Architecture: Atomic and composition-based UI components.
• Scalable Structure: Clean folder organization for long-term maintainability.

Project Scope

This project includes:

• Static UI implementation
• Structured layout abstraction
• Pixel-Perfect Design
• Reusable component system
• Centralized TypeScript types
• Responsive design system

This project does NOT include:

• Backend integration
• API connectivity
• Authentication system
• Database connection

---

🛠 Tech Stack

• ReactJS
• TypeScript (Strict Mode)
• TailwindCSS v4
• Figma (Design Source)

---

🏗️ Folder Structure

src/
├── layouts/            # Layout
├── components/         # UI components
├── shared/             # Reusable Components
├── types/              # Centralized TypeScript definitions
├── utils/              # Helper functions
├── theme/              # Design tokens & theme configuration
└── assets/             # Images, icons, static files