
Tech Stack
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.


SSR & Async Data Loading
Server-side rendered home page optimized for SEO, featuring realistic asynchronous loading states with skeleton screens.




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

