Git Product home page Git Product logo

ueni-fe-test's Introduction

Task

Build a basic web application with ReactJS based on the assets in the zip file provided.

Files:

  • step_1.png
  • step_2.png
  • src/reviews-data.json
  • src/businesses-data.json

Application

The application has only two pages, step-1 and step-2. Step-1 lists the data from businesses-data in a grid like fashion, whist the step-2 represents the summary page of the selected business.

Requirements

Step-1

  • List all business data in businesses-data.json by default (not sorted or filtered)
  • Show the business image, description, location and name
  • Have functionality to sort the business in alphabetical order
  • Have functionality to filter by category
  • Click on the business forwards the user to step-2 with details of the business clicked on

Step-2

  • Show the business image, description, location, name and calculated reviews score.
  • If no reviews data available, show a message "No reviews"

Design

The images of the steps provided are wireframes of the pages. Base the layout of the page from them, but you can use preferred styling tools. Adapt the wireframes for range of devices.

Data

businesses-data.json has all the needed data for step-1. For step-2 you will need to combine the data from reviews-data.json. The field names are self-explanatory.

My Solution

  • I used create-react-app for the sake of keeping the demo configuration simple
  • I chose react-bootstrap as a UI kit, used for buttons, images and dropdown. I am aware that the current version is a bit obsolete since it doesn't support Bootstrap 4 yet, but it's a tool I'm familiar with. I also know that including the whole Bootstrap is overkill for this simple demo, but gets the job done.
  • I used grid-styled for a flexbox based grid-like layout. I am not using CSS Grid in production yet. styled-components are used for further manual CSS rules in a couple of places.
  • I used react-router to get the job done fast. Also overkill for 2 pages.

npm install or yarn

npm start or yarn start

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

npm run build or yarn build

Builds the app for production to the build folder. If you want to run production build, you need to serve the files from the root of a webserver, since I didn't use react-router's HashRouter.

ueni-fe-test's People

Contributors

hizo avatar

Watchers

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