Bayborhood

A website designed for people to be find the perfect neighborhood in San Francisco.

Deployed on: https://bayborhood.com

Table of Contents

• General Info
• GitHub Repo
• Technologies Used
• Features
• Setup
• Project Status
• Room for Improvement

General Information

This project was built independently in two weeks using React and Jupyter Notebook.

GitHub Repo

• [Monorepo] https://github.com/roylee0912/bayborhood

Technologies Used

• NodeJS (v16), and npm
• React 17.0.2
• React-Router-Dom 5.3.3
• Jupyter Notebook
• Mapbox GL JS

See Environment Setup below for instructions on installing these tools if you don't already have them.

Environment Setup

Clone repository

clone the project repository from github: https://github.com/roylee0912/revieword

$ git clone https://github.com/roylee0912/bayborhood

Install NodeJS

Verify you are running a recent version of Node with:

node -v

If your Node version is not 16.x.x, install it and set it as the current and default version with:

nvm install 16
nvm use 16
nvm alias default 16

You can also update your npm version with:

npm i -g npm

Application Install

Add a .env file in the root directory, and add a token from Mapbox named "REACT_APP_TOKEN."

You can make a token here

When you're ready to start building your project, run:

cd bayborhood
npm install
npm start

Usage

1. [Select Features] Click on various features on the sidebar to add filters that are important to you. The neighborhoods will automatically be shaded lighter or darker depending on their proximity to those specific features. Click on the +/- at the top right of the map to zoom in or zoom out, click and move the mouse around to move the map, and select additional features under select filters to specify even further. Click on "Show Quadrants" to color in the different quadrants of San Francisco different colors.

2. [About] Click the i icon next to "Bayborhood" to open an about page and see where we got our data from.

Project Status

• Project is: in progress.

Room for Improvement

• Add proximity to location using Bing Maps Isochrone API
• Add a priorities list for different features to affect the neighborhoods differently
• Update responsiveness of drag