Giter VIP home page Giter VIP logo

lab6-pw's Introduction

Recipe Finder App

Recipe Finder is a web application that allows users to search for recipes, like their favorite ones, and view them in a personal cabinet. The app also supports light and dark mode themes.

Features

  • Welcome Page: A welcome screen with a "Start Exploring" button to navigate to the recipe search functionality.
  • Recipe Search: Users can search for recipes by entering keywords. The app fetches recipes from an external API and displays them.
  • Like Recipes: Users can like recipes, which will be stored in their personal cabinet.
  • Personal Cabinet: A section where users can view all their liked recipes.
  • Dark Mode: Toggle between light and dark themes.

User Flows

1. Welcome Page

  1. Start Exploring: When the user visits the app, they see a welcome page with a "Start Exploring" button.
  2. Navigate to Recipe Search: Clicking the "Start Exploring" button navigates the user to the recipe search page.

2. Recipe Search

  1. Search Bar: The user can enter a search term in the search bar and click the "Search" button.
  2. Display Recipes: The app fetches recipes from an external API and displays them below the search bar.
  3. Add Recipes: Each recipe has a "Add" button. Clicking this button will save the recipe to the user's personal cabinet.

3. Personal Cabinet

  1. View Added Recipes: The user can toggle the display of their personal cabinet to view all liked recipes.
  2. Hide Personal Cabinet: The user can hide the personal cabinet by clicking the toggle button again.

4. Theme Toggle

  1. Toggle Theme: The user can switch between light and dark modes using the theme toggle button. The selected theme will be saved and persisted across page reloads.

Installation

git clone https://github.com/ryantoxx/Lab6-PW
npm install
npm start

lab6-pw's People

Contributors

ryantoxx avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.