/Cocktail-Info

This gets thecocktailDB API and show the response data in a card-view website

Primary LanguageCSSMIT LicenseMIT

Cocktail Info

  • A React website that fetchs data from TheCocktailDB and show them as cards on this site.
  • It lives at here

Screens

Landing Page

  • User could press the red links on the right of the navbar and takes you to the session automatically

Alcoholic Cocktails

  • Hover the card and the picture will be larger and has a red shadow
  • Pressing the one you like to take a look of it on google

Non-Alcoholic Cocktails

Footer

  • User could press the links at the bottom of this session and it'll takes you to the session automatically

Getting Started

These instructions will get you a copy of the project up and running on your local machine for development and testing purposes.

Prerequisites

You might have Node.js and a code editor (VScode recommended) installed.

Setting up

1. git clone ...

This will help you to get a copy of the code.

2. Delete these lines in package.json

3. Delete node_modules and package-lock.json

To ensure that gh-pages package won't make all the stuff become weird.

4. npm i

Get all the related node modules in your local directory.

5. npm start

Runs the app in the development mode. Open http://localhost:3000 to view it in your browser.

The page will reload when you make changes. You may also see any lint errors in the console.

Result if everything goes well

Compiled successfully!

  On Your Network:  http://192.168.82.20:3000

Note that the development build is not optimized.
To create a production build, use npm run build.

webpack compiled successfully