Giter Club home page Giter Club logo

baoss-react-dev-exam's Introduction

Start Here

Welcome to the React Developer interview. This coding exercise should take you no more than 4 hours, but you have 24 hours to complete from the moment you fork.

You'll be building a functional feature that gives users the ability to add fruits to their shopping cart. Your feature should fulfill the following requirements while ensuring production-ready code quality:

  1. Match the mocks in the Figma url
  2. Fetch the list of fruits from the API url provided below
  3. The input should be a typeahead that renders fruit names. When typing into the typeahead, the search results are filtered
  4. Upon clicking on a fruit, the fruit should be added to the cart
  5. Fruit quantity should increment and decrement on button clicks
  6. When quantity decrements to 0, fruit in shopping cart should be removed

The above requirements are the bare minimum. Below are some extra bonus points to consider, and elements I'll be looking out for as I review your code:

  1. Make intuitive UI considerations, add comments if necessary to explain your decision thought process.
  2. Make sure to implement performant code. In a real world scenario, consider how your implementation could be optimized.
  3. Accessibility
  4. General best practices around component structuring

API Url

https://fruityvice.com/api/fruit/all

Figma Url

https://www.figma.com/file/b0RQmi0smMN9z6JV9WnQdf/React-Developer-Interview?node-id=2%3A5&t=wQGbTkjMcBgnMDJW-1

Instructions

  1. FORK this codesandbox, you may need to create an account on codesandbox.io.
  2. You have 24 hours to complete the exercise and send your new codesandbox url back to me. Submissions past the 24 hour period will not be considered.

baoss-react-dev-exam's People

Contributors

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