Passion Project
Python Django Harwoods-inspired Website
A full-stack Django car marketplace inspired by the UX, layout, and interaction patterns of premium automotive dealerships such as Harwoods.
Year :
2026
Industry :
Automotive
Client :
Harwoods
Project Duration :
2 weeks (Ongoing)
Overiew
This project is a full-stack Django e-commerce prototype built as a passion project to bring my Harwoods Homepage UX/UI Redesign to life in code. The goal was to move beyond static design and explore how real-world dealership UX patterns translate into scalable data models, templates, and interactions.
It represents my first publicly shipped coding project and focuses on building a realistic, production-style car retail experience, rather than a simplified demo store.
Project Objectives:
UX concept to working product
Translate a high-fidelity UX concept into a functioning, data-driven web application.
UX-led system thinking
Explore how design decisions influence data models, filtering logic, and overall application structure.
End-to-end delivery
Build, deploy, and maintain a live project to better understand real production constraints and workflows.
Actions i took:
Designed and structured a relational data model for brands, products, categories, tags, and pricing states.
Built reusable Django templates to mirror Harwoods-style layouts and UI patterns
Deployed and maintained the project live, resolving real production issues around media, static files, and environment config
Key features expolored:
Brand-led browsing
brand tiles allow users to explore inventory by specific brand, reflecting real browsing behaviour and clean URL and query logic.
Filtering & sorting
Products can be filtered by brand, sale status, and price range, with multiple sorting options .
product listing cards
Listing cards combine imagery, pricing, tags, and dual CTAs, balancing visual hierarchy with flexible templates.
Detailed product pages
Each product has a dedicated detail page with gallery layout, pricing logic, finance-style panels, and clear conversion-focused CTAs.
Pricing states & logic
Standard and sale pricing are handled consistently across listings and PDPs, avoiding duplicated logic and improving maintainability.
Content management
All products, brands, categories, tags, and images are managed via Django Admin, supporting realistic content workflows.
Using MS Powershell to: locally structure files , install libraries, add/move items, and push to remote repo
Actions i took:
Writing coding on VS Code and inspecting the output via browser inspect:
Actions i took:
Tech Stack i used
Django (Python)
HTML, CSS, Bootstrap
SQLite / PostgreSQL
Render
Figma
Git & GitHub
Before: Figma handover with annotated components, breakpoints, and interaction intent, designed to mirror real automotive retail patterns.
After: A live Django application where those design decisions are expressed through models, views, templates, and real user interactions.
Project Structure:
ecom/ ├── manage.py ├── store/ │ ├── models.py # Product, Brand, Category, Tag, Order │ ├── views.py # Home, Cars, Product views │ ├── urls.py # App routing │ ├── admin.py # Admin registrations │ └── templates/ │ ├── base.html │ ├── home.html │ ├── cars.html │ ├── product.html │ └── navbar.html ├── static/ │ ├── css/styles.css │ └── assets/ └── media/ └── uploads
ecom/ ├── manage.py ├── store/ │ ├── models.py # Product, Brand, Category, Tag, Order │ ├── views.py # Home, Cars, Product views │ ├── urls.py # App routing │ ├── admin.py # Admin registrations │ └── templates/ │ ├── base.html │ ├── home.html │ ├── cars.html │ ├── product.html │ └── navbar.html ├── static/ │ ├── css/styles.css │ └── assets/ └── media/ └── uploads
ecom/ ├── manage.py ├── store/ │ ├── models.py # Product, Brand, Category, Tag, Order │ ├── views.py # Home, Cars, Product views │ ├── urls.py # App routing │ ├── admin.py # Admin registrations │ └── templates/ │ ├── base.html │ ├── home.html │ ├── cars.html │ ├── product.html │ └── navbar.html ├── static/ │ ├── css/styles.css │ └── assets/ └── media/ └── uploads
Challenges :
One of the biggest challenges was managing the transition from a static, design-led mindset to a dynamic, system-driven one. Decisions that felt simple in Figma (such as filters, pricing states, or reusable components) required careful planning in data modelling and querying once implemented in Django.
Deployment introduced its own learning curve, particularly around handling static and media files across local and production environments, which surfaced issues that don’t exist in purely front-end or design-only work. Balancing visual fidelity with maintainable, scalable code was an ongoing consideration, especially as features evolved and requirements became more realistic.
Result :
Live Site
This project is an ongoing, evolving build rather than a finished product. It currently functions as a live, e-commerce prototype with limited navigation that demonstrates how UX thinking can scale into real app logic.
As development continues, the focus remains on refining interactions, improving responsiveness, and closing the gap between the original UX redesign and the implemented experience.
Next Steps:
Responsiveness
Continue improving mobile and tablet layouts to ensure key interactions match the intent and clarity of the original UX designs across all breakpoints.
Expanding page depth & content
Add additional sections to the homepage and product detail pages, including richer supporting content and secondary information that enhances trust, context, and conversion.
UI design & feature polish
Refine existing features and interaction details so they more closely align with the Harwoods UI redesign, ensuring consistency in spacing, hierarchy, micro-interactions, and component behaviour.
More Projects
Passion Project
Python Django Harwoods-inspired Website
A full-stack Django car marketplace inspired by the UX, layout, and interaction patterns of premium automotive dealerships such as Harwoods.
Year :
2026
Industry :
Automotive
Client :
Harwoods
Project Duration :
2 weeks (Ongoing)
Overiew
This project is a full-stack Django e-commerce prototype built as a passion project to bring my Harwoods Homepage UX/UI Redesign to life in code. The goal was to move beyond static design and explore how real-world dealership UX patterns translate into scalable data models, templates, and interactions.
It represents my first publicly shipped coding project and focuses on building a realistic, production-style car retail experience, rather than a simplified demo store.
Project Objectives:
UX concept to working product
Translate a high-fidelity UX concept into a functioning, data-driven web application.
UX-led system thinking
Explore how design decisions influence data models, filtering logic, and overall application structure.
End-to-end delivery
Build, deploy, and maintain a live project to better understand real production constraints and workflows.
Actions i took:
Designed and structured a relational data model for brands, products, categories, tags, and pricing states.
Built reusable Django templates to mirror Harwoods-style layouts and UI patterns
Deployed and maintained the project live, resolving real production issues around media, static files, and environment config
Key features expolored:
Brand-led browsing
brand tiles allow users to explore inventory by specific brand, reflecting real browsing behaviour and clean URL and query logic.
Filtering & sorting
Products can be filtered by brand, sale status, and price range, with multiple sorting options .
product listing cards
Listing cards combine imagery, pricing, tags, and dual CTAs, balancing visual hierarchy with flexible templates.
Detailed product pages
Each product has a dedicated detail page with gallery layout, pricing logic, finance-style panels, and clear conversion-focused CTAs.
Pricing states & logic
Standard and sale pricing are handled consistently across listings and PDPs, avoiding duplicated logic and improving maintainability.
Content management
All products, brands, categories, tags, and images are managed via Django Admin, supporting realistic content workflows.
Using MS Powershell to: locally structure files , install libraries, add/move items, and push to remote repo
Actions i took:
Writing coding on VS Code and inspecting the output via browser inspect:
Actions i took:
Tech Stack i used
Django (Python)
HTML, CSS, Bootstrap
SQLite / PostgreSQL
Render
Figma
Git & GitHub
Before: Figma handover with annotated components, breakpoints, and interaction intent, designed to mirror real automotive retail patterns.
After: A live Django application where those design decisions are expressed through models, views, templates, and real user interactions.
Project Structure:
ecom/ ├── manage.py ├── store/ │ ├── models.py # Product, Brand, Category, Tag, Order │ ├── views.py # Home, Cars, Product views │ ├── urls.py # App routing │ ├── admin.py # Admin registrations │ └── templates/ │ ├── base.html │ ├── home.html │ ├── cars.html │ ├── product.html │ └── navbar.html ├── static/ │ ├── css/styles.css │ └── assets/ └── media/ └── uploads
ecom/ ├── manage.py ├── store/ │ ├── models.py # Product, Brand, Category, Tag, Order │ ├── views.py # Home, Cars, Product views │ ├── urls.py # App routing │ ├── admin.py # Admin registrations │ └── templates/ │ ├── base.html │ ├── home.html │ ├── cars.html │ ├── product.html │ └── navbar.html ├── static/ │ ├── css/styles.css │ └── assets/ └── media/ └── uploads
ecom/ ├── manage.py ├── store/ │ ├── models.py # Product, Brand, Category, Tag, Order │ ├── views.py # Home, Cars, Product views │ ├── urls.py # App routing │ ├── admin.py # Admin registrations │ └── templates/ │ ├── base.html │ ├── home.html │ ├── cars.html │ ├── product.html │ └── navbar.html ├── static/ │ ├── css/styles.css │ └── assets/ └── media/ └── uploads
Challenges :
One of the biggest challenges was managing the transition from a static, design-led mindset to a dynamic, system-driven one. Decisions that felt simple in Figma (such as filters, pricing states, or reusable components) required careful planning in data modelling and querying once implemented in Django.
Deployment introduced its own learning curve, particularly around handling static and media files across local and production environments, which surfaced issues that don’t exist in purely front-end or design-only work. Balancing visual fidelity with maintainable, scalable code was an ongoing consideration, especially as features evolved and requirements became more realistic.
Result :
Live Site
This project is an ongoing, evolving build rather than a finished product. It currently functions as a live, e-commerce prototype with limited navigation that demonstrates how UX thinking can scale into real app logic.
As development continues, the focus remains on refining interactions, improving responsiveness, and closing the gap between the original UX redesign and the implemented experience.
Next Steps:
Responsiveness
Continue improving mobile and tablet layouts to ensure key interactions match the intent and clarity of the original UX designs across all breakpoints.
Expanding page depth & content
Add additional sections to the homepage and product detail pages, including richer supporting content and secondary information that enhances trust, context, and conversion.
UI design & feature polish
Refine existing features and interaction details so they more closely align with the Harwoods UI redesign, ensuring consistency in spacing, hierarchy, micro-interactions, and component behaviour.
More Projects
Passion Project
Python Django Harwoods-inspired Website
A full-stack Django car marketplace inspired by the UX, layout, and interaction patterns of premium automotive dealerships such as Harwoods.
Year :
2026
Industry :
Automotive
Client :
Harwoods
Project Duration :
2 weeks (Ongoing)
Overiew
This project is a full-stack Django e-commerce prototype built as a passion project to bring my Harwoods Homepage UX/UI Redesign to life in code. The goal was to move beyond static design and explore how real-world dealership UX patterns translate into scalable data models, templates, and interactions.
It represents my first publicly shipped coding project and focuses on building a realistic, production-style car retail experience, rather than a simplified demo store.
Project Objectives:
UX concept to working product
Translate a high-fidelity UX concept into a functioning, data-driven web application.
UX-led system thinking
Explore how design decisions influence data models, filtering logic, and overall application structure.
End-to-end delivery
Build, deploy, and maintain a live project to better understand real production constraints and workflows.
Actions i took:
Designed and structured a relational data model for brands, products, categories, tags, and pricing states.
Built reusable Django templates to mirror Harwoods-style layouts and UI patterns
Deployed and maintained the project live, resolving real production issues around media, static files, and environment config
Key features expolored:
Brand-led browsing
brand tiles allow users to explore inventory by specific brand, reflecting real browsing behaviour and clean URL and query logic.
Filtering & sorting
Products can be filtered by brand, sale status, and price range, with multiple sorting options .
product listing cards
Listing cards combine imagery, pricing, tags, and dual CTAs, balancing visual hierarchy with flexible templates.
Detailed product pages
Each product has a dedicated detail page with gallery layout, pricing logic, finance-style panels, and clear conversion-focused CTAs.
Pricing states & logic
Standard and sale pricing are handled consistently across listings and PDPs, avoiding duplicated logic and improving maintainability.
Content management
All products, brands, categories, tags, and images are managed via Django Admin, supporting realistic content workflows.
Using MS Powershell to: locally structure files , install libraries, add/move items, and push to remote repo
Actions i took:
Writing coding on VS Code and inspecting the output via browser inspect:
Actions i took:
Tech Stack i used
Django (Python)
HTML, CSS, Bootstrap
SQLite / PostgreSQL
Render
Figma
Git & GitHub
Before: Figma handover with annotated components, breakpoints, and interaction intent, designed to mirror real automotive retail patterns.
After: A live Django application where those design decisions are expressed through models, views, templates, and real user interactions.
Project Structure:
ecom/ ├── manage.py ├── store/ │ ├── models.py # Product, Brand, Category, Tag, Order │ ├── views.py # Home, Cars, Product views │ ├── urls.py # App routing │ ├── admin.py # Admin registrations │ └── templates/ │ ├── base.html │ ├── home.html │ ├── cars.html │ ├── product.html │ └── navbar.html ├── static/ │ ├── css/styles.css │ └── assets/ └── media/ └── uploads
ecom/ ├── manage.py ├── store/ │ ├── models.py # Product, Brand, Category, Tag, Order │ ├── views.py # Home, Cars, Product views │ ├── urls.py # App routing │ ├── admin.py # Admin registrations │ └── templates/ │ ├── base.html │ ├── home.html │ ├── cars.html │ ├── product.html │ └── navbar.html ├── static/ │ ├── css/styles.css │ └── assets/ └── media/ └── uploads
ecom/ ├── manage.py ├── store/ │ ├── models.py # Product, Brand, Category, Tag, Order │ ├── views.py # Home, Cars, Product views │ ├── urls.py # App routing │ ├── admin.py # Admin registrations │ └── templates/ │ ├── base.html │ ├── home.html │ ├── cars.html │ ├── product.html │ └── navbar.html ├── static/ │ ├── css/styles.css │ └── assets/ └── media/ └── uploads
Challenges :
One of the biggest challenges was managing the transition from a static, design-led mindset to a dynamic, system-driven one. Decisions that felt simple in Figma (such as filters, pricing states, or reusable components) required careful planning in data modelling and querying once implemented in Django.
Deployment introduced its own learning curve, particularly around handling static and media files across local and production environments, which surfaced issues that don’t exist in purely front-end or design-only work. Balancing visual fidelity with maintainable, scalable code was an ongoing consideration, especially as features evolved and requirements became more realistic.
Result :
Live Site
This project is an ongoing, evolving build rather than a finished product. It currently functions as a live, e-commerce prototype with limited navigation that demonstrates how UX thinking can scale into real app logic.
As development continues, the focus remains on refining interactions, improving responsiveness, and closing the gap between the original UX redesign and the implemented experience.
Next Steps:
Responsiveness
Continue improving mobile and tablet layouts to ensure key interactions match the intent and clarity of the original UX designs across all breakpoints.
Expanding page depth & content
Add additional sections to the homepage and product detail pages, including richer supporting content and secondary information that enhances trust, context, and conversion.
UI design & feature polish
Refine existing features and interaction details so they more closely align with the Harwoods UI redesign, ensuring consistency in spacing, hierarchy, micro-interactions, and component behaviour.