Git Product home page Git Product logo

react-interview's Introduction

LoanStreet Frontend Challenge

Overview

LoanStreet has recently taken on some new credit union clients! These credit unions need a way to quickly see their deals portfolio. Your task is to add a few pieces of functionality to the existing frontend. Please read the instructions carefully and allocate six hours to complete these prompts.

DO NOT SPEND MORE THAN SIX HOURS ON THIS PROJECT.

Project Setup

Note: You will need Yarn package manager installed (for Mac, brew install yarn).

  1. Clone or Fork the repository
  2. Run yarn, in the project's root directory, to install all the packages
  3. Run yarn start, in the project's root directory, to run the local frontend server
  4. For Bonus Section: To access the mock API, run yarn global add json-server followed by yarn server

Your Tasks

  • Add validation so that a deal isn't created unless all fields are entered. Display errors when a field is missing or contains bad data according to the UX form fields design.

  • Add ability to remove deals from the DealsTable (interface up to you).

  • Add ability to publish a deal from the DealsTable (interface up to you).

  • Add ability to sort deal rows in ascending or descending order by clicking the header cell of the different fields by which you wish to order. You can find the SortIcon is in the assets folder.

Bonus

If you have time left over, feel free to attempt any of the challenges below that you feel are best suited to your interests and skills!

  • Connect to the mock json server using the HTTP client of your choice so that any data that you manipulate saves into the db.json file.

  • Write tests for any of the requirements that you implement.

  • Pretty up the table styling

Delivery

When you're complete, please send a .zip or .tar of your repo to [email protected]. You can also reach out to this email address if you have any questions.

Discussion

This project will assist fellow engineers in getting to know you and your work. Please do not hesitate to ask questions and request clarifications.

The engineering team will debrief and review this code with you as part of the interview process. Be prepared to answer questions such as:

  • NewDealForm calls setNewDeal every time the user types a letter into the form. Discuss what you think are the pros and cons of this form handling implementation.

  • In the real world, how would you hook this frontend to a backend (vs the mock API). How would you load initial data that the credit union sends us?

  • How would you think about scaling the UI components you built and used for these features to future parts of the app?

  • What other suggestions can you make to improve the quality of the code?

react-interview's People

Contributors

chriswu000 avatar adamdonahue avatar mattbrazza avatar dependabot[bot] avatar chewiee avatar lainermeister avatar lsadam0 avatar eugene-1221 avatar

Watchers

Elihu avatar Kevin Horn avatar Bhavish Yalamanchi avatar Ryan Nickell avatar  avatar  avatar Roxanne Gaudiel avatar Bryan Mierke avatar Jeff hallyburton avatar  avatar Greg Griffith avatar  avatar Jonathan Derin 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.