Backend and data
Built the Django REST API and PostgreSQL models for categories, products, automotive applications, orders, and order items.
Back to portfolio
Case study · Automotive commerce
First Group
An automotive catalogue and ordering platform implemented across a Django REST API, bilingual Next.js web application, and Expo/React Native mobile application.
UI/UX supplied · Software implementation by Ahmed Elsayed
Visit live website- Role
- Full-Stack Developer
- Scope
- Backend, web, and mobile
- Languages
- Arabic and English
- Status
- Public website live
Overview
One product system, implemented across every software layer.
First Group needed a digital product for presenting automotive filters and connecting product information with the vehicles and manufacturers each filter supports.
Working from UI/UX designs supplied by another person, I implemented the software end to end: the data model and REST API, the bilingual web interface, and the mobile product and ordering experience.
My contribution
Complete implementation from supplied UI/UX to working product.
Bilingual web application
Implemented the Next.js and TypeScript interface with Arabic/English routing, RTL support, authentication, search, catalogue, and cart state.
Mobile application
Built the Expo and React Native application for accounts, product discovery, categories, search, cart, checkout, and order submission.
System integration
Connected the web and mobile clients to the shared API, including session refresh, product media, and ordering workflows.
Architecture
A shared product API serving web and mobile experiences.
The implementation separates the product interfaces from the Django REST backend while keeping catalogue and order data in PostgreSQL.
Next.js 14 · TypeScript · next-intl · Redux Toolkit
Django 5.1 · Django REST Framework · JWT/Djoser
PostgreSQL · products · applications · orders
Expo · React Native · Expo Router · RTK Query
Product model
Catalogue data reflects how automotive products are selected.
Products belong to categories and include application records that connect a product with manufacturer and vehicle-use information. Orders preserve a separate set of order items linked to products.
CategoryProduct
ProductAutomotive application
OrderOrder item
Order itemProduct
Product journey
The same core workflow is available from web and mobile.
- 01
Discover
Browse categories or search product names.
- 02
Evaluate
Open product details and review automotive applications.
- 03
Select
Add products and manage quantities in the cart.
- 04
Order
Provide delivery details and submit the order through the API.
Implementation decisions
Technical decisions visible in the working implementation.
Shared REST API
Both clients use the same catalogue, authentication, and ordering backend.
URL-based localization
The web application gives Arabic and English their own locale routes and document direction.
Client-specific sessions
The web client uses credentialed cookie-based JWT requests; the mobile client persists and refreshes tokens locally.
Reusable product relationships
Automotive applications are modeled separately from products so each product can carry multiple usage records.
Verified outcome
A public bilingual product backed by complete web, API, and mobile implementations.
The public website is live, and the implementation repositories contain the backend, web, and mobile application code. Quantitative traffic, order, revenue, and performance outcomes are not available, so none are claimed here.
Technology used
- Python
- Django
- Django REST Framework
- PostgreSQL
- Next.js
- TypeScript
- React
- Redux Toolkit
- Expo
- React Native
Have a product that needs web, API, and mobile delivery?