Skip to content

Autoshkolla PEPA

Industry
Driving school · Tiranë, Albania
Category
Interactive Website / Custom Web Platform
Platform
Next.js, React, TypeScript
Status
Private platform — shown from a local build
autoshkolla pepa — local build
Autoshkolla PEPA homepage hero with the interactive 3D car

Overview

A complete platform for a driving school: an interactive 3D website, online registration, and portals for students, instructors and the owner.

Autoshkolla PEPA runs on schedules: theory classes, driving lessons, instructors, cars, payments and exams. We built one platform that handles all of it — and a public website that makes the school impossible to scroll past.

The website is led by a real-time 3D Ford that visitors can turn and inspect, supported by custom Blender-rendered illustrations. Behind it sits a full web application with role-based portals and a scheduler that refuses clashing lessons before they happen.

The challenge

The challenge

A driving school coordinates students, instructors, cars, lessons, payments and exams at once. Managing that by phone and paper creates clashes and lost information — and a generic website does nothing to stand out in a crowded local market.

Objectives

  1. 01A public website that makes the school memorable
  2. 02Online registration instead of paperwork
  3. 03One place for students to follow their progress
  4. 04Scheduling that prevents clashes between instructors, cars and students

Strategy & approach.

  1. 01 — Strategy & approach

    We split the project into a striking public website and a private platform sharing one design language — so the experience feels continuous from the first visit to the day of the exam.

  2. 02 — Design

    The public site is built around a real-time 3D car and a family of custom Blender illustrations. The portals use the same palette with a calmer, data-first layout tuned for daily use by students, instructors and the owner.

  3. 03 — Technical implementation

    Next.js and TypeScript with React Three Fiber for the 3D scenes, PostgreSQL with Prisma for data, and role-based portals. The scheduler checks instructor, car and student availability before a lesson can be saved and suggests free slots instead.

On desktop

“Why us” section with a rotating 3D steering wheel rendered in Blender
Five-step journey to a driving licence with a 3D dashboard illustration
Car showcase with a manual or automatic choice and the 3D Ford from the side

What we built

What we built.

  1. 01

    Interactive 3D car

    A real-time Ford in WebGL that visitors can drag through 360°, with view presets — tuned to each device’s performance.

  2. 02

    Custom 3D illustrations

    Every illustration on the site — steering wheel, shield, stopwatch, licence card, road signs — is modelled and rendered in Blender.

  3. 03

    Online registration

    A four-step enrolment wizard — category, personal details, documents, confirmation — including the choice of a manual or automatic car.

  4. 04

    Student portal

    Students see their schedule, practical-training progress, payments, documents and exam steps in one place.

  5. 05

    Instructor & admin dashboards

    Instructors manage their lessons; the owner manages students, the calendar, payments, registrations and settings.

  6. 06

    Clash-free scheduling

    A lesson can’t be saved if the instructor, the car or the student is already booked — the scheduler flags the clash and suggests free slots instead.

  7. 07

    Bilingual & search-ready

    Albanian and English on separate URLs, with structured data, sitemaps and a unique title for every page.

Blender · Three.js

Every 3D object, made for this site.

  • Blender render of a steering wheel and car key
  • Blender render of four road signs: give way, stop, pedestrian crossing and a 50 limit
  • Blender render of a category B driving licence and a car key
  • Blender render of a small road diorama with a crossing, traffic light, cone and sign
  • Blender render of a shield with a check mark
  • Blender render of a car dashboard
  • Blender render of a manual gear stick
  • Blender render of an automatic gear selector

On mobile

Designed for the phone first.

  • Autoshkolla PEPA homepage with the 3D car on a phone

  • “Why us” section with a 3D shield on a phone

  • Licence category cards on a phone

  • Registration wizard on a phone

Full registration wizard: choosing a licence category and training type
Portal sign-in page for students, instructors and staff
Theory section with 3D road signs and a practice-question panel
Course cards for licence categories A, B and C with prices
Inline registration widget with category and gearbox selection
Training section showing theory, practice, practice tests and progress
Autoshkolla PEPA homepage in English

Built with

Built with

  • Next.js
  • React
  • TypeScript
  • Three.js
  • React Three Fiber
  • Blender
  • PostgreSQL
  • Prisma
  • Tailwind CSS
  • Motion

PEPA is a private platform that is not public yet. Screens are captured from a local build; phone numbers are blurred.

Related work

Next project — 03

VoltGuard AI

AI Platform / Web Dashboard & Mobile App