OverHere

OverHere is a web app that enables a user to record the locations of his items and quickly find out what items are close to expiration. The project is created by Vincent Dong and Cecilia Wang at LA Hacks 2018.

Usage

The whole webpage consists of 3 components: the columns representing the hierarchy of items, the right-hand sider showing details of selected item, and the search bar on the top.

Columns

The columns gives you a quick view of what items you have. Clicking on any item causes the columns to expand at that item. Each column has an add button with which you can add new items. If there're more items than could be shown on the screen, a scroll bar will appear so that you can scroll on that column. If you expand the columns deeply enough you will need to scroll horizontally.

Hovering over an item, you will see a delete button. If you want to edit detailed information of an item including its name, click on it and edit it through the sider.

Sider

Every item has 3 details: description, expiration date and a picture. You can click on the picture to see a preview.

To edit these details, click the edit button on the bottom of the sider and save the changes. Currently, after uploading an image to item A, need to click another item B and then click back to item A, otherwise the image won't show in side bar, though server update is done immediately.

Search Bar

You can search items in 2 ways -- by name or by expiration date. Choose the type of search by selecting one of the options. If you search by name, all fitted items will appear in the dropdown as you type the name. If you search by expiration date, type the date in format "YYYY-MM-DD", and the dropdown will list all items that expires before that day. Clicking on any item in the dropdown list will update the columns and the sider to the selected item.

Install & Run

• Clone the repository

  git clone https://github.com/VincentD97/OverHere.git
  cd OverHere
  

• Install npm and node

• Install node modules for server and client

  npm install
  cd client/ && npm install && cd ..
  

• Concurrently run the server (at localhost:3001) and the client (at localhost:3000)

  npm start
  

• Go to browser, localhost:3000

Built With

• css
• node.js
• react