Tel El-Kebir Guide

Tel El-Kebir Guide brings a whole city's practical information into one searchable place: shops, restaurants, doctors, pharmacies, service providers, emergency numbers and local announcements. Residents search and filter; business owners manage their own listing; an admin team reviews everything before it goes public. The interface is fully bilingual, Arabic and English.

Local information lived in social media groups, forwarded screenshots and memory. Phone numbers went stale, the same business appeared three times with different details, and nothing was searchable. The product needed to be trustworthy enough that people rely on it, fast on mid-range Android phones over mobile data, Arabic-first without treating English as an afterthought, and cheap enough to run indefinitely.

I started with the data model instead of the screens. One businesses table acts as the spine, with categories, opening hours, contacts, reviews, advertisements and analytics events hanging off it — so adding a new content type later is a migration and a page, not a rewrite. On the front end, the Next.js App Router renders directory and listing pages as server components, and client JavaScript is reserved for the parts that genuinely need it: search, filters, forms and the dashboard. Arabic and RTL were designed in the first pass, using logical CSS properties and a shared token set so both directions use the same components.

Frontend

Next.js App Router with TypeScript. Server components for read-heavy directory pages, client components only for search, filters, forms and the dashboard. Tailwind CSS with shared design tokens and logical properties for LTR/RTL.

Backend

Route handlers and server actions in the same Next.js runtime. Every mutation is validated server-side against a schema; the client re-uses the same rules for instant feedback.

Database

PostgreSQL with Drizzle ORM. The schema is TypeScript, migrations are versioned, and generated types flow straight into the API layer. Indexed search handles Arabic and English business names.

Authentication

Session-based authentication with hashed passwords and HTTP-only cookies. Roles — visitor, business owner, admin — are enforced on the server for every protected route and mutation, never in the UI alone.

API

REST-style endpoints with consistent response envelopes, cursor pagination and typed error codes, plus rate limiting on write routes and review submission.

• Next.js
• TypeScript
• React
• PostgreSQL
• Drizzle ORM
• Tailwind CSS
• Prisma
• Git
• GitHub
• Docker
• Vercel

The platform runs as a single deployable Next.js application against a managed PostgreSQL database. Listings are created and maintained by the businesses themselves and reviewed before publication, which keeps the data current without a full-time editor. Because the schema and the API share one set of types, most new features are a migration plus a page. It is the project I point to when I want to show how I structure full-stack work: typed end to end, validated on the server, and designed for the device most people actually use.