← Back to web projects
Web Development • Full-Stack

Autocredit Romania

Autocredit Romania
Role
Designer & Developer
Type
Automotive Dealership
Year
2024
Platform
Responsive Web
01Overview

Used cars, listed so buyers can trust them.

Autocredit Romania is a full-stack site for a used car dealership. Buyers get transparent listings with verified badges, detailed feature lists and clean, filterable cards that work well on a phone.

Behind it, staff manage stock from an authenticated admin panel, a Node.js/Express API serves the data, and a WhatsApp button opens a chat with the dealer, pre-filled with the car’s details. Every listing has a full image gallery, structured specs and features grouped by category.

DeliverablesResponsive website, admin panel, REST API, car inventory system, contact integration
ToolsVS Code, Figma, Chrome DevTools, Postman
StackHTML • Tailwind CSS • Vanilla JS • Node.js • Express • PHP • JSON
02

Design System

Color

Primary Palette
#0A1128
#1A2640
#1F2937
#374151
#4B5563
Accent & UI
#FF6B35
#4169FF
#10B981
#F1F1F1
#FFFFFF

Typography

Inter · Primary Typeface
The quick brown fox jumps over the lazy dog
Light 300 Regular 400 Medium 500 SemiBold 600 Bold 700 Black 900

Tech Stack

Tailwind CSS
Vanilla JavaScript
Node.js
Express
PHP
HTML5
JSON API
WhatsApp Integration
03

Key Features

Dynamic Car Inventory

Cars loaded from a JSON API with real-time filtering by fuel type, transmission, body style, and price range. Each listing shows verified status, mileage, and key specs at a glance.

Rich Car Detail Pages

Full-screen image galleries with JavaScript-driven navigation, structured specs (displacement, power, transmission), and categorized feature lists split into exterior and interior.

Admin Panel (PHP)

Authenticated CRUD interface for managing the car inventory. Add, edit, and remove listings with image uploads. Protected by session-based authentication.

Glass Morphism UI

Frosted glass navigation bar with backdrop-filter blur, card hover effects with translateY lifts, and smooth image zoom transitions on the car cards.

WhatsApp Integration

Floating WhatsApp widget for instant buyer-seller communication. Messages arrive pre-filled with the car’s details, so asking about it takes one tap.

Mobile-First Responsive

Fully responsive design optimized for mobile browsing. Custom scrollbar styling, accessible focus states, and print-friendly layout with hidden navigation.

04

Page Architecture

HP
Homepage
Hero with gradient, latest cars grid, benefits section, stats counter, CTA
PA
Parc Auto (Inventory)
Full car listing with multi-criteria filters, sort options, and grid/list toggle
CD
Car Detail
Image gallery, specs table, feature lists (exterior/interior), contact CTA
CT
Contact
Contact form with validation, Google Maps embed, business info
AD
Admin Panel
PHP-authenticated CRUD for car inventory management with image uploads
05

Screenshots

Screenshots coming soon. Add images to /img/web/autocredit/

Interested in working together?

Get in Touch →