# ayperi-hilal/recipe-app architecture

> Architecture diagram of the GitHub repository ayperi-hilal/recipe-app, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-28). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/ayperi-hilal/recipe-app
- Repository: https://github.com/ayperi-hilal/recipe-app

## Overview

This is a React Native food-recipe app. Its visible entry workflow starts at Landing, where users can choose login or sign-up; sign-up uses Firebase Authentication and navigates to the tabbed app when an authenticated user is detected. The tab navigator exposes Home, Search, Bookmark, and Profile. Recipe cards fetch recipe details from Spoonacular for an image. The README provides no further capability details, and several screens and list components were not sampled, so their internal behavior and wiring are not inferred.

Main entry points: [`navigation/tabs.js`](https://github.com/ayperi-hilal/recipe-app/blob/master/navigation/tabs.js) (Tab navigator), [`screens/Landing.js`](https://github.com/ayperi-hilal/recipe-app/blob/master/screens/Landing.js) (Landing screen), [`screens/SignUp.js`](https://github.com/ayperi-hilal/recipe-app/blob/master/screens/SignUp.js) (Sign-up screen), [`App.js`](https://github.com/ayperi-hilal/recipe-app/blob/master/App.js) (App navigator)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_entry["Entry and auth"]
  node_landing["Landing screen<br/>[Landing.js]"]
  node_login["Login screen<br/>[Login.js]"]
  node_signup["Sign-up screen<br/>[SignUp.js]"]
  node_firebase["Firebase Auth<br/>[firebase.js]"]
end

subgraph group_navigation["App navigation"]
  node_app["App navigator<br/>[App.js]"]
  node_tabs["Tab navigator<br/>[tabs.js]"]
  node_profile["Profile screen<br/>[Profile.js]"]
end

subgraph group_recipes["Recipe experience"]
  node_home["Home screen<br/>[Home.js]"]
  node_search["Search screen<br/>[Search.js]"]
  node_bookmark["Bookmark screen<br/>[Bookmark.js]"]
  node_meal_list["Meal list<br/>[MealList.js]"]
  node_meal["Recipe card<br/>[Meal.js]"]
end

node_user(("User"))
node_firebase_service{{"Firebase service"}}
node_spoonacular{{"Spoonacular API"}}

node_user -->|"opens"| node_app
node_app -->|"starts at"| node_landing
node_landing -->|"opens"| node_login
node_landing -->|"opens"| node_signup
node_app -->|"routes to"| node_tabs
node_signup -->|"authenticates with"| node_firebase
node_firebase -->|"uses"| node_firebase_service
node_signup -->|"navigates on auth"| node_tabs
node_tabs -->|"dispatches"| node_home
node_tabs -->|"dispatches"| node_search
node_tabs -->|"dispatches"| node_bookmark
node_tabs -->|"dispatches"| node_profile
node_meal -->|"fetches details"| node_spoonacular

click node_app "https://github.com/ayperi-hilal/recipe-app/blob/master/App.js"
click node_landing "https://github.com/ayperi-hilal/recipe-app/blob/master/screens/Landing.js"
click node_login "https://github.com/ayperi-hilal/recipe-app/blob/master/screens/Login.js"
click node_signup "https://github.com/ayperi-hilal/recipe-app/blob/master/screens/SignUp.js"
click node_firebase "https://github.com/ayperi-hilal/recipe-app/blob/master/firebase.js"
click node_tabs "https://github.com/ayperi-hilal/recipe-app/blob/master/navigation/tabs.js"
click node_home "https://github.com/ayperi-hilal/recipe-app/blob/master/screens/Home.js"
click node_search "https://github.com/ayperi-hilal/recipe-app/blob/master/screens/Search.js"
click node_bookmark "https://github.com/ayperi-hilal/recipe-app/blob/master/screens/Bookmark.js"
click node_profile "https://github.com/ayperi-hilal/recipe-app/blob/master/screens/Profile.js"
click node_meal_list "https://github.com/ayperi-hilal/recipe-app/blob/master/components/MealList.js"
click node_meal "https://github.com/ayperi-hilal/recipe-app/blob/master/components/Meal.js"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_landing,node_login,node_signup,node_firebase,node_user toneBlue
class node_app,node_tabs,node_profile toneAmber
class node_home,node_search,node_bookmark,node_meal_list,node_meal,node_spoonacular toneMint
class node_firebase_service toneIndigo
```

## Components

### Entry and auth

- [Landing screen](https://github.com/ayperi-hilal/recipe-app/blob/master/screens/Landing.js): `screens/Landing.js`
- [Login screen](https://github.com/ayperi-hilal/recipe-app/blob/master/screens/Login.js): `screens/Login.js`
- [Sign-up screen](https://github.com/ayperi-hilal/recipe-app/blob/master/screens/SignUp.js): `screens/SignUp.js`
- [Firebase Auth](https://github.com/ayperi-hilal/recipe-app/blob/master/firebase.js): `firebase.js`

### App navigation

- [App navigator](https://github.com/ayperi-hilal/recipe-app/blob/master/App.js): `App.js`
- [Tab navigator](https://github.com/ayperi-hilal/recipe-app/blob/master/navigation/tabs.js): `navigation/tabs.js`
- [Profile screen](https://github.com/ayperi-hilal/recipe-app/blob/master/screens/Profile.js): `screens/Profile.js`

### Recipe experience

- [Home screen](https://github.com/ayperi-hilal/recipe-app/blob/master/screens/Home.js): `screens/Home.js`
- [Search screen](https://github.com/ayperi-hilal/recipe-app/blob/master/screens/Search.js): `screens/Search.js`
- [Bookmark screen](https://github.com/ayperi-hilal/recipe-app/blob/master/screens/Bookmark.js): `screens/Bookmark.js`
- [Meal list](https://github.com/ayperi-hilal/recipe-app/blob/master/components/MealList.js): `components/MealList.js`
- [Recipe card](https://github.com/ayperi-hilal/recipe-app/blob/master/components/Meal.js): `components/Meal.js`

### Other components

- **User**
- **Firebase service**
- **Spoonacular API**

## Connections

- User → App navigator: opens
- App navigator → Landing screen: starts at
- Landing screen → Login screen: opens
- Landing screen → Sign-up screen: opens
- App navigator → Tab navigator: routes to
- Sign-up screen → Firebase Auth: authenticates with
- Firebase Auth → Firebase service: uses
- Sign-up screen → Tab navigator: navigates on auth
- Tab navigator → Home screen: dispatches
- Tab navigator → Search screen: dispatches
- Tab navigator → Bookmark screen: dispatches
- Tab navigator → Profile screen: dispatches
- Recipe card → Spoonacular API: fetches details