Taco Chef for Oasis Hack Session 3, Spring 2023

Sample app built with Next.js to provide API endpoints for teaching React and API integration skills at Oasis. See the related repository here.

Demo

The API is available at here. See the API Endpoints section below.

API Endpoints

GET /tacos

Response Type: TacoResponse[]

Returns a JSON array of pre-defined taco combinations. Optional vegan and vegetarian query parameters can be applied to filter the response.

GET /tacos/generate

Response Type: GeneratedTacoResponse

Returns a randomly generated taco.

GET /tacos/:slug

Response Type: TacoResponse | ErrorResponse

Looks up a pre-defined taco by its slug and returns the requested taco. If the specified taco does not exist, an error is returned.

GET /seasonings

Response Type: ComponentResponse[]

Returns a JSON array of all available seasonings. Optional vegan and vegetarian query parameters can be applied to filter the response.

Response Types

ComponentResponse

type ComponentResponse = {
  url: string;
  name: string;
  recipe: string;
  recipe_text: string;
  slug: string;
  tags: string[];
}

TacoResponse

type TacoResponse = {
  url: string;
  name: string;
  recipe: string;
  recipe_text: string;
  slug: string;
  bases: ComponentResponse[];
  condiments: ComponentResponse[];
  mixins: ComponentResponse[];
  seasonings: ComponentResponse[];
  shell: ComponentResponse | null;
  tags: string[];
}

GeneratedTacoResponse

type GeneratedTacoResponse = {
  generated_at: Date;
  bases: ComponentResponse[];
  condiments: ComponentResponse[];
  mixins: ComponentResponse[];
  seasonings: ComponentResponse[];
  shell: ComponentResponse;
}

---

Getting Started

First, run the development server:

npm run dev
# or
yarn dev
# or
pnpm dev

Open http://localhost:3000 with your browser to see the result.

You can start editing the page by modifying app/page.tsx. The page auto-updates as you edit the file.

API routes can be accessed on http://localhost:3000/api/hello. This endpoint can be edited in pages/api/hello.ts.

The pages/api directory is mapped to /api/*. Files in this directory are treated as API routes instead of React pages.

This project uses next/font to automatically optimize and load Inter, a custom Google Font.

Learn More

To learn more about Next.js, take a look at the following resources:

• Next.js Documentation - learn about Next.js features and API.
• Learn Next.js - an interactive Next.js tutorial.

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!