# Project export: Travel plate

This document was generated by HackStack to give an AI agent context about a hackathon project. Sections are labeled with their provenance; content marked as truncated was cut to keep this document small.

## Project metadata

- Hackathon: TreeHacks 2024
- Tagline: For solo travelers, looking for someone to eat with, to bring people together with good food.
- Devpost: https://devpost.com/software/travel-plate-g6pvu4
- GitHub: https://github.com/sheenalai2012/treehacks
- Team: 2 GitHub contributor(s) — annieliu10 (13 commits), Sheena Lai (3 commits)

## Devpost submission (written by the team)

### Inspiration

We both had solo traveling experiences and found ourselves pretty much always eating alone on our solo trips. We wondered if we could build an app that helps us connect with others who are also solo travelers to eat together.

### What it does

This is a web app that contains a form which the user submits to get a list of potential matches that are in close proximity to them and have similar food preferences as them as well.

### How we built it

We built it using Firebase, React and Javascript.

### Challenges we ran into

I haven't really worked with Javascript before so this is my first time using Javascript and there was a learning curve in the beginning however after reading some documentation, I was able to get up to speed pretty quickly.

### Accomplishments we're proud of

We were able to learn fast and reiterate quickly on our idea.

### What we learned

Writing a simple design doc helped us coordinate and be clear on what each of us was working on respectively.

### What's next

After the user clicks into one of the potential matches, we want to display a list of restaurants that meet their preferences and both of them can go to together.

## README (from the GitHub repository)

# ReactJS Web App with Firebase Tutorial 2023
Created by Ameya Jadhav

Updated by Ameya Jadhav

### Overview
For this Hackpack, we are going to develop a simple online **Personal To-Do List** - a website where you can log in and keep track of your to-do items. We will be using ReactJS and simple HTML. No CSS will be used in this project, but left as an extension opportunity to this project. In this tutorial, you'll learn the basic process behind making React web apps using Firebase backend for authentication and data storage. Let's get started!

### Start create-react-app
* If you don't have Node.js and npm already installed on your computer, install it from [here](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm).

* We will be using Visual Studio Code in this hackpack. Feel free to use any code editor, but using Visual Studio Code is recommended.

* Run the command `npx create-react-app hackpack-web-firebase`. A directory titled hackpack-web-firebase will be created.

* In the directory, run the command `npm start`. The create-react-app starter project will be shown in your localhost window (as seen below).

![](/docs_assets/create-react-app.png)

### Building template

We will be creating several files and directories before we start coding.

* Create a new `\src\routes\Login\login.component.jsx` file.
* Create a new `\src\routes\ToDoListHome\to-do-list-home.component.jsx` file.
* Create a new `\src\utils\firebase\firebase.utils.js` file.
* Create a new `\.env` file.

The `login.component.jsx` file will be our landing page asking the user to log into their account. The `to-do-list-home.component.jsx` will be our home page after the user logs in where he/she can manage their to-do list. The `firebase.utils.js` file will be the interface file to connect to our Firebase Authentication and Firestore services. The `.env` file will securely hold our Firebase tokens and secrets.

### Connecting to Firebase

We will now connect our project to our Firebase account. Please go ahead and complete ONLY step 1 from this [Firebase docs website](https://firebase.google.com/docs/web/setup). We will complete the other steps together.

* Run `npm install firebase` in your project directory to install the necessary Firebase support libraries.
* Copy the firebaseConfig keys into your `\.env` file. These keys should be listed on your console as below...

```
// Your web app's Firebase configuration
const firebaseConfig = {
  apiKey: "AIzaDJSAIDjsmsSIj92SDJIEWmfioadYEI",
  authDomain: "hackpack-web-firebase.firebaseapp.com",
  projectId: "hackpack-web-firebase",
  storageBucket: "hackpack-web-firebase.appspot.com",
  messagingSenderId: "9847851385",
  appId: "1:89798123132:web:sd84d6a3w8f98as1563486"
};
```
and should be formatted as below in your '\.env' file.
```
REACT_APP_API_KEY=AIzaDJSAIDjsmsSIj92SDJIEWmfioadYEI
REACT_APP_AUTH_DOMAIN=hackpack-web-firebase.firebaseapp.com
REACT_APP_PROJECT_ID=hackpack-web-firebase
REACT_APP_STORAGE_BUCKET=hackpack-web-firebase.appspot.com
REACT_APP_MESSAGING_SENDER_ID=9847851385
REACT_APP_APP_ID=1:89798123132:web:sd84d6a3w8f98as1563486
```

### Setting up Firebase - Authentication & Firestore

Begin setup of Authentication on Firebase online console...
* Add the "Email/Password" Native provider when asked to set up a sign-in provider
* Do not enable passwordless sign-in

![](/docs_assets/auth.png)

Begin setup of Firestore Database on Firebase online console...
* Click Create Database
* Use all default/recommended options and set up.

Once set up, you should see sometime similar to the below image.

![](/docs_assets/firestoredb.png)

Click on the Rules tab and replace the current database rules with the following, pressing Publish when finished.

```
rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /{document=**} {
      allow read, write;
    }
  }
}
```

## Now Let's Start Building our Todo-List Web App

Our web app will have two different aspects. One part will be the front-end code to show the web app, and the other part will be the "backend" calls to our Firebase service to authenticate the user and store/retrieve the to-do list.

We will first set up `App.js` file. `App.js` is the starting point of our app. The app component is the main component in React which will act as a container for all of our other components. Replace the template code in `App.js` with the following...

```javascript
import { React } from 'react';
import {
    BrowserRouter,
    Routes,
    Route,
} from 'react-router-dom';

import Login from './routes/Login/login.component';
import ToDoListHome from './routes/ToDoListHome/to-do-list-home.component';

import './App.css';

function App() {
  return (
    <div className='Root'>
        <div className='App'>
            <BrowserRouter>
                <Routes>
                    <Route path="/" element ={ <Login /> } />
                    <Route exact path="/home" element ={ <ToDoListHome /> } />
                </Routes>
            </BrowserRouter>
        </div>
    </div>
  );
}

export default App;
```
This code is linking our two other components (`Login` and `ToDoListHome`) to specific url paths for our app - `/` and `/home` respectively.

Next, we will write the `\src\utils\firebase\firebase.utils.js` file which will hold our "backend" calls to our Firebase service to authenticate the user and store/retrieve the to-do list. Copy the following code into `\src\utils\firebase\firebase.utils.js`.

```javascript
import { initializeApp } from "firebase/app";

import {
    getAuth,
    signInWithEmailAndPassword,
    signOut,
    onAuthStateChanged,
    createUserWithEmailAndPassword
} from "firebase/auth";
import {
    getFirestore,
    getDoc,
    doc,
    updateDoc,
    setDoc,
} from "firebase/firestore";

const firebaseConfig = {
    apiKey: process.env.REACT_APP_API_KEY,
    authDomain: process.env.REACT_APP_AUTH_DOMAIN,
    projectId: process.env.REACT_APP_PROJECT_ID,
    storageBucket: process.env.REACT_APP_STORAGE_BUCKET,
    messagingSenderId: process.env.REACT_APP_MESSAGING_SENDER_ID,
    appId: process.env.REACT_APP_APP_ID,
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);
export const auth = getAuth(app);
export const db = getFirestore(app);

export const logInWithEmailAndPassword = async (email, password) => {
    await signInWithEmailAndPassword(auth, email, password);
};

export const registerWithEmailAndPassword = async (email, password) => {
    const res = await createUserWithEmailAndPassword(auth, email, password);
    const user = res.user;

    await setDoc(doc(db, "to-do", email), {
        items: [],
    });
};

export const getToDoList = async (email) => {
    try {
        const docSnap = await getDoc(doc(db, "to-do", email));

        return docSnap.data().items;
    } catch (error) {
        console.error(error);
    }
};

export const addToDoItem = async (currentItems, email, newItem) => {
    await updateDoc(doc(db, "to-do", email), {
        items: [...currentItems, newItem],
    });
};

export const deleteToDoItem = async (currentItems, email, deleteItem) => {
    var newItems = currentItems;
    
    const index = newItems.indexOf(deleteItem);

    if (index > -1) {
        newItems.splice(index, 1);
    }

    await updateDoc(doc(db, "to-do", email), {
        items: [...newItems],
    });
};
```
In this file, we initially register and link our web app to our Firebase console. We do that through the `.env` keys we previously stored. We have 5 main functions in this file: `logInWithEmailAndPassword`, `registerWithEmailAndPassword`, `getToDoList`, `addToDoItem`, and `deleteToDoItem`. Each of these functions does exactly what their name suggests. We will call these functions from our front-end based on user actions.

Next, we will set up our front-end interface for the user. There are two files we will need to write: `\src\routes\Login\login.component.jsx` and `\src\routes\ToDoListHome

[README truncated for size]

## Detected evidence (automated analysis)

Indexed codebase: 18 recognized source files, 52 KB.
- CSS (language) — detected in the code
- Express (technology) — detected in the code
- Firebase (technology) — detected in the code
- HTML (language) — detected in the code
- JavaScript (language) — detected in the code
- React (technology) — detected in the code
- Tailwind CSS (technology) — detected in the code
- TypeScript (language) — detected in the code

## Codebase structure (from repository index)

### Files (22 of 22)

```
.gitignore
package.json
public/index.html
public/manifest.json
public/robots.txt
README.md
src/App.css
src/App.js
src/App.test.js
src/components/MultiSelect.tsx
src/firebase/firebase.utils.js
src/index.css
src/index.js
src/output.css
src/reportWebVitals.js
src/routes/Home/home.jsx
src/routes/Login/login.component.jsx
src/routes/Match/match.jsx
src/routes/Request/request.jsx
src/setupTests.js
src/utils/utils.js
tailwind.config.js
```

### Dependencies

- package.json: @emotion/react@^11.11.3, @emotion/styled@^11.11.0, @mui/material@^5.15.10, @testing-library/jest-dom@^5.16.5, @testing-library/react@^13.4.0, @testing-library/user-event@^13.5.0, express@^4.18.2, firebase@^9.23.0, react@^18.2.0, react-dom@^18.2.0, react-firebase-hooks@^5.1.1, react-router-dom@^6.6.0, react-scripts@5.0.1, tailwindcss@^3.4.1, web-vitals@^2.1.4

### Recent commits (newest first)

- done
- del
- changes
- fix getMatches
- refactor
- fix package.json
- fix server
- rest of changes
- BE changes
- chnage package-lock.json
- go back
- change package-lock.json
- oaidfhiosa
- BE changes
- frontend wip
- Update firebase.utils.js
- code commit
- Add files via upload
- Update README.md
- Add files via upload

## Key source files (fetched from GitHub, selected and truncated for size)

### package.json

```
{
  "name": "hackpack-web-firebase",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@emotion/react": "^11.11.3",
    "@emotion/styled": "^11.11.0",
    "@mui/material": "^5.15.10",
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "express": "^4.18.2",
    "firebase": "^9.23.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-firebase-hooks": "^5.1.1",
    "react-router-dom": "^6.6.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "tailwindcss": "^3.4.1"
  }
}

```

### src/index.js

```javascript
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

```

### src/App.js

```javascript
import { React } from 'react';
import {
    BrowserRouter,
    Routes,
    Route,
} from 'react-router-dom';

import Login from './routes/Login/login.component';
import Home from './routes/Home/home';

import './App.css';

function App() {
  return (
    <div className='Root'>
        <div className='App'>
            <BrowserRouter>
                <Routes>
                    <Route path="/" element ={ <Login /> } />
                    <Route exact path="/home" element ={ <Home /> } />
                </Routes>
            </BrowserRouter>
        </div>
    </div>
  );
}

export default App;

```

### tailwind.config.js

```javascript
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
}
```

### src/setupTests.js

```javascript
// jest-dom adds custom jest matchers for asserting on DOM nodes.
// allows you to do things like:
// expect(element).toHaveTextContent(/react/i)
// learn more: https://github.com/testing-library/jest-dom
import '@testing-library/jest-dom';

```

### src/App.test.js

```javascript
import { render, screen } from '@testing-library/react';
import App from './App';

test('renders learn react link', () => {
  render(<App />);
  const linkElement = screen.getByText(/learn react/i);
  expect(linkElement).toBeInTheDocument();
});

```

### src/reportWebVitals.js

```javascript
const reportWebVitals = onPerfEntry => {
  if (onPerfEntry && onPerfEntry instanceof Function) {
    import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
      getCLS(onPerfEntry);
      getFID(onPerfEntry);
      getFCP(onPerfEntry);
      getLCP(onPerfEntry);
      getTTFB(onPerfEntry);
    });
  }
};

export default reportWebVitals;

```

### src/index.css

```css
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
    monospace;
}

```

### src/App.css

```css
@tailwind base;
@tailwind components;
@tailwind utilities;

.App {
  text-align: center;
}

.App-logo {
  height: 40vmin;
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .App-logo {
    animation: App-logo-spin infinite 20s linear;
  }
}

.App-header {
  background-color: #282c34;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(10px + 2vmin);
  color: white;
}

.App-link {
  color: #61dafb;
}

@keyframes App-logo-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

```

### public/index.html

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
    <!--
      manifest.json provides metadata used when your web app is installed on a
      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
    -->
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <!--
      Notice the use of %PUBLIC_URL% in the tags above.
      It will be replaced with the URL of the `public` folder during the build.
      Only files inside the `public` folder can be referenced from the HTML.

      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
      work correctly both with client-side routing and a non-root public URL.
      Learn how to configure a non-root public URL by running `npm run build`.
    -->
    <title>React App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    <!--
      This HTML file is a template.
      If you open it directly in the browser, you will see an empty page.

      You can add webfonts, meta tags, or analytics to this file.
      The build step will place the bundled scripts into the <body> tag.

      To begin the development, run `npm start` or `yarn start`.
      To create a production bundle, use `npm run build` or `yarn build`.
    -->
  </body>
</html>

```

[8 more indexed source files omitted to keep this export small. The full file list is in the Codebase structure section above.]