Designo: Multi-page Agency Website

Overview

Designo is a comprehensive multi-page website for a design agency, built as a solution to the Frontend Mentor premium challenge. This project implements a pixel-perfect design with responsive layouts and interactive features, including location mapping and form validation. The frontend is built using Next.js, TypeScript, and Tailwind CSS, focusing on delivering a seamless user experience across all devices.

Frontend: Live Site URL

Frontend Repo: Repository URL

Demo Video

Designo.mp4

Key Features

• Responsive Design: Fully responsive layouts optimized for mobile, tablet, and desktop viewports
• Interactive Maps: Integration with LeafletJS for displaying office locations
• Contact Form: Comprehensive form validation with error states and feedback
• Multi-page Layout: Consistent design system across multiple pages
• Location Pages: Interactive maps showing actual office locations
• Hover States: Interactive elements with engaging hover effects

Technologies Used

• Frontend: Next.js, TypeScript for type-safe development
• Styling: Tailwind CSS for utility-first styling
• Components: Shadcn UI for consistent design system
• Mapping: LeafletJS for interactive location maps
• Form Handling: React Hook Form with validation
• Animation: Framer Motion for smooth transitions

Challenges and Learnings

Building Designo provided valuable experience in:

• Multi-page Architecture: Creating a consistent experience across multiple pages
• Map Integration: Implementing secure and responsive map features
• Form Validation: Building robust form validation systems
• Performance: Optimizing assets and page load times

Optimizations

1. Map Implementation

   • Secure integration of LeafletJS
   • Optimized map loading and interaction
   • Responsive map containers

2. Performance

   • Implemented static generation for pages
   • Optimized asset loading and delivery
   • Efficient routing between pages

3. User Experience

   • Smooth page transitions
   • Enhanced form feedback
   • Responsive design implementations

Getting Started

Follow these steps to set up and run the Designo website locally.

Prerequisites

• Node.js 18 or higher
• npm or yarn package manager

Installation Steps

1. Clone the Repository

   git clone https://github.com/RutamBhagat/audiophile-ecom
   cd audiophile-ecom

2. Install Dependencies

   npm install
   # or
   yarn install

3. Start the Development Server

   npm run dev
   # or
   yarn dev

Outcome

Designo demonstrates the ability to build a modern, multi-page website with complex features like map integration and form validation. The project showcases responsive design principles and frontend optimization techniques while maintaining clean, maintainable code.

Screenshots