Giter VIP home page Giter VIP logo

netflix-takehome's Introduction

Netflix L5 SPOT Take Home Challenge

Steps to run the app

  1. Copy .env.example to .env
  2. Set the YELP_API_KEY in .env
  3. Run npm install to install the project dependencies
  4. Run npm run server from the root of the project
  5. Run npm run dev from the root of the project
  6. Navigate to the given localhost port (Default is typically http://localhost:5173)

Steps to run the tests

  1. Run npm run test from the root of the project

Project Description

I took a literal approach to the project outline in order to pair down the scope and keep the feature set limited and specific. As such, I focused primarily on the front-end aspect of the project, and built an extremely simple Express server. It simply acts as a pass through for the Yelp API for the sake of side stepping the CORS issues that arise from trying to hit a 3rd party API from a browser context. Additionally, I hard coded the search term "boba shops" at the hook level in the request to the Yelp API, knowing it would be very straightforward to implement a text field that would allow the user to submit their own search term should that be desired in the future.

I spent a decent amount of time thinking about the design and usability of the interface, opting for simplicity and a clean aesthetic that presented only what was specifically asked for in order to keep the view from becoming too cluttered. I made sure to allocate time for a minimal test suite that covered the main functionality of the app, but ideally I would prefer slightly more test coverage than what I was able to accomplish here due to the time constraint.

Notable Areas For Improvements

Given the simplistic nature of the data being pulled and the type of state management required by the scope of the project, I chose not to utilize a more sophisticated state management pattern, and instead utilized the useState hook from React. I felt this was adequate for the scope of the project, but does come with some noticeable drawbacks, namely the inability to share state efficiently and concisely across the component tree. An improvement that could be made if the app were going to be built out more would be to introduce a shared state tool such as Redux or React Contexts.

Another improvement that could be made is a cache layer for the data that is being fetched. This would ensure that duplicate requests for data would not require additional network calls which would improve performance and keep the app feeling fast.

Sophisticated error handling and logging are also areas that I deemed to be out of scope for the project, but would need to be incorporated for a production application.

netflix-takehome's People

Contributors

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