Giter Club home page Giter Club logo

frontend-task's Introduction

SO1 Frontend Task

In this task, you will be building a simple interface for a marketing/campaign manager at a major grocery retailer. It is the campaign managers job to choose and execute different marketing campaigns which affect the price of the corresponding products. The application that the campaign manager uses contains 2 pages: Home and Campaign.

Home page

Home page displays a table that contains all campaigns in this form:

name budget products
Campaign 1 216 24
Campaign 2 450 36
Campaign 3 812 30
... ... ...

Campaign page

Campaign page displays campaign information (id, name, budget) and the table with products data:

name price category
Product 1 4 Category 15
Product 2 19 Category 82
Product 3 10 Category 4
... ... ...

Data

Data is available on the server which is already implemented in this repo, you can launch it before using by running the npm run server command. The server returns all data in JSON format and has following endpoints:

method path description
GET /api/campaigns Get list of campaigns
GET /api/campaigns/:id Get campaign by id
GET /api/categories Get list of categories
GET /api/products Get list of products

Current state

There is already some basic setup presented (feel free to modify it though):

  • react-router configured to handle 2 paths: / (Home page) and /campaigns/:id (Campaign page).
  • redux store configuration in store.js module with base setup.
  • action.js module contains an action creator that fetch campaign data from the server. You can add your action creators here.

Task

Your task is to implement missing pieces:

  • perform action network requests for fetching categories and products data
  • store data in redux store (complete actions & reducers)
  • display data for user
  • handle user interactions: clicking on the campaign row in the campaign's table should redirect the browser to the Campaign page.
  • there is no design defined for this task, so your goal is to build simple CSS to represent data nicely.

Unit tests would be nice but not required, you can see an example of one in Home.test.js.

Available Scripts

In the project directory, you can run:

npm run server

Runs the server for fetching data. You can access the server by issuing requests to http://localhost:8080/api. Please check REST API specification here.

npm start

Runs the app in the development mode. Open http://localhost:3000 to view it in the browser.

The page will reload if you make edits. You will also see any lint errors in the console.

npm test

Launches the test runner in the interactive watch mode.

frontend-task's People

Contributors

tadjik1 avatar

Watchers

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