Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/Miguelcds/Recipe-Hub/llms.txt

Use this file to discover all available pages before exploring further.

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 install
3

Start the development server

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

ScriptCommandDescription
Development servernpm run devStarts Vite dev server with HMR at localhost:5173
Production buildnpm run buildCompiles and bundles the app into dist/
Preview productionnpm run previewServes the dist/ build locally for testing
Lintnpm run lintRuns 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>,
);
RouteComponentDescription
/HomeLanding page — random meals on load, search bar
/favoritesFavoritesGrid of your saved favorite recipes
/contactContactContact page (currently shows a placeholder message)
/recipe/:idRecipeDetailFull recipe view for a specific meal ID
*NotFoundShown 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

Build docs developers (and LLMs) love

Get started for freeTalk to us