CASE

Case Study / 03

Cookie

React + TypeScript admin dashboard starter with i18n (EN/AR), RTL/LTR, theming, auth, and charts.

Role

Software Engineer — developed the full app from scratch

Stack

React / TypeScript / Vite / Tailwind / shadcn/ui / Radix UI / Zustand / React Router v6 / TanStack Query / i18next / React Hook Form / Zod / Recharts / Lightweight Charts / Framer Motion

Live

Visit

00 / Live

Preview

New Tab

The interactive preview has been closed to save resources.

Or Open In New Tab

Context & Challenge

Teams needed a reusable foundation to ship admin dashboards faster, with built-in authentication, theming, and multilingual (EN/AR) RTL support.

Approach

Created a modular starter with protected routes, persistent theme/language settings, reusable components, and chart abstractions ready for real product data.

Key Features

01Public website + protected admin area
02Auth guard + token persistence (cookies)
03Light/Dark/System theme with persistence
04English/Arabic with RTL/LTR switching
05Dashboard pages (Analytics, E-commerce, Overview)
06Products management (add/edit/list) with validation
07Chart library (area/bar/line/candlestick) with factory pattern
08Component showcase pages for rapid UI building

Technical Decisions

Used TanStack Query for server-state fetching/caching and React Router v6 for scalable routing with protected routes, plus Zustand for lightweight global state. Implemented i18next with RTL/LTR layout switching to support Arabic-first UX.

Key Learnings

Strengthened patterns for scalable dashboard architecture (providers, feature modules, reusable UI), plus practical RTL design considerations and building chart abstractions for consistent analytics UIs.

Continue