/package-tracker-busy-bees

Welcome to Busy Bees 2.0,the goal of this project was to fetch data from a RESTful API and display the user's packages on a simple web application. Additionally, a map displays the pick-up location and its coordinates for each package. This application supports English and Swedish languages.

Primary LanguageJavaScript

Busy Bees 2.0 - Package Tracker

react sass Firebase MIT

Overview

Welcome to Busy Bees 2.0, an assignment from Novare Potencial Academy. The goal of this project was to fetch data from a RESTful API and display the user's packages on a simple web application. Additionally, a map displays the pick-up location and its coordinates for each package. This application supports english and swedish languages. Click here to visit.


Table of Contents



Specification


The goal of this project was to build a multiple page application for a Vegan Restaurant as an assignment from Novare Potential Academy.

Project Organisation


Requirement gathering


Assignment


Project analysis


Google Spreadsheets link


Component tree


The component tree allows the visualization of the different parts of the application.

View on Whimsical

Design mockup


Figma mockup


How to run the project


To run the project in the development mode, follow the instructions below:

Download or clone the repository in your computer:

$ git clone https://github.com/marcelala/package-tracker.git

In the repository folder:

  • install project dependencies with
npm install
  • start the development server with
npm start

To run the project in the production mode, use this command intstead:

npm run build


Dependencies & Tools Used


  • As a project generated with create-react-app, it includes React and ReactDOM as dependencies. It also includes a set of scripts used by Create React App as a development dependency.
  • Webpack for handling all assets, as Webpack offers a custom way of “extending” the concept of import beyond JavaScript.
  • React Router Dom for routing Navigation.
  • Node-SASS Sassy CSS for styling
  • Firebase for hosting the application.
  • Mapbox for maps.
  • Moment.js for formatting dates and times.
  • i18next for internationalization.
  • Worker-loader enables the transpilation of mapbox in react applications.

DevDependencies



Attributions & Helpful Links