Mom's Kitchen Restaurant

Mom's Kitchen is a real, family-run restaurant that takes most of its orders by phone and WhatsApp. It needed a simple online presence that customers can find on Google, browse on their phones, and use to order in one tap - without the cost and complexity of a full ordering platform. The site presents the menu with prices and photos, the restaurant's story and services, and makes calling or messaging the kitchen the obvious next step on every page.

• Show the full menu with photos and prices, filterable by category, so customers can decide before they call.
• Make ordering effortless: one tap to WhatsApp with a pre-filled message, or to call.
• Load fast on mid-range phones and mobile data, and rank for local searches with per-page SEO.
• Present the restaurant warmly: its story, catering and event services, testimonials and location.

• Home page: hero with an "Order on WhatsApp" button, menu categories, features, services (catering, birthdays, weddings, events), an about preview and testimonials.
• Menu page: 20+ dishes with photos, prices in ₹ and descriptions, filtered by All, Starters, Fast Food and Main Dishes with animated layout transitions.
• One-tap ordering: a WhatsApp deep link with a pre-filled greeting, plus click-to-call buttons.
• About and Contact pages: the restaurant's story, contact details, opening hours and an embedded Google Map.
• Responsive navigation: a top contact bar on desktop and an animated slide-down menu on mobile.
• Per-page SEO: unique titles and meta descriptions for every page, plus a sitemap, robots.txt and llms.txt.
• Performance: lazy-loaded routes, WebP images with explicit dimensions and lazy loading, and year-long caching for static assets.

A restaurant website has very little that changes while you use it, so the state is deliberately minimal and kept as close to where it is used as possible: no global store, no context for app data. The menu lives in a typed static module, each page owns its own small piece of UI state with useState, and anything that can be calculated - like the filtered menu - is derived on render rather than stored. Page-level concerns (SEO tags, scroll position) are handled by providers and small components instead of shared state.

The store

// main.tsx - app-wide providers, no data store
createRoot(document.getElementById("root")!).render(
  <HelmetProvider>          {/* per-page <title> and meta tags */}
    <App />
  </HelmetProvider>
);

// App.tsx - routes are code-split; ScrollToTop resets scroll per page
const Menu = lazy(() => import("./pages/Menu"));

<BrowserRouter>
  <ScrollToTop />
  <Suspense fallback={null}>
    <Routes>
      <Route path="/" element={<Index />} />
      <Route path="/menu" element={<Menu />} />
      {/* ...about, contact, 404 */}
    </Routes>
  </Suspense>
</BrowserRouter>

The slices

How data flows

type Category = "all" | "starters" | "main" | "fastfoods";

const [activeCategory, setActiveCategory] = useState<Category>("all");

// Derived on every render - never stored, so it can't go stale
const filteredItems =
  activeCategory === "all"
    ? menuItems
    : menuItems.filter((item) => item.category === activeCategory);

<motion.div layout className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
  {filteredItems.map((item) => <MenuCard key={item.id} item={item} />)}
</motion.div>

export interface MenuItem {
  id: number;
  name: string;
  description: string;
  price: number;
  image: string;
  category: "starters" | "main" | "drinks" | "desserts" | "fastfoods";
}

export const menuItems: MenuItem[] = [
  {
    id: 11,
    name: "Chicken Pakoda",
    description: "Crispy deep-fried chicken bites with Indian spices.",
    price: 99,
    image: chickenPakoda,
    category: "starters",
  },
  // ...
];

const handleChatOrder = () => {
  const phoneNumber = "91XXXXXXXXXX"; // restaurant's WhatsApp number
  const message = "Hi Mom's Kitchen! 👋 I'd like to place a food order.";

  const whatsappUrl = `https://wa.me/${phoneNumber}?text=${encodeURIComponent(message)}`;
  window.open(whatsappUrl, "_blank", "noopener,noreferrer");
};

const ScrollToTop: React.FC = () => {
  const location = useLocation();

  useEffect(() => {
    window.scrollTo({ top: 0, left: 0, behavior: "smooth" });
  }, [location.pathname]);

  return null;
};

Design decisions

• Why no Redux, Context or React Query for data? Nothing is shared between pages and nothing comes from a server at runtime. Adding a store would mean more code to maintain with no benefit - local useState keeps each piece of state next to the component that uses it.
• Derive, don't duplicate. The filtered menu, the active nav link and the active category style are all computed from one source value, so they can never disagree.
• Static, typed content. The menu is TypeScript data, which makes it safe to edit (the compiler checks every dish) and instant to load (no API call).
• Use the channel customers already use. WhatsApp and phone links replace a cart and checkout, which keeps the site simple and matches how the restaurant actually takes orders.
• Performance is part of the design. Code-split routes, WebP images with fixed dimensions (no layout shift) and long-lived cache headers make the site fast on mobile data.