🍽️ Recipe Spoon

A beautifully designed React Native mobile app for discovering and following delicious recipes

Features • Screenshots • Installation • Tech Stack • API

📖 Overview

Recipe Spoon is a feature-rich mobile application built with React Native and Expo that transforms how you discover, save, and cook delicious recipes. Whether you're a beginner or a seasoned chef, Recipe Spoon provides an intuitive interface with step-by-step cooking instructions, embedded video tutorials, and powerful search capabilities.

The backend is fully deployed and live on Render, making it a seamless experience across devices.

✨ Features

🔍 Search Recipes: Instantly find recipes by food name, ingredients, or cuisine type
🎥 Video Recipes: Watch cooking steps via integrated video player
📓 Step-by-Step Instructions: Clear directions for each cooking phase
❤️ Save Favorites: Bookmark and manage your favorite recipes
👤 User Authentication: Secure sign-up and sign-in functionality
📱 Clean & Responsive UI: Built using React Native and Expo
🔄 Real-time Data: Backend API hosted on Render for seamless data delivery
🌐 Cross-Platform: Works on both iOS and Android devices

📸 App Screenshots

Sign In	Sign Up	Recipe Home

Search	Recipe Detail

🚀 Installation

Prerequisites

Before you begin, ensure you have the following installed:

Node.js (v16 or higher) - Download
npm or yarn package manager
Expo CLI - Install globally:
```
npm install -g expo-cli
```
Expo Go app on your mobile device (iOS | Android)

Step-by-Step Setup

Clone the Repository

git clone https://github.com/Bisha18/recipie_spoon.git
cd recipie_spoon

Install Dependencies
```
npm install
# or
yarn install
```

Configure Environment Variables

Create a .env file in the root directory:

API_BASE_URL=https://recepie-api.onrender.com/api
ENVIRONMENT=production

Start the Development Server
```
npx expo start
# or
npm start
```
Run on Your Device
- Scan the QR code with Expo Go (Android)
- Scan the QR code with your Camera app (iOS)
Or run on an emulator:
```
# iOS Simulator (macOS only)
npm run ios

# Android Emulator
npm run android
```

🧰 Tech Stack

Frontend Technologies

Technology	Purpose
React Native	Mobile app framework
Expo	Development platform and toolchain
TypeScript	Type-safe JavaScript
React Navigation	Navigation library
Axios	HTTP client for API calls

Backend

Node.js + Express.js - RESTful API
PostgreSQL - Database
Drizzle ORM - TypeScript ORM
Hosted on Render

🔗 API Integration

Base URL

https://recepie-api.onrender.com/api

Key Endpoints

Method	Endpoint	Description
`POST`	`/auth/register`	Register new user
`POST`	`/auth/login`	User login
`GET`	`/recipes`	Get all recipes
`GET`	`/recipes/:id`	Get recipe by ID
`GET`	`/recipes/search?q=`	Search recipes
`POST`	`/recipes`	Create recipe (auth required)
`PUT`	`/recipes/:id`	Update recipe (auth required)
`DELETE`	`/recipes/:id`	Delete recipe (auth required)
`POST`	`/favorites/:id`	Add to favorites (auth required)
`GET`	`/favorites`	Get user favorites (auth required)

Example API Call

import axios from 'axios';

const API_BASE_URL = 'https://recepie-api.onrender.com/api';

// Search for recipes
const searchRecipes = async (query) => {
  try {
    const response = await axios.get(`${API_BASE_URL}/recipes/search`, {
      params: { q: query }
    });
    return response.data;
  } catch (error) {
    console.error('Error searching recipes:', error);
    throw error;
  }
};

// Get recipe details
const getRecipeById = async (id) => {
  try {
    const response = await axios.get(`${API_BASE_URL}/recipes/${id}`);
    return response.data;
  } catch (error) {
    console.error('Error fetching recipe:', error);
    throw error;
  }
};

For complete API documentation, see the Backend Repository.

📁 Project Structure

recipie_spoon/
├── .vscode/                # VSCode configuration
├── app/                    # Main app screens (Expo Router)
│   ├── (tabs)/            # Tab navigation screens
│   ├── auth/              # Authentication screens
│   └── recipe/            # Recipe detail screens
├── assets/                # Images, fonts, icons
│   └── images/           # App screenshots and images
├── components/            # Reusable UI components
│   ├── RecipeCard/       # Recipe card component
│   ├── SearchBar/        # Search input component
│   └── VideoPlayer/      # Video player component
├── constants/            # App constants and themes
│   ├── Colors.ts        # Color definitions
│   └── Config.ts        # App configuration
├── hooks/               # Custom React hooks
│   ├── useAuth.ts      # Authentication hook
│   └── useRecipes.ts   # Recipe data hook
├── services/           # API services
│   ├── api.ts         # Axios configuration
│   ├── auth.ts        # Auth service
│   └── recipes.ts     # Recipe service
├── .gitignore          # Git ignore rules
├── app.json           # Expo configuration
├── eas.json           # EAS Build configuration
├── eslint.config.js   # ESLint configuration
├── package.json       # Dependencies
├── tsconfig.json      # TypeScript config
└── README.md          # This file

🔐 Authentication

The app uses JWT (JSON Web Tokens) for secure authentication:

Sign Up: Users create an account with name, email, and password
Sign In: Credentials are verified and a JWT token is issued
Token Storage: Token is securely stored using AsyncStorage
Authenticated Requests: Token is included in API request headers
Auto-Logout: Token expiration triggers automatic logout

Authentication Flow

// Sign up
const signUp = async (name, email, password) => {
  const response = await axios.post(`${API_URL}/auth/register`, {
    name,
    email,
    password
  });
  const { token } = response.data;
  await AsyncStorage.setItem('authToken', token);
  return response.data;
};

// Sign in
const signIn = async (email, password) => {
  const response = await axios.post(`${API_URL}/auth/login`, {
    email,
    password
  });
  const { token } = response.data;
  await AsyncStorage.setItem('authToken', token);
  return response.data;
};

🎨 Features Breakdown

Recipe Discovery

Browse trending and popular recipes
View recipes by category
Infinite scroll for seamless browsing
Beautiful recipe cards with images

Search Functionality

Real-time search results
Search by recipe name
Search by ingredients
Search by cuisine type
Filter and sort options

Recipe Details

High-quality recipe images
Video tutorials
Ingredient lists with quantities
Step-by-step cooking instructions
Prep time and cook time
Serving size information
Difficulty level

User Features

Save favorite recipes
View all favorites in one place
User profile management
Personal recipe collections

🧪 Testing

# Run tests
npm test

# Run tests with coverage
npm run test:coverage

# Run E2E tests
npm run test:e2e

📦 Building for Production

Android (APK)

# Install EAS CLI
npm install -g eas-cli

# Login to Expo
eas login

# Build APK
eas build --platform android --profile preview

# Build AAB for Play Store
eas build --platform android --profile production

iOS (IPA)

# Build for TestFlight
eas build --platform ios --profile production

🤝 Contributing

Contributions are welcome! Here's how you can help:

Fork the repository
Create a feature branch
```
git checkout -b feature/amazing-feature
```
Commit your changes
```
git commit -m 'Add amazing feature'
```
Push to your branch
```
git push origin feature/amazing-feature
```
Open a Pull Request

Coding Guidelines

Follow TypeScript best practices
Write meaningful commit messages
Add tests for new features
Update documentation as needed
Follow the existing code style
Use ESLint for code quality

🐛 Known Issues

Video playback may be slow on older devices
Search autocomplete could be faster
Some UI elements need optimization for tablets

See the Issues page for a complete list.

🗺️ Roadmap

Upcoming Features

Planned Improvements

👨‍💻 Author

Bisha18

GitHub: @Bisha18
Frontend Repository: recipie_spoon
Backend Repository: recepie_api

🙏 Acknowledgments

Expo Team for the amazing development platform
React Native Community for continuous support
Backend hosted on Render
Icons from Expo Vector Icons
UI inspiration from modern recipe apps

📞 Support

If you have any questions or need help:

Open an Issue
Check the Discussions

⭐ Show Your Support

If you like this project, please give it a ⭐ on GitHub!

Made with ❤️ and React Native

Backend API: https://recepie-api.onrender.com

⬆ Back to Top

Name		Name	Last commit message	Last commit date
Latest commit History 6 Commits
.vscode		.vscode
app		app
assets		assets
components		components
constants		constants
hooks		hooks
services		services
.gitignore		.gitignore
README.md		README.md
app.json		app.json
eas.json		eas.json
eslint.config.js		eslint.config.js
package-lock.json		package-lock.json
package.json		package.json
tsconfig.json		tsconfig.json

Folders and files

Latest commit

History

Repository files navigation

🍽️ Recipe Spoon

📖 Overview

✨ Features

📸 App Screenshots

🚀 Installation

Prerequisites

Step-by-Step Setup

🧰 Tech Stack

Frontend Technologies

Backend

🔗 API Integration

Base URL

Key Endpoints

Example API Call

📁 Project Structure

🔐 Authentication

Authentication Flow

🎨 Features Breakdown

Recipe Discovery

Search Functionality

Recipe Details

User Features

🧪 Testing

📦 Building for Production

Android (APK)

iOS (IPA)

🤝 Contributing

Coding Guidelines

🐛 Known Issues

🗺️ Roadmap

Upcoming Features

Planned Improvements

👨‍💻 Author

🙏 Acknowledgments

📞 Support

⭐ Show Your Support

About

Topics

Resources

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Uh oh!

Contributors

Uh oh!

Languages

Packages