Simple webserver that serves up an interactive map of bike rides from the shift2bikes calendar API, plus geocoding + caching.
- Fetch bike fun data from Shift2Bikes Calendar API
- Display rides in list and actual ride location on map
- Fire map marker click when user clicks on ride in list
- Add ride filters: start date, end date, day of week
- Implement blank state, loaders, and cancelled event behavior
- Separate concerns of frontend and backend; create simple server
- Cache ride data in client, cache geo-coded event data in backend
See ROADMAP.md
Do this at least once.
This will set up the env file and install dependencies for client and server:
npm run setup:dev
If you plan to actively work on both the client and server, your best bet is to run the following in two separate terminal windows/tabs :
npm run start:server:dev
: start the server in watch mode and bind to a portnpm run start:client:dev
: start the client in dev mode; enable hot reloading and proxy client-side app to the server's port
To build and serve up a production version:
- In your
.env
file, changeNODE_ENV
toproduction
- In your
.env
file, changeGOOGLE_MAPS_API_KEY
to your key. Or not. If you leave the default config the geo coordinates for addresses will just be random points in Portland, no big deal. - Run
npm start
This will:
- trigger a production build of the client-side code
- serve those static files over an Express web server, visible in your browser at
http://localhost:8080
Sample request to API:
curl -X GET "http://localhost:8080/api/shift-events?start=2020-05-01&end=2020-06-01"
The local project reads test data from a file while in development mode. To enable live data, set NODE_ENV
to production
in the .env
file and restart the app. Use this mode sparingly; please do not be a jerk and pummel the Shift2Bikes API.
By default the development server will hydrate event data with random coordinates in Portland, OR as the event lat/lng, since that's free.
To enable geocoding, you'll need an active Google Maps Geocoding API account and API key. Set GOOGLE_MAPS_API_KEY
in the .env
file to your personal API key.
If you ride a bike in Portland you have likely used the Shift2Bikes calendar. BikeRides4U.com is a passion project that aims to complement the Shift cal by providing a filterable, interactive map view of the same ride data, plus geocoding and caching.
For the event data, this app pings a custom webserver which:
- pulls ride data from the Shift2Bikes Calendar API for a given start date
- hydrates the ride data with lat/lng coordinates using a geocoding service and the event's
address
field - caches the hydrated event data indefinitely for use later (since coordinates don't move)
- allows responses to be cached by the client for a short interval, reducing potential load on the Shift2Bikes API
This project is not affiliated with Shift2Bikes.org. But I do think they're awesome!
Shift's mission is to promote inclusive bike fun. Shift also facilitates lots of events. Examples of Shift-related activities include breakfast give aways, social rides, educational bike tours, actions to raise awareness about cyclist injuries or deaths, information-sharing events, art-bike parades and more.
See Shift2Bikes.org for more information about bike fun in Portland.