Giter VIP home page Giter VIP logo

recipocket's Introduction

Recipocket ๐Ÿฝ

recipocket

Recipocket, Many recipies in one place ๐Ÿ˜‹๐Ÿ•๐Ÿ—

About the project

This is a web-based recipe app built on react that serves the purpose of providing recipes for the users

Live Link

Give the app a try using the link below and search for some recipes!
Recipocket

How the App works

it's pretty much straight forward!

Right on the landing page, a user is met by two search types. Category and Meal. The category search contains a drop down menu that lets the user search for meals from a certain category, while the meal search lets a user search for a specific meal by name.

While the meal search returns a single Meal preview bubble, the Category search renders a Meal Preview bubble for every meal retrieved from the given category.

clicking the "see more" button or on the Meal Preview image itself will direct the user to another "page" (this is a single-page application) that displays the information about the Meal. Information entails the meal's ingredients (with respective measurements) and the instructions to prepare the meal.

Prerequisites and instructions

If you would however fancy something more than just using the app online, you can actually download the project locally and make any modifications of your own!

If so, please follow the given instructions. You will need the following environments installed in your pc:

  • Node Js installed

  • NPM or Yarn (NPM preferable)

Cloning Instructions

first off, clone the repo onto your local environment:

https://github.com/JayKowski/Recipocket.git

  • Install the required packages with:

npm install

  • Build and serve with:

npm start

This instance will be running at the port 3000 in your local host. it requires no other configuration and is usable just by running the npm start command.

Testing

After finishing the above cloning process, move to the terminal and run the following command. Make sure that you're still in the project directory.

npm run test

After running the above command, the successful test results will show in green on the terminal. Please note that all tests that currently exist in the project run properly and pass.

Technologies

  • Javascript ES6
  • ReactJS
  • Node
  • Webpack
  • Jest (for testing)

Contact

If you liked this project please, take your time to come hang out with me or checkout my work on:

recipocket's People

Contributors

jaykowski avatar

Watchers

James Cloos avatar  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.