Skip to content

UI

Jump to bottom
Apoorva Shetty edited this page Jun 11, 2019 · 6 revisions

Description

  • The UI for this project was built using JavaScript and React Libraries. The project was built on the boilerplate setup using Facebook's create-react-app, which was modified to create a website to get recommendations.
  • To achieve multiple pages the react-router library was used to specify various routes that the user can follow for different workflows.
  • Styling for the components was built by using react-bootstrap and material-ui libraries

Setup

1. Install dependencies
In your terminal move to the ui folder and run the command npm install

2. Run the application in dev mode
In the constant.js file set the BACKEND_HOST address to where your flask application is running
In your terminal move to the ui folder and run the command npm start navigate to http://localhost:3000 on your browser to view the app

3. Build the app for production
In your terminal move to the ui folder and run the command npm run build

This builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.
Your app is ready to be deployed!

Project structure

1. src
The src folder contains all the components and the JavaScript scripts for the application.

  • index.js : This is the starting point of the application, which injects the main route defined in the components/Routes.js file.
  • components : This folder contains all the pages that depicts a specific workflow:
    • Routes.js : This page outlines all the routes listed below that a user can be redirected or linked to
    • WelcomePage.js : This is the first page a user visits, from here a user can choose one of two possible routes:
      • RecPage.js : This page allows a user to enter a book they previously read to generate recommendations based on that. The user can also explore the recommendations to see a summary, and if they so choose a link is provided to redirect them to where they can read/buy the book online
      • VirtualLib.js : This page allows a user to explore books based on a genre they are currently interested in, much like a library.
    • App.css : The main css file that has styling for all the components in all the pages.
    • constants.js : This file contains all constant values that are used in the application
    • DemoUsers : This folder contains two routes styled on two demo users that can be reached using the link specified in the Routes file: Demo1 and Demo2
2. public
This folder contains the index.html file generated in a dev build, and also contains the images used in the dev build inside the images folder

Clone this wiki locally