Zaika-e-Khaas

Zaika-e-Khaas is a full-stack restaurant web experience focused on clarity and trust: visitors can explore Home, About, Services, and Contact, understand the brand, and complete an order or contact form without leaving a cohesive visual system.

The interface is built with React (scaffolded with Vite for a fast dev server and lean bundles) and custom CSS for layout, typography, and responsive behavior. React Router DOM drives client-side routing so navigation feels instant while the app remains a single-page application. Submissions travel to a Node.js and Express.js backend, which exposes API routes tailored to order payloads and persists records in MongoDB, with environment variables (.env) holding the database connection string and other secrets outside the codebase.

Local restaurants often need a credible web presence that is faster to load and easier to maintain than a generic page builder template, yet still captures real leads and orders. Paper forms and unmanaged inboxes lose detail and make follow-up harder.

Zaika-e-Khaas gives the business a structured digital front door: consistent story pages, a predictable navigation model, and forms that write to a database so staff can rely on a single stream of structured submissions instead of scattered messages.

• Multi-page information architecture within an SPA: Home, About, Services, and Contact routes with shared chrome.
• Order and contact form with fields suited to restaurant use cases (customer details, request type, message or order notes as designed).
• End-to-end data path: browser form to Express API, validation on the server, then MongoDB storage for durable order and inquiry history.
• React Router DOM for declarative routes, deep links, and smooth transitions without full page reloads.
• Modular React structure (for example Navbar, Footer, Order Form, and section components) so layout and content evolve independently.
• Fully responsive CSS from mobile through desktop breakpoints.
• Environment-based configuration so database URIs and sensitive values never ship in client bundles.

Client: React with Vite as the build tool, CSS for bespoke styling, and React Router DOM for routing and SPA navigation.

Server: Node.js with Express.js, organized around explicit API routes for form submission and related operations.

Data: MongoDB for storing submitted orders and related documents; connection details loaded from .env at runtime.

Delivery: static assets and API are composed so the restaurant brand stays consistent while the backend remains a small, auditable surface for writes.

Splitting client and server during development meant handling CORS, correct API base URLs, and clear error feedback when the database was unreachable. Form payloads needed server-side validation so incomplete or malicious data never reached MongoDB as if it were trusted.

On the UI side, keeping navigation, focus management, and layout polished across breakpoints required discipline in CSS structure rather than one-off inline tweaks.

I centralized fetch calls behind small helpers or hooks so every form used the same origin configuration and error handling pattern. Express middleware validates required fields and returns consistent JSON errors the React layer can surface to users.

Mongo writes happen only after validation succeeds; sensitive configuration lives in .env and is read once on the server. Component boundaries mirror the route map so adding a new page is mostly router entries plus a view component, not a rewrite of global layout.

Zaika-e-Khaas is a focused case study in brand-first frontend work paired with a minimal but honest backend: React and Vite for speed of iteration, React Router for real SPA navigation, Express and MongoDB for persistence that matches how small teams actually operate. It shows how I deliver readable code structure, responsive UI, and server-side discipline without over-engineering a single-location restaurant site.