Giter Club home page Giter Club logo

link's Introduction

Link

Link is is a React app that helps you evaluate potential bicycle or pedestrian improvements in the greater Philadelphia region.

This repository contains the front-end components.

The backend is built with:

Setup/Installation

Dependencies

Make sure you have the latest LTS version of node/npm installed. Follow instructions here. It is strongly recommended to use one of the Node Version Managers (NVM) at the link for your OS. Once you have nvm available on the command line, get the latest stable npm version with:

nvm install lts 

and then (replacing 18.x.x with whatever the latest stable version you just installed was):

nvm use 18.x.x

Installation

For Linux users: add this line to the end of your .bashrc and restart your shell : export NODE_OPTIONS=--openssl-legacy-provider. Alternatively, use node v16 or earlier. (relates to this issue). Something similar may be required for Windows users.

1. Clone the repo

git clone https://github.com/dvrpc/link

2. Run the following command to install node dependencies.

npm install

3. Setup .env and start the server.

Create .env.development and .env.production files in the root directory. Both should set the REACT_APP_API_URL variable.

For example, env.development might look like:

REACT_APP_API_URL=http://localhost:8000/api
REACT_APP_API_USER=user
REACT_APP_API_PASSWORD=pw
REACT_APP_MAPBOX_ACCESS_TOKEN=your mapbox token

note the /api in the api. This should match whatever you set the environment variable to in the backend, if you set one.

Start the server with:

npm start

or build it with npm run build which creates a directory with a production build of your app.

4. Start the backend server, following the instructions in the backend repository.

Usage

Interact with the Link app by drawing segments and then clicking 'analyze'. Future functionality will include geoJSON upload and editing a copy of previous projects. More to be added here as the app is developed.

Contributing

Contributions are welcome. Once this app departs from the prelease stage, conventional/semantic commits will be enforced. If you'd like to contribute, open a new branch, perform your work, and open a pull request into main.

User authentication

In order to keep user-created projects separate between users in the app, some level of authentication is needed. Rather than handle this in-house, auth0 is used, which wraps around the main React routers.

The auth0 user.nickname is passed down to other parts of the app, and ultimately into the db.

Auth0 has local, staging, and production environments, so these need to be adjusted for production. additionally, auth0 has a list of urls it can route back to after authentication, so the final project domain info will need to be inputted there upon launch.

License

This project uses the GNU(v3) public license.

link's People

Contributors

mmorley0395 avatar jstrangfeld avatar kdwarn avatar

Stargazers

Noah Christiansen avatar

Watchers

 avatar  avatar

link's Issues

has isochrone filter

has isochrone will let you filter with false, but not no, which is the value shown.

perhaps just show true false

share button not working

share button response is weird, need to catch the errror in a try except. but api call works fine, just has to do with the new authenticated request response

snapping

need to implement snapping and define a good tolerance

view study extent

change view study extent so it's only half screen size so full geom shown when table is open

need to clear id list before switching state

right now, if you click segments in lts, then switch state, the id list is retained. the clickClear function is deeply enmeshed in the mapbox map creation, so might need to pull it to a higher level

change drawer to table

change drawer from left pop out to table, use react library that lets you filter and sort in table

need to validate geojson

need to both validate geojson features and make sure they are only line, no point or polygon.

rename needs modal

rename correctly throws error to console when name duplicated, but needs a modal to alert the user

dont allow clicks on lowstress segments

need to define a state for the user selected highest comfort level, and only let segments be selected that are greater
than that value. this isnt relevant for sidewalk layer but for LTS it helps avoid accidental clicks on unneeded layer

shared nickname?

this is unlikely, but the user nickname from oath2 is what ultimately goes to the db. might want to consider doing full email there instead, in the event of same nickname (same email prefix before @) . this is very unlikely to occur unless someone makes two accounts ('[email protected], [email protected]', with an identical username before the @ sign)

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.