OLX Classifieds Platform

Frontend
Web Dev
OLX Classifieds Platform

Tech Stack

Next.js
TypeScript
CSS Modules
React

Description

Developed as a technical assessment for OLX, this project replicates the core functionalities of a classifieds platform with a strong emphasis on clean code, scalability, and performance.

The standout feature is a dynamic form engine. Instead of hardcoding forms for specific categories like 'Cars' or 'Real Estate', the app dynamically generates inputs, dropdowns, and validation rules strictly based on the metadata fetched from the API.

To demonstrate a deep understanding of core web technologies, I opted out of using external UI or form libraries. Every component, custom hook (like useForm), and layout was built from scratch using pure CSS Modules, TypeScript, and Next.js SSR.

  • Engineered a dynamic form system that scales automatically to support any new category added to the API.
  • Built a custom 'useForm' hook to handle complex state management and runtime validation without relying on external libraries.
  • Developed all UI components from scratch using plain CSS Modules, ensuring scoped styling and lightweight bundles.
  • Implemented Next.js Server-Side Rendering (SSR) to improve initial load times and search engine visibility.
  • Integrated full i18n support, allowing seamless toggling between English and Arabic with automatic RTL layout shifts.

Page Info

Metadata-Driven Form Engine

A dynamic form system that renders inputs and validation rules based entirely on API responses, avoiding hardcoded category layouts.

/projects/olx-assessment/metadata-driven-form.png/projects/olx-assessment/post-add-select-category.png

SSR & Async Data Loading

Server-side rendered home page optimized for SEO, featuring realistic asynchronous loading states with skeleton screens.

/projects/olx-assessment/home-page.png/projects/olx-assessment/categories-menu.png/projects/olx-assessment/loading-skeleton.png/projects/olx-assessment/featured-adds.png

Custom UI & Internationalization

Built completely from scratch using pure CSS Modules, featuring full Arabic/English support with proper RTL layouts.

/projects/olx-assessment/multilanguage-support.png/projects/olx-assessment/login-form-with-validation.png

    Mohammad Abdulhakim - Software Engineer | Aspiring AI Engineer