Quickstart

Get Recipe Hub running locally in under 5 minutes

Recipe Hub uses TheMealDB’s free v1 API — no API key or account required.

Prerequisites

• Node.js 18 or higher
• npm, yarn, or pnpm
• Git

Installation

1. Clone the repository

   git clone https://github.com/Miguelcds/Recipe-Hub.git
   cd Recipe-Hub
   
2. Install dependencies

   npm

   npm install
   
3. Start the development server

   npm

   npm run dev
   

   Vite will print a local URL, typically http://localhost:5173.

4. Open in your browser

   Navigate to http://localhost:5173. The home page loads 9 random meals automatically.

Available scripts

Script	Command	Description
Development server	npm run dev	Starts Vite dev server with HMR at localhost:5173
Production build	npm run build	Compiles and bundles the app into dist/
Preview production	npm run preview	Serves the dist/ build locally for testing
Lint	npm run lint	Runs ESLint across all source files

Run npm run preview after npm run build to verify the production bundle behaves identically to development before deploying.

App routes

The router is configured in src/main.jsx using React Router v7 with BrowserRouter, Routes, and Route:

src/main.jsx

createRoot(document.getElementById("root")).render(
  <StrictMode>
    <FavoriteProvider>
      <BrowserRouter>
        <Routes>
          <Route path="/" element={<App />}>
            <Route index element={<Home />} />
            <Route path="favorites" element={<Favorites />} />
            <Route path="contact" element={<Contact />} />
            <Route path="recipe/:id" element={<RecipeDetail />} />
            <Route path="*" element={<NotFound />} />
          </Route>
        </Routes>
      </BrowserRouter>
    </FavoriteProvider>
  </StrictMode>,
);

Route	Component	Description
/	Home	Landing page — random meals on load, search bar
/favorites	Favorites	Grid of your saved favorite recipes
/contact	Contact	Contact page (currently shows a placeholder message)
/recipe/:id	RecipeDetail	Full recipe view for a specific meal ID
*	NotFound	Shown for any unmatched route

Project structure

src/
├── pages/          # Route-level page components
├── components/     # Reusable UI components
├── context/        # FavoritesContext (global state)
├── hooks/          # useRecipes, useRecipeDetail
├── services/       # api.js — TheMealDB API calls
└── App.jsx         # Root layout (header / Outlet / footer)

Next steps

Core features

Learn about search, recipe detail, and favorites

Architecture

Understand the data flow and component structure