{"id":26897981,"url":"https://github.com/igorkrupenja/zaino","last_synced_at":"2025-05-13T00:33:49.255Z","repository":{"id":42446899,"uuid":"280472455","full_name":"IgorKrupenja/zaino","owner":"IgorKrupenja","description":"First-year university project. Hiking and mountaineering equipment web app.","archived":false,"fork":false,"pushed_at":"2023-07-23T18:12:46.000Z","size":5027,"stargazers_count":6,"open_issues_count":111,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2023-07-23T19:25:55.014Z","etag":null,"topics":["firebase","firestore","hiking","react","redux","sports","typescript"],"latest_commit_sha":null,"homepage":"https://zaino.cc","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/IgorKrupenja.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-07-17T16:24:14.000Z","updated_at":"2023-06-25T20:39:05.000Z","dependencies_parsed_at":"2023-02-17T23:15:45.878Z","dependency_job_id":null,"html_url":"https://github.com/IgorKrupenja/zaino","commit_stats":null,"previous_names":[],"tags_count":2,"template":null,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/IgorKrupenja%2Fzaino","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/IgorKrupenja%2Fzaino/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/IgorKrupenja%2Fzaino/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/IgorKrupenja%2Fzaino/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/IgorKrupenja","download_url":"https://codeload.github.com/IgorKrupenja/zaino/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246586028,"owners_count":20801026,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["firebase","firestore","hiking","react","redux","sports","typescript"],"created_at":"2025-04-01T05:07:55.604Z","updated_at":"2025-04-01T05:07:56.581Z","avatar_url":"https://github.com/IgorKrupenja.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ch1 align=\"center\"\u003e️\u003cimg src=\"packages/web-app/src/images/logo.svg\" height=\"26px\" /\u003e Zaino\u003c/h1\u003e\n\u003ch3 align=\"center\"\u003e\n  Hiking and mountaineering equipment app for the meticulous adventurer.\n\u003c/h3\u003e\n\n\u003cdiv align=\"center\"\u003e🚨 This was my early first-year university project so some things could have been done better. 😉 It is \u003cstrong\u003eno longer maintained\u003c/strong\u003e but \u003ca href=\"https://zaino.cc\"\u003elive demo\u003c/a\u003e is up. Running the app and self-hosting it is also possible after completing \u003ca href=\"#setup\"\u003esetup\u003c/a\u003e.\u003c/div\u003e\n\n\u003ch4 align=\"center\"\u003e\n  \u003ca href=\"https://zaino.cc\"\u003eLive demo\u003c/a\u003e ᐧ \u003ca href=\"#setup\"\u003eSetup\u003c/a\u003e ᐧ \u003ca href=\"https://github.com/igor-krupenja/zaino/blob/master/CHANGELOG.md\"\u003eChangelog\u003c/a\u003e\n\u003c/h4\u003e\n\n\u003cdiv align=\"center\"\u003eBuilt with Typescript, React and Firebase.\u003c/div\u003e\n\n\u003c!-- todo new screen --\u003e\n\n![Screenshot](screenshot.webp)\n\n## Contents \u003c!-- omit from toc --\u003e\n\n- [Setup](#setup)\n- [Deployment](#deployment)\n- [Running locally](#running-locally)\n- [Project structure](#project-structure)\n- [Technologies](#technologies)\n- [Functionality](#functionality)\n- [Possible improvements](#possible-improvements)\n- [Changelog](#changelog)\n- [Acknowledgements](#acknowledgements)\n\n## Setup\n\nBefore starting, make sure that you have Node 16 installed — or use something like [nvm](https://github.com/nvm-sh/nvm).\n\n### Common\n\n1. [Install Google's Cloud SDK](https://cloud.google.com/sdk/docs/install) and run `gcloud auth login` to log in.\n2. Run `npm install -g firebase-tools` to install Firebase CLI globally and run `firebase login` to log in.\n3. Run `npm install` in the _root_ directory of the cloned/forked repo.\n4. Go to [Firebase console](https://console.firebase.google.com/u/0/) and create two projects, one for **development** environment and one for **production** environment.\n5. In Firebase console, create _Web_ apps for the two projects you just made. Refer to this [article](https://support.google.com/firebase/answer/9326094) for additional information.\n6. In Firebase console, open Project Settings and note the Project IDs for the projects you created.\n7. Create a `.firebaserc` file in the _root_ of this repo and add the Project IDs there. Example with dummy values below:\n\n```json\n{\n  \"projects\": {\n    \"development\": \"zaino-dev-3ea56\",\n    \"production\": \"zaino-prod-236c2\"\n  }\n}\n```\n\n### Web app\n\n1. Go to Firebase console and open Project Settings for your projects.\n2. Scroll down to Your Apps section and locate the code snippet with `firebaseConfig`.\n3. 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:\n\n```shell\nREACT_APP_FIREBASE_API_KEY=\"AIzaSkR_FfdseFcsE3fgg7pdjjjof6jhDSA-dTM\"\nREACT_APP_FIREBASE_AUTH_DOMAIN=\"zaino-dev-3ea56.firebaseapp.com\"\nREACT_APP_FIREBASE_DATABASE_URL=\"https://zaino-dev-3ea56.firebaseio.com\"\nREACT_APP_FIREBASE_PROJECT_ID=\"zaino-dev-3ea56\"\nREACT_APP_FIREBASE_STORAGE_BUCKET=\"zaino-dev-3ea56.appspot.com\"\nREACT_APP_FIREBASE_MESSAGING_SENDER_ID=\"550657824795\"\nREACT_APP_FIREBASE_APP_ID=\"1:550657824795:web:29da52b66934c3ea494f74\"\nREACT_APP_FIREBASE_MEASUREMENT_ID=\"G-EWJOIOADSK\"\n```\n\n#### Caveats ⚠️\n\n- Most of the images used in the [live demo](https://zaino.cc) were purchased from [GraphicRiver](https://zaino.cc) and [Freepik](https://www.freepik.com/) and cannot be made part of this repo due to copyright restrictions. To get images in the app, you can add your own to `packages/web-app/src/images/copyrighted` directory with the following structure:\n\n```shell\n├── categories\n│   ├── backpack.svg\n│   ├── boots.svg\n│   ├── compass.svg\n│   ├── gloves.svg\n│   ├── gps.svg\n│   ├── hat.svg\n│   ├── hook.svg\n│   ├── jacket.svg\n│   ├── knife.svg\n│   ├── pickaxe.svg\n│   ├── poles.svg\n│   ├── shorts.svg\n│   ├── socks.svg\n│   ├── stove.svg\n│   └── tent.svg\n└── mountain.svg \u003c--- loader image\n```\n\n- Privacy policy content used in the [live demo](https://zaino.cc) is not part of the repo. You can add your own to `packages/web-app/src/components/pages/PrivacyPolicyPage/PrivacyPolicyContent.tsx`. Otherwise, it shows a placeholder.\n\n### Firebase\n\n1. Create a Firestore database in Firebase console for your projects, a detailed guide is available [here](https://firebase.google.com/docs/firestore/quickstart#create).\n2. Go to `packages/firebase` and create `.env.development` and `.env.production` files with the variables for your Project IDs. Example with dummy values below:\n\n```shell\nFB_PROJECT_ID=\"zaino-dev-3ea56\"\n```\n\nNote: You can change additional settings like regions and Cloud Storage bucket name in [the `.env` file](packages/firebase/.env).\n\n## Deployment\n\n1. Make sure you did everything in [Setup](#setup) above.\n2. Go to `packages/web-app` and run `npm run deploy` to deploy **production** or `npm run deploy-dev` to deploy **development**.\n3. Go to `packages/firebase` and run `npm run deploy` to deploy **production** or `npm run deploy-dev` to deploy **development**.\n\nDoing this will also enable periodic Firestore backups and seed the database with demo data, see [firebase](#firebase-1) below.\n\n## Running locally\n\n1. Make sure you did everything in [Setup](#setup) and [Deployment](#deployment) above.\n2. Go to `packages/web-app`, run `npm start` and open [localhost:4200](http://localhost:4200). This will _run against a deployed **development** Firebase project_.\n\n## Project structure\n\nThe project is a monorepo. I suggest to open the root folder in editor. It has some root-level config, including [shared VSCode settings](.vscode).\n\nCode is split into several [packages](packages). Each package is a separate [npm workspace](https://docs.npmjs.com/cli/v7/using-npm/workspaces). These are:\n\n### [shared](packages/shared)\n\nA bit of shared code (types).\n\n### [firebase](packages/firebase)\n\n- A config file with Firestore rules: [firestore.rules](packages/firebase/firestore.rules).\n- A [cloud function](packages/firebase/src/database/functions/addSeedData.ts) that seeds the Firestore with demo data from JSON, [seed-data.json](packages/firebase/src/seed-data/seed-data.json). The original [was provided to me by Dmitri](#acknowledgements) as an Excel file. Kudos!\n- Another [function](packages/firebase/src/database/functions/backupDb.ts) for periodic DB backups.\n\n### [web-app](packages/web-app)\n\n- [src/components/](packages/web-app/src/components) App components and [pages](packages/web-app/src/components/pages), along with per-component styles. Styles are in SCSS and follow the BEM convention.\n- [src/firebase/](packages/web-app/src/firebase) Firebase initialisation and a couple of util functions to work with Firestore data.\n- [src/routes/](packages/web-app/src/routes) React Router config and routes.\n- [src/state/](packages/web-app/src/state) State management with Redux.\n- [src/styles/](packages/web-app/src/styles) Style variables and settings that apply to the whole app.\n- [config](packages/web-app/config) and [scripts](packages/web-app/scripts) have some JS files, mostly for Webpack, build and dev server. These is because the app started as a Create React App but was then [ejected](https://create-react-app.dev/docs/available-scripts/#npm-run-eject).\n\n## Technologies\n\n- Typescript\n- React, React Router, Redux\n- Some React UI components: [React Select](https://react-select.com/home), [react-modal](https://github.com/reactjs/react-modal), [react-tiny-popover](https://github.com/alexkatz/react-tiny-popover)\n- SCSS (no frameworks)\n- npm workspaces\n- Cloud Firestore, Firebase Authentication, Firebase Functions, Google Cloud Storage, Firebase Hosting\n\n## Functionality\n\n- **Log-in with Google account**. Fast and secure log in with your Google account.\n- **Data storage with Firestore**. Your data is safely stored in a Cloud Firestore database both with [live demo](https://zaino.cc) and if you self-host Zaino.\n- **Robust search and filtering**. Easily filter and sort your items by name, category, label, weight, etc.\n- **Efficient packing for your next adventure**. Pack list offers a convenient overview of the items you want to take with you, including weight.\n- **Flexible label system**. Organise your items in any way you want with custom labels.\n- **Demo data**. Want to try the app without entering your own data first? Click Load under Demo data in header to populate your inventory with a comprehensive set of sample items. These can be easily removed later.\n- **Self-hosting support**. Concerned about privacy and want to completely self-host your data? This is possible and I have provided a detailed guide in the [Setup](#setup) section below.\n\n## Possible improvements\n\nMost 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:\n\n- The app needs tests.\n- Custom categories would make a nice feature.\n- There is no infinite scroll.\n- State management with Redux is a bit convoluted and could be simpler.\n- The overall inventory and pack management UX could be better.\n- There is no support for mobile screens, narrower than 600px.\n- Add support for multiple packs.\n- Improve accesibility\n\n## Changelog\n\n### 0.1.1 (4th November 2020)\n\n- Added privacy and cookie policy.\n- Fixed usability issue with accidentally closing New item modal on clicking category or labels.\n- Fixed incorrect input being occasionally focused when clicking on a label in Edit label form.\n- Fixed minor styling issues with New label form.\n- Made text selection color less bright.\n- Updated README with a better screenshot.\n\n[See full changelog](CHANGELOG.md).\n\n## Acknowledgements\n\n- Dmitri Shastin for his ideas and sharing his inventory data with me.\n- All the people proving me with feedback.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Figorkrupenja%2Fzaino","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Figorkrupenja%2Fzaino","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Figorkrupenja%2Fzaino/lists"}