Horario Villarino - 319 app

View Demo

Why?

Because I'm very tired of using this one webpage. The main idea was improve the way of using the data about the timetables of the bus and create a user experience which could help to users to see what is the next to arrive at some selected bus stop.

First Steps

First of all, I looked for the source of data (the timetables). After do a little of research and can't found any REST API to fetch the data and without any other option, I decided to build mine. I started to parse the table directly from the HTML of the page. After several hours of reverse engineering I end up with a little more clean data structure to work with. I built an ExpressJS app as a BE bypass to fetch and parse the HTML and finally send the specific times for a specific request.
As a relevant thing, I can mention the use of memory-cache. Since the timetables doesn't change very often I decided to use a cache to avoid unnecessary GET request to the original url.

And then, what?

Well, with the help of Figma I create few mockups to put some of my design ideas in something a little more real.
After this, because I like ReactJS and PWAs so much and I want to learn all that I can (I think one of the best way to learn something is reading about it but that's only the 50%, the other 50% is coding and making stuffs). With the help of CRA I started a new app and then I began with the process of transform the design and ideas into real code/app. I will detail some concepts and features that I used or implemented.

• Hooks (all components are functional and use hooks only)
  • useState
  • useEffect
  • useCallback
  • useReducer. In combination with the Context API I implemented the state management of the entire app following the redux's concepts.
• OnLine/OffLine notification
• New Update! notification (Service Worker promise based on)
• All content is cached for offline use! notification
• Responsive design (Mobile-first)
• SVG icons

Deployment

To publish this beautiful app 😋, I used ▲ Zeit Now to deploy both, BE and FE. I had to research and test a lot to find the correct now.json config but the effort wasn't useless.