React App for planning trips with bike and train

Plan a weekend trip with bike and train around Berlin

Final Frontend App with React and Redux

After a ridiculous amount of time I spent on this project, there is still a lot to improve (like mobile optimization) and extend (functionality and data), but I am eventually quite happy with the first result.

While there are great apps for planning bike and hiking tours or booking train tickets and search for train connections, there is little bringing them together. This is where this Single Page Application comes in.

There are many cycling routes in an around Berlin and a lot of people put their bikes in one of the regional trains on the weekend to spend a day cycling in the open. Instead of coming back to the same train station, one could also ride on one of the cycling routes to another train station to go back. This App gives an idea which routes are out there and how they are connected.

Libraries used

  • React Spring
  • React Lottie Player (for loading animation made in After Effects)
  • Node Sass (apparently deprecated?)

Live site

bahn-und-bike.eu

Repo

https://github.com/mirja-t/bahn-und-bike

Thanks to @factoradic , @mike7127143742 and @tgrtim for some support on the way :slight_smile: :wave:

@Maciej I used the data from GTFS, but I had to refactor it very much. In the end it was so much that I ended up building my own database and API. I started with this project a little early on the Frontend path and while continuing the path I ran into trees eventually :slight_smile: They might become useful when I extend the app with train connections including a change…

7 Likes

Fantastic :heart_eyes:, love the idea. Will have to keep an eye open to see if you go further with it.

1 Like

Thank you! I’ll definitively continue working on this…

1 Like

Added Feature

When a leg of a chosen cycling path is clicked, possible cycling route combinations are shown, if any exist (which is only the case for a few routes). If clicked, alternative train stations as start and end point of the trip are listed.

Any Feedback welcome

UX

If you have any feedback regarding user experience improvement (or the structure of the code in case anyone feels enticed to work their way through that), please let me know.

Translations

And to all native english speakers: Do you spot any weird translations? For example: Google supposed that a part of a route is a leg. Really? :thinking:

Anyone who visited the live link (1st post) before might need to hard reload.

1 Like

Nice work! I’m new to front end stuff, I just finished the html semantics lesson. I noticed that on your title page #1 is missing a word, ‘of’. Instead of ‘Choose a maximum travel time from the starting point Berlin’ it should read ‘Choose a maximum travel time from the starting point of Berlin’.

I really like the style of your site!

2 Likes

Thank you very much for your nice feedback and pointing out the grammar mistake! I corrected that.

1 Like

After watching people using the App, I realized that User Experience could be improved.

Main observations:

  • Users tend to click on the last train station only rather than the train line
  • Once the side bar with the detailed info about the cycling route, people did not realize that the cycling route on the map has further interactive features
  • Users tended to be confused when the info about the previously chosen train line was still active while the chosen cycling route leg has no connection to it

Improvements to tackle observed flaws:

  • Added extra hover states for train and cycling routes on map in order to highlight interactive elements
  • Added list of cycling route legs for an alternative way to activate cycling route legs and show related info
  • Deactivate unrelated train line info when a cycling route leg without connection to previously picked train line
  • Removed separation of functions when last train station or train line is clicked in order to improved user experience

New Feature

  • Added zoom and drag functionality to the map

This is work in progress, so I would still appreciate any kind of feedback (please find the links in first post).

Yep, really. For a route which had distinct sections, say one part on a train and another by bike, you would refer to each as one leg of the journey. :slight_smile: Perfectly fine English. :+1:

1 Like

Thank you for the confirmation! Felt a little odd writing that :slight_smile:

1 Like

New App Features

New feature: trainroutes with connections

  • New checkbox that restricts displayed trainroutes to direct routes if checked
  • New trainroutes include up to one connecting trainline if checkbox is not checked

Tree data structure for trainlines

The tree data structure prevents rendering train lines that share the same route. The data root element is the central station of the start destination.

  • trainline data is structured as tree data with start train station as root data

Improved GUI element design

  • Checkboxes, inputs, radio buttons, submit buttons have a new surface

Improved Rerendering

  • Added React.memo and restructured elements in order to prevent costly rerenderings