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)
@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 They might become useful when I extend the app with train connections including a change…
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.
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?
Anyone who visited the live link (1st post) before might need to hard reload.
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’.
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. Perfectly fine English.
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
Thank you! That’s nice to hear. It’s been a while since I last had the time to work on it, but there are still plans to add data for more cities in Germany. Have a good ride!
, love the idea. Will have to keep an eye open to see if you go further with it.
