Git Product home page Git Product logo

boozer-react-web-060517's Introduction

Boozer React Mini-Project

Today, we're going to be building a React project from scratch! We'll be using an awesome tool from facebook to bootstrap our app called create-react-app. To use it, first, install the package globally (for CLI tools, we usually install npm packages in a global location)

npm install -g create-react-app

Next, we'll create our application.

create-react-app boozer-react

This will create a new app in the directory where you run the command. Simple!

Instructions

  1. Using create-react-app, create a new project called boozer.
  2. We've provided you with an API. Fork and clone the api, then run rake db:migrate and rake db:seed. We have two endpoints right now: /api/v1/cocktails renders out a list of cocktails and their proportions. Our domain model is that cocktail has many proportions and has many ingredients through those proportions.
  3. Create a component called CocktailsContainer. This component should fetch a list of cocktails from the API and render our the cocktail names.
  4. Next, each cocktail name should be a clickable link. Clicking on this link should render out a detail view of the cocktail including the name, description, instructions, and proportions. HINT - use react-router-dom to update the URL as you click on each particular cocktail. Our goal is to have a "Master-Detail" layout - our list should be ever-present on the left side and our detail view should take up two thirds of the screen.

Part Two

Once you finish the above features, start implementing the below user stories. NOTE You will have to add endpoints to the API to make these work properly.

  1. As a user, I should be able to create a new cocktail. This means we will need a form where I can enter a cocktail name, description, instructions, and multiple proportions. The form should be dynamic - I should be able to choose how many different proportions I want to add.

NOTE - there is a lot of functionality tied up in this one user story. You probably need to break this one up into multiple stories. Focus on small pieces of work at a time. First, maybe you want to make a form that just has a user enter in a cocktail name? Then let the user submit that form? Then add a hard-coded number of proportions? Build in small chunks and don't worry about edge cases to start. Pretend that the user will do everything perfectly.

  1. As a user, I can filter the list of cocktails by name. This means I need a search input to enter in a name. Our list should then only show cocktails whose name matches.

boozer-react-web-060517's People

Contributors

ipc103 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.