Recipes-Assessment

Recipe Data Collection and API Development

Overview

This assesment is a full-stack Recipe Viewer application that allows users to browse, search, and view detailed recipe information. The application uses a FastAPI backend to serve recipe data and a JavaScript frontend to display and interact with that data.

The goal of this project is to demonstrate REST API usage, dynamic UI rendering, filtering, pagination, and user interaction through an interface.

Features

1. Recipe Table

Displays recipes in a table with the following columns:

• Title (truncated with ellipsis if too long)
• Cuisine
• Rating (displayed as stars)
• Total Time
• Serves

Data is fetched from the backend using a REST API.

2. Detail View (Drawer)

Clicking a table row opens a side drawer with detailed recipe information:

• Header
  • Title
  • Cuisine
• Details
  • Description
  • Total Time (expandable)
    • Prep Time
    • Cook Time
  • Servings
• Nutrition Table
  • Calories
  • Carbohydrate Content
  • Cholesterol Content
  • Fiber Content
  • Protein Content
  • Saturated Fat Content
  • Sodium Content
  • Sugar Content
  • Fat Content

3. Search & Filtering

Supports field-level filtering:

• Title
• Cuisine
• Rating (e.g., >= 4.5)
• Total Time (e.g., <= 120)
• Calories

Uses the /api/recipes/search endpoint.
Filters are applied when the user clicks Search.

4. Pagination

• Supports large datasets
• Results per page: 15, 20, 25, 30, 35, 40, 45, 50
• Includes:
  • Previous / Next navigation
  • Page number display

5. Fallback Handling

Displays user-friendly messages for:

• No results found (search)
• No data available
• API errors

Files Included

Recipes-Assesment/

• README.md
• run.bat

Backend/

- main.py                   # FastAPI application
- schema.sql                # SQLite schema
- US_recipes_null.json      # Raw JSON file
- requirements.txt          # Download requirements

Frontend/

- index.html                # UI Structure
- script.js                 # API calls and UI logic
- styles.css                # Styling

API Endpoints

API Endpoint 1:

Get All Recipes (Paginated and Sorted by Rating)
    URL: /api/recipes
    Method: GET
    Query Parameters:
        page: Page number for pagination (default is 1)
        limit: Number of recipes per page (default is 10)
    Response: A list of recipes sorted by rating in descending order.

API Endpoint 2:

URL: /api/recipes/search
Method: GET
Query Parameters:
    calories: Filter by calories (greater than, less than, or equal to a specific value). 
    title: Search by recipe title (partial match). 
    cuisine: Filter by cuisine. 
    total_time: Filter by total time (greater than, less than, or equal to a specific value).
    rating: Filter by rating (greater than, less than, or equal to a specific value). 

Setup Instructions

1. Run in CMD:

git clone https://github.com/AWarZeus/Recipes-Assessment

Change directory to “Recipes-Assessment\Backend”

2. Install dependencies

Run in command prompt:

py -m pip install -r requirements.txt

3. Run backend (FastAPI) and frontend (HTML)

Run Recipes-Assessment\run.bat

OR

In Recipes-Assessment\Backend run:

• py -m uvicorn main:app –reload

• AND

In Recipes-Assessment\Frontend run:

• py -m http.server 5500

If you see endpoints here “http://127.0.0.1:8000/docs” backend is running

Frontend is at “http://127.0.0.1:5500”