Code Monkey home page Code Monkey logo

negotiation-app-client's Introduction

Negotiation App

This is a take home test done for certain company.

Synopsis

This is an implementation of a value comparer, which shows success or failure message after comparing the values. This comparison is implemented on the backend. Instructions to run the backend server can be found below.

Key takeaways of implementation

  • There is server side session management tracked by cookie set on client. This lets multiple clients to use the backend.
  • localhost:3000 is whitelisted on server to enable CORS communication
  • Fetching of weather information is also implemented on server. This is exposed at endpoint \weather
  • Components are arranged based on atomic model
  • CSS modules are used to keep the classnames unique at component level
  • To keep the code consistent, there is a basic eslint (uses airbnb recommendation) and prettier config
  • webpack server is use to run the client server
  • babel is used to transpile react and ES2015
  • Unit tests and integration tests are separated by the file format
  • Tests are implemented using jest and enzyme
  • NOTE: since integration test uses enzyme, there a warning to use act(). This the limitation of emzyme interfering the react rendering cycle. Ideally we could write the tests using react testing library

To Run the project

  1. Install all dependencies
yarn
  1. Run in dev mode
yarn start:dev

Now app is running at http://localhost:3000

To run Unit tests

yarn test:unit

To run Integration tests

yarn test:integration

To enable backend

  1. checkout the repo for the backend
git clone [email protected]:rr235/negotiation-app-server.git
  1. make a copy of .env-sample and rename it to .env (make sure correct OPEN_WEATHER_MAP_API_KEY is set )

  2. Install dependencies

yarn
  1. Run the server
yarn start:dev

Now backend is running at http://localhost:5000

negotiation-app-client's People

Contributors

rr235 avatar

Watchers

James Cloos avatar  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.