Design and development of a platform for buying and selling new and used cars (Capila Car City)
The Capila Car City project was designed and built by the Karzaan software team to create a trusted, secure and user-friendly online marketplace for buying and selling new and used cars. As a bridge between sellers (dealerships and private owners) and car buyers, the platform needed a combination of a smooth user experience, ultra-fast performance, strong transaction security and the ability to display each car’s technical specifications accurately.
Implementation process and key technologies
1. UI/UX design and front end
- Custom design in Figma: after researching user behavior (the need for advanced filters, car comparisons and clear display of prices and vehicle history), Karzaan’s UI/UX team designed the user interface in Figma. Every element was designed to keep searching and buying to a maximum of 3 clicks.
- Built with Next.js: to guarantee high speed, strong SEO and a smooth user experience, the Next.js framework (App Router) was used. It enables server-side rendering (SSR) and static site generation (SSG), resulting in faster loading and significantly better SEO.
- Styled with Tailwind CSS: using Tailwind CSS, the user interface is fully responsive, modern and works on every device (mobile, tablet, desktop). Lightweight custom components have improved page loading by up to 45%.
2. Back end and database architecture
- A powerful admin panel built with Yii2: all management processes (user management, listing approval, transaction monitoring and reporting) are implemented with the Yii2 (PHP) framework. With its MVC architecture and built-in security features (such as protection against CSRF, XSS and SQL injection), the framework provides a secure, stable foundation for the admin panel.
- MongoDB: because car specifications vary widely (model, year, color, mileage, features and more) and the data structure needs to change dynamically, a NoSQL database (MongoDB) was used. This allows documents with varying structures to be stored, scales well and keeps complex queries fast.
- API-driven architecture: a RESTful API layer connects the front end (Next.js) and the back end for secure, fast data exchange. All requests are authenticated with JWT (JSON Web Tokens).
3. Advanced features and key modules
- Smart search engine: advanced search with multi-level filters (brand, model, year, price range, color, fuel type, mileage and more) so users can quickly find the car they want.
- Authentication and role management: users are defined at three levels (buyer, seller, admin). Sellers can post listings, which are published after admin approval.
- Internal messaging: buyers and sellers can chat directly online without sharing their contact details.
- Advanced reporting and analytics dashboard: the admin panel includes analytical charts on listings, views, user behavior and seller performance.
- Layered security: HTTPS, AES-256 data encryption, protection against brute-force attacks and rate limiting.
Results and added value
Combining a modern front end (Next.js and Tailwind CSS) with a powerful back end (Yii2 and MongoDB) has made Capila Car City an agile, fast and secure system. Key results include:
- Up to 45% faster page loading (compared with similar sites) thanks to SSR and Next.js optimizations.
- A better user experience with a smooth design and fewer steps to search and buy.
- High scalability thanks to the API-driven architecture and NoSQL database, allowing the number of users and listings to grow without performance loss.
- Advanced security for authentication, transactions and data storage.
- Strong SEO using SSR and metadata management in Next.js, leading to better visibility in Google search results.
Conclusion
The Capila Car City project demonstrates the Karzaan team’s ability to combine the latest technologies (Next.js, Tailwind CSS, Yii2 and MongoDB) to build complex, user-centered platforms. It shows how a smart choice of technical architecture can meet the needs of online businesses in the automotive industry and deliver a secure, fast and enjoyable experience for end users.
To read more about the technologies used and how such platforms are designed, see these articles on the Karzaan blog:
