Back to Projects

Autolak — Automotive Services Website

Technologies:Next.js, Typescript, Tailwind CSS, Vercel
View on GitHub

Autolak

A modern, responsive website built for Autolak Ltd (The Yellow Garage), an auto electrical specialist garage in Ilford, UK. This project was developed to enhance their online presence and showcase their specialised services.

Table of Contents

Introduction

Autolak The Yellow Garage is a well-established auto electrical repair garage in Ilford, specialising in starter motors and alternators. This website was built to replace their outdated online presence with a modern, responsive site that effectively communicates their services and expertise to potential customers.

The primary goals of this project were to:

  • Create a professional, user-friendly website
  • Highlight their specialisation in auto electrical repairs
  • Make it easy for customers to contact the garage
  • Ensure mobile responsiveness for all users
  • Optimise for search engines

Features

  • Responsive Design: Fully responsive layout that works on all devices
  • Service Showcase: Detailed presentation of specialised auto electrical services
  • Testimonials: Customer reviews highlighting the quality of service
  • Contact Integration: Direct phone and WhatsApp contact options
  • FAQ Section: Comprehensive answers to common customer questions
  • About Page: Information about the garage's history and approach
  • SEO Optimised: Meta tags and structured content for better search engine visibility

Technologies Used

Next.js, React, TypeScript, Tailwind CSS, shadcn/ui, Lucide Icons and Vercel

Usage

The website is designed to be intuitive, the main sections include:

  • Home: Overview of services and direct contact options
  • Services: Detailed information about auto electrical services offered
  • About: Background information about the garage
  • FAQ: Answers to common questions

Project Structure

autolak/
├── app/                  # Next.js app directory
│   ├── about/            # About page
│   ├── faq/              # FAQ page
│   ├── services/         # Services page
│   ├── layout.tsx        # Root layout component
│   ├── page.tsx          # Home page
│   └── globals.css       # Global styles
├── components/           # Reusable React components
│   ├── ui/               # shadcn/ui components
│   ├── hero.tsx          # Hero section component
│   ├── navbar.tsx        # Navigation component
│   ├── footer.tsx        # Footer component
│   └── ...               # Other components
├── public/               # Static assets
├── tailwind.config.ts    # Tailwind CSS configuration
└── ...                   # Other configuration files

Challenges and Solutions

Challenge 1: Balancing Information Density

Problem: The client had a lot of information to convey without overwhelming users. Solution: Created a clean, hierarchical design with clear visual cues and progressive disclosure of information.

Challenge 2: Mobile Responsiveness

Problem: Ensuring the design worked well across all device sizes. Solution: Used Tailwind's responsive utilities and tested extensively on various screen sizes.

Challenge 3: Performance Optimisation

Problem: Ensuring fast load times despite visual elements. Solution: Leveraged Next.js image optimization, code splitting, and lazy loading techniques.

Challenge 4: Contact Integration

Problem: Making it easy for users to contact the garage. Solution: Implemented direct call links, WhatsApp integration and prominent display of contact information.

Key Learning

This project provided valuable experience in:

  • Building client-focused websites that balance business needs with user experience
  • Implementing SEO best practices in Next.js applications
  • Creating responsive designs that work across all devices
  • Effective use of modern UI component libraries
  • Client communication and requirement gathering

Future Enhancements

Potential future improvements include:

  • Online booking system for appointments
  • Blog section for automotive tips and advice
  • Customer portal for service history
  • Image gallery of completed repairs
  • Live chat support

License

This project is proprietary and was built for Autolak The Yellow Garage Ltd. The code is not licensed for public use or distribution.