Giter Club home page Giter Club logo

cocktail-creator's Introduction

Cocktail Creator

Table of Contents

Introduction

Have you ever had a couple of ingredients for a coctktail but never knew what to make, or been a bartender and have someone tell you suprise you with a drink that has Vodka? If so, Cocktail Creator is a webpage to help you find that perfect drink.

Links

Learning Goals

  • demonstrate mastery of:
    • React
    • Router
    • Asynchronus JavaScript
    • End to end testing with Cypress

Features

Visit the homepage and search a specific ingredient you want in your drink! The webpage will automatically filter and display which drinks contain that ingredient.

Coctail_Creator_Homepage

You are also able to see the directions and recipe for a drink you want! Rate this drink from 1-5 stars so others who visit the app will now how tasty it was.

Drink_info

Setup

  1. Fork this repo - on the top right corner of this page, click the Fork button.
  2. Clone down the forked repo. To rename your project you can use an optional argument when you run git clone (you replace the [...] with the terminal command arguments): git clone [remote-address] [what you want to name the repo]
  3. Once you have cloned the repo, change into the directory and install the project dependencies. Run npm install to install project dependencies.
  4. Run npm start in the terminal to see the page running in your browser on http://localhost:3000/. Control + C is the command to stop running the local server. Closing the terminal without stopping the server first could allow the server to continue to run in the background and cause problems. This command is not specific to Webpack; make note of it for future use.
  5. Enjoy!

Future Additions

  • Adding a form that allows user to add recipes/drinks.
  • Allowing user to favorite drinks

Technologies

This project used React, React Router, and CSS. Cypress Testing was also used for End to End testing.

Contributors

This project was built by:

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.