search

IgorKrupenja / zaino

First-year university project. Hiking and mountaineering equipment web app.
https://zaino.cc
MIT License
7 stars 0 forks source link
firebase firestore hiking react redux sports typescript

readme

️ Zaino

Hiking and mountaineering equipment app for the meticulous adventurer.

🚨 This was my early first-year university project so some things could have been done better. 😉 It is no longer maintained but live demo is up. Running the app and self-hosting it is also possible after completing setup.

Live demo ᐧ Setup ᐧ Changelog

Built with Typescript, React and Firebase.

Screenshot

Contents

Setup

Before starting, make sure that you have Node 16 installed — or use something like nvm.

Common

  1. Install Google's Cloud SDK and run gcloud auth login to log in.
  2. Run npm install -g firebase-tools to install Firebase CLI globally and run firebase login to log in.
  3. Run npm install in the root directory of the cloned/forked repo.
  4. Go to Firebase console and create two projects, one for development environment and one for production environment.
  5. In Firebase console, create Web apps for the two projects you just made. Refer to this article for additional information.
  6. In Firebase console, open Project Settings and note the Project IDs for the projects you created.
  7. Create a .firebaserc file in the root of this repo and add the Project IDs there. Example with dummy values below:
{
  "projects": {
    "development": "zaino-dev-3ea56",
    "production": "zaino-prod-236c2"
  }
}

Web app

  1. Go to Firebase console and open Project Settings for your projects.
  2. Scroll down to Your Apps section and locate the code snippet with firebaseConfig.
  3. Go to packages/web-app and create .env.development and .env.production files with the variables from firebaseConfig. Example with correct format and dummy values below:
REACT_APP_FIREBASE_API_KEY="AIzaSkR_FfdseFcsE3fgg7pdjjjof6jhDSA-dTM"
REACT_APP_FIREBASE_AUTH_DOMAIN="zaino-dev-3ea56.firebaseapp.com"
REACT_APP_FIREBASE_DATABASE_URL="https://zaino-dev-3ea56.firebaseio.com"
REACT_APP_FIREBASE_PROJECT_ID="zaino-dev-3ea56"
REACT_APP_FIREBASE_STORAGE_BUCKET="zaino-dev-3ea56.appspot.com"
REACT_APP_FIREBASE_MESSAGING_SENDER_ID="550657824795"
REACT_APP_FIREBASE_APP_ID="1:550657824795:web:29da52b66934c3ea494f74"
REACT_APP_FIREBASE_MEASUREMENT_ID="G-EWJOIOADSK"

Caveats ⚠️

├── categories
│   ├── backpack.svg
│   ├── boots.svg
│   ├── compass.svg
│   ├── gloves.svg
│   ├── gps.svg
│   ├── hat.svg
│   ├── hook.svg
│   ├── jacket.svg
│   ├── knife.svg
│   ├── pickaxe.svg
│   ├── poles.svg
│   ├── shorts.svg
│   ├── socks.svg
│   ├── stove.svg
│   └── tent.svg
└── mountain.svg <--- loader image

Firebase

  1. Create a Firestore database in Firebase console for your projects, a detailed guide is available here.
  2. Go to packages/firebase and create .env.development and .env.production files with the variables for your Project IDs. Example with dummy values below:
FB_PROJECT_ID="zaino-dev-3ea56"

Note: You can change additional settings like regions and Cloud Storage bucket name in the .env file.

Deployment

  1. Make sure you did everything in Setup above.
  2. Go to packages/web-app and run npm run deploy to deploy production or npm run deploy-dev to deploy development.
  3. Go to packages/firebase and run npm run deploy to deploy production or npm run deploy-dev to deploy development.

Doing this will also enable periodic Firestore backups and seed the database with demo data, see firebase below.

Running locally

  1. Make sure you did everything in Setup and Deployment above.
  2. Go to packages/web-app, run npm start and open localhost:4200. This will run against a deployed development Firebase project.

Project structure

The project is a monorepo. I suggest to open the root folder in editor. It has some root-level config, including shared VSCode settings.

Code is split into several packages. Each package is a separate npm workspace. These are:

shared

A bit of shared code (types).

firebase

web-app

Technologies

Functionality

Possible improvements

Most of the code was written as a summer project after my first year in uni. So there are quite a few areas for possible improvement:

Changelog

0.1.1 (4th November 2020)

See full changelog.

Acknowledgements