Skip to content

Latest commit

 

History

History
 
 

fiestapi

README.md

FiestAPI 📂

This project use the TMB API, to get data from the public transport services at Barcelona.

This project has been development following a Daniel Primo's challenge. Further information about Dani in his website.

The requirements are:

  • Get the list of metro routes and show it in a selector.
  • Get the list of stations of the sellected route.
  • Show the selected route in a map

What problem does it solve? 💡

It really doesn't solve any problem but it has helped me to enter into the library Leaflet and to keep learning React.

Demo 🔗

Link to the demo.

Getting Started ⚡

These instructions will get you a copy of the project up and running on your local machine for development and testing purposes. See deployment for notes on how to deploy the project on a live system.

Prerequisites ✔️

  • You need to have npm installed.
  • In order to consume the TMB API you will need a credentials. Get more information in their web.

Installing 🧭

First you need to install all dependencies:

npm install

Next you will need to create a .env file and put your credentials from TMB API in this file. You have the .env.example as an example.

APP_ID=
APP_KEY=

To start the development server run start script:

npm start

There are build scripts for development and production:

# This will start the build in development
npm run build:dev
# This will start the build in production
npm run build:prod

Deployment 🛰️

Take in account that you will need to set your enviromental variables in your server or in services like Netlify or Heroku.

Built With 👷‍♀️

  • leaflet - a JavaScript library for interactive maps
  • React - A JavaScript library for building user interfaces
  • react-leaflet - React components for Leaflet maps
  • Webpack - Web application bundler

Project structure🏗️

Frontend ✨

The frontend has been developed using React and react-leaflet.

Backend 🧠

There is no backend. This app is consuming the data from TMB API.

Deploy 🚀

Deployed in Netlify.

What I have learned 📖

  • Many of the problems with leaflet are related with the css. Remember to put the leaflet css in the html link, configure your bundler to put it in the right path and give a width and a height to the map.
  • If you want to use the enviromental variables from Netlify, you have to configurate the dotenv-webpack plugin to accept the variables from the system systemvars: true.

webpack.common.js

new Dotenv({
      path: './.env',
      systemvars: true,
    }),
  • I have learned how to fly to a specified points or route in the map using the method flyToBounds.

geojsonContainer.jsx

import React from "react";
import { GeoJSON, useMap } from "react-leaflet";

export const GeoJSONContainer = (props) => {
  const { stationsCollection, sectionsCollection } = props;

  const map = useMap();

  const stationsRef = React.useRef(null);

  React.useEffect(() => {
    if (stationsCollection.features && stationsRef.current) {
      const layer = stationsRef.current;
      map.flyToBounds(layer.getBounds());
    }
  }, [stationsCollection]);
  ...
}

Possible improvements 🔝

  • Style it
  • Add types using Typescript
  • Do the third challenge: get real-time data from API

Authors 👩‍💻