SafePassage - Yellow Team

COMP_SCI 394 - Winter 2025 - Northwestern University

|

Table of Contents

• SafePassage - Yellow Team
  • Table of Contents
  • Project Description
  • File Structure and Logic
  • Getting Started
    • Preparation
      • 0. Clone this Repo and open in VS Code
      • 1. Node.js Environment Setup
      • 2. Firebase Configuration
      • 3. .env Configuration
    • Installation
      • 1. Dependencies Installation (with pnpm)
      • 2. Firebase connection
      • 3. Backend
    • Development
    • Production (Preview)
    • Deploy to Firebase Hosting
    • Linting
  • Dev Team Members
  • License

Project Description

SafePassage is a React based web application that allows users with medical conditions who want to traveling abroad to generate a QR code that contains their medical information. This QR code can be scanned by medical professionals in the destination country to access the user's medical information in translated language. The application also auto-send SMS messages to the user's emergency contacts when the emergency medical QR code is scanned.

See Issues and Pull Requests for more development progress and details.

File Structure and Logic

This project uses a component-based structure with a focus on clear separation of concerns. Key files and folders:

.
├── LICENSE
├── README.md                  # Project documentation and usage guide
├── vite.config.ts             # Vite configuration file
├── tsconfig.json              # Typescript config file
├── firebase.json              # Firebase configuration for hosting
├── eslint.config.mjs          # Eslint configuration
├── package.json               # Dependencies
├── pnpm-lock.yaml             # pnpm lock file
└── src                        # Source code
│   ├── App.tsx                # Main application component
│   ├── index.tsx              # Entry point of the application
│   ├── routes.tsx             # Application routes
│   ├── global.css             # Global styles
│   ├── components             # Shared components and features
│   │   ├── common             # Common components used across the app
│   │   ├── Home               # Home page components
│   │   ├── Me                 # Me page components
│   │   └── ...                # Other pages' components
│   ├── stores                 # Zustand related global state management
│   ├── hooks                  # Custom hooks for specialized logic
│   ├── pages                  # Application pages
│   ├── utils                  # Utility functions and Firebase configurations
│   │   ├── firebase           # Firebase configurations
│   │   └── ...
│   ├── contexts               # React context providers
│   └── types                  # Global types define here (such as schemas).
└── backend                    # Backend for sending emergency SMS (See backend README)
    └── README.md              # Backend documentation

The main components and utilities are organized under src/components and src/utils.

Getting Started

Preparation

0. Clone this Repo and open in VS Code

git clone https://github.com/394-w25/SafePassage.git

We highly recommend using Visual Studio Code as the IDE for this project.

We have awesome extensions and configurations set up for this project in VSCode.

Auto-formatting, linting, and lots other helpful features are already set up.

Once you open this project (SafePassage) inside VSCode, it will prompt you with a message saying that some recommended extensions are required for this project. Install them.

1. Node.js Environment Setup

Make sure you have Node.js (>= 20.0.0) installed on your machine. Recommend using LTS version.

Check whether you have pnpm installed by running:

pnpm --version

If you don't have pnpm installed, you can install it by running:

npm install --global corepack@latest
corepack enable pnpm

If any error occurs, please refer to the official installation documentation.

2. Firebase Configuration

To run the application, you need to set up a Firebase project and configure it with the application. You can follow the steps below:

1. Create a new Firebase project on the Firebase Console.

2. Add a new web app to the project (since we are using React).

3. Copy the Firebase configuration values from the Firebase SDK snippet.

4. Open src/utils/firebase/firebaseConfig.ts and replace line 10 to 17 with the copied values.

   const firebaseConfig = {
     apiKey: "",
     authDomain: "",
     projectId: "",
     storageBucket: "",
     messagingSenderId: "",
     appId: "",
   };

5. Enable the Firestore, Authentication, and Hosting services in the Firebase console.

6. Manually add a value to the Firestore database for Bearer Auth Token to the backend.

   Collection: `tokens`
   Document: `message`
   Field: `token`
   Value: `YOUR_AUTH_TOKEN(SAME_AS_BACKEND_AUTH_TOKEN)`
   

3. .env Configuration

We have a .env file in the root directory. This file is used to store the only 2 environment variables that are used in the application.

⚠️ Warning

This is not a secure env file since its for frontend only.

Do not include trailing slashes in the URLs.

1. VITE_BASE_URL: The base URL of the frontend application (used for QR code generation).
2. VITE_API_URL: The base URL of the backend API (used for sending SMS messages).

Installation

1. Dependencies Installation (with pnpm)

Run the following command to install all dependencies (in the root directory):

pnpm install

2. Firebase connection

Run the following command to connect the Firebase project with the application:

pnpm firebase login

Then use the following command to deploy the Firestore database rules:

pnpm firebase deploy --only firestore

3. Backend

Go to backend README to set up the backend. The backend is required for the sending emergency SMS feature (not required for development).

Development

To start the development server, run:

pnpm dev

And open http://localhost:5173/ in your browser.

Production (Preview)

To build the production version, run:

pnpm build

And to start the production server, run:

pnpm start

Deploy to Firebase Hosting

Only do this after the production build.

To deploy the application to Firebase Hosting, run:

⚠️ Make sure you have already connected the Firebase project with the application.

⚠️ Make sure you have already built the production version.

pnpm run deploy

Linting

Note: This step is only for developing purpose.

Auto linting on save and commit is already set up. You can also run the following command to lint the code:

pnpm run lint:fix

Dev Team Members

Thanks goes to all our dev team members who contributed to this project. 🎉

Any issue? Contact @ZL-Asica.

License

This project is licensed under the MIT License - see the LICENSE file for details.