Skip to content

Webapp made for the BCIT Projects 2 course – ShakeGuard helps British Columbians prepare for earthquakes, with or without access to a stable internet connection.

Notifications You must be signed in to change notification settings

ShakeGuard/2800-202210-BBY06

Repository files navigation

Project: ShakeGuard

Description

Our team, BBY6, developed ShakeGuard to help British Columbians prepare for earthquakes, with or without access to a stable internet connection.

Technologies Used

Front End

  • HTML
  • CSS
  • JS

Back End

  • Service Worker
  • MongoDB
  • Express
  • BCrypt

Contents

│ .gitignore
│ downloadSecrets.mjs
│ logging.mjs
│ main.js
│ package-lock.json
│ package.json
│ readme.txt
│ shakeguardSecrets.mjs

├─.github
│ └─workflows
│ validate-css.yml
│ validate-html.yml

├─.secrets
│ mongodb_auth.json
│ session.json

├─.vscode
│ launch.json
│ removeSecrets.cmd
│ removeSecrets.sh
│ tasks.json

├─data
│ articles.json
│ categories.json
│ items.json
│ kits.json
│ users.json

├─deploy
│ DEPLOYING.md
│ shakeguard.service

├─html
│ dashboard.html
│ index.html
│ login.html
│ resource.html
│ resource_page1.html
│ resource_page2.html
│ resource_page3.html
│ resource_page4.html
│ resource_page5.html
│ resource_page6.html
│ user-profile.html

├─logs
│ access.log
│ app.log
│ error.log

├─public
│ ├─css
│ │ admin-dashboard.css
│ │ all_resource_pages.css
│ │ buttons.css
│ │ card.css
│ │ forms.css
│ │ header-footer.css
│ │ index.css
│ │ login.css
│ │ resource.css
│ │ style.css
│ │ user-profile.css
│ │
│ ├─images
│ │ ali-kazal-jwyFn9kxQuc-unsplash-greyscale.jpg
│ │ ali-kazal-jwyFn9kxQuc-unsplash-smaller.jpg
│ │ ali-kazal-jwyFn9kxQuc-unsplash.jpg
│ │ comp2800_logo.svg
│ │ comp2800_logo_favicon.ico
│ │ comp2800_logo_white.svg
│ │ Default-Profile-Picture.jpg
│ │ Default-Profile-Picture.txt
│ │ menu-icon-black.svg
│ │ mountain1.jpg
│ │ mountain2.png
│ │ mountain3.png
│ │ mountain4.jpg
│ │ Resource1.jpg
│ │ Resource2.jpg
│ │ Resource3.jpg
│ │ Resource4.jpg
│ │ Resource5.jpg
│ │ Resource6.jpg
│ │ user-pic_Tracy.svg
│ │
│ └─js
│ client.js
│ dashboard.js
│ logout.js
│ profile.js
│ toasts.mjs
│ user-profile.js

└─templates card.html
footer.html
header.html
kit.html
profile.html

How to install or run the project

To install and run the project locally:

  1. Clone the repo
  2. Install MongoDB
  3. In command or terminal, navigate to the cloned repo and install node.js and required modules
  4. To run the project, make sure you’re on the main branch, then type npm start
  5. Open a browser and type localhost:8000 in URL bar to see the project in action. Ideally, use Firefox or Chrome

Note: While we aim to resolve as many bugs as we can, there may be some that we’ve missed. Our testing plan can be seen here.

How to use the product (Features)

  1. From the landing page, click “Start your Kit”.
  2. Log in with account credentials
    • Note: At this point in time, there is no signup page. Once the GitHub project is cloned and mongoDB is set up locally, four default user accounts will be created (two admins and two regular users). Use account credentials (provided separately) for these users to login.
  3. (Customizable Profile) After logging in, you should be redirected to the profile page. It has your profile picture and “Edit Profile” button.
    • If you would like to modify account details, click on “Edit Profile” and you should see the window expand and buttons appear on the bottom right of each respective field.
    • Click on the Pen Icons to enable editing.
  4. (Digital Earthquake Kit) Once logged in, you should immediately see the profile page.
    • Scroll down and find “Your Kits” and click on “Create Kit”.
    • Select either the “Grab-and-Go Bag” or “Home Kit” and click “Submit” to create it.
  5. (Admin DashBoard) Once logged in with an Admin Account, you should land immediately on the profile page.
    • Scroll down to find “Admins”.
    • Click on the Pen icon to edit or click on the Trash icon to delete the respective accounts.
  6. (Resource Page) There is a hamburger icon on the top right, click it and it will expand a drop down menu containing “Your Kit”, “Resource” and “Log out”.
    • Click “Resource”. At this point you should see the title “Resource” with an assortment of cards under the title.
    • Click into any one of the cards to read more about their respective subjects.

Credits, References, and Licenses

Images

Photos used in ShakeGuard are sourced from Unsplash and Pexels.

Unsplash

Pexels

BenSound

"All That" By Benjamin Tissot (also known as Bensound) Music: https://www.bensound.com

Fonts

We used fonts from Fontshare, Google Fonts, and Tom Murphy.

  • Fontshare - Fonts provided by Fontshare are free for personal and commercial use, but not open-source. We have used the following fonts via Fontshare’s API. The End-User License Agreement can be found here.

    • Satoshi - ​​Designed by Deni Anggara
    • Sharpie - Designed by Théo Guillard
  • Google Fonts - We’ve used Google’s Material Icons via their API. Open source.

    • Material Icons
  • Tom Murphy VII - Fonts provided by Tom are free for personal and commercial use. We have downloaded the following font which will be self-hosted. The license can be found here.

    • Levity

Contact Information

About

Webapp made for the BCIT Projects 2 course – ShakeGuard helps British Columbians prepare for earthquakes, with or without access to a stable internet connection.

Topics

Resources

Stars

Watchers

Forks

Packages

No packages published

Contributors 4

  •  
  •  
  •  
  •