Appalachian Trail Conservancy

Point of Contact

For inquiries about the project, contact

Name	Role	Email
Sophie Tsai	Tech Lead	sophietsai31@gmail.com
Akash Patil	Tech Lead	akashspxp@gmail.com
Megan Yu	Product Manager	myu55@terpmail.umd.edu
Tarun Kommuri	Product Manager	kommuri.tarun@gmail.com

Project Info

Appalachian Trail Conservancy is the leading organization in charge of protecting, managing, and advocating for the entire 2,000+ mile Appalachian Trail and its surrounding lands.

Our project aims to help the Appalachian Trail Conservancy streamline and gamify training processes for their staff and volunteers. Learn more about the project and team.

Hosting

We are currently using Firebase Hosting. You can view the live deployment of the application at https://learn.appalachiantrail.org

Tech Stack

Frontend:

• Framework: React
• Language: Typescript
• Styling: CSS Modules
• Libraries: MaterialUI, Axios
• Build Tool: Vite

Backend: Firebase

• Authentication, Database, Image Store, and Hosting

Contact Akash or Sophie to gain access to our Firebase Console.

Once logged in to the Firebase Console, you can view our stored data by clicking on the "Firestore Database" tab.

We currently have 3 collections that correspond to our project Types:

• Assets (Registration-related information)
• Trainings
• Pathways
• Users (Volunteer and Admin accounts)

Running the Repo Locally

1. Clone the repo and cd into it
2. Run npm install in the cloud-functions/functions directory
3. Run npm install in the react-app directory
4. Run npm run dev in the react-app directory (starts Firebase emulators, seeds test data, and runs Vite)
5. Navigate to http://localhost:5173/ in your browser

If you want emulator startup without importing/exporting snapshot files, run npm run dev in react-app.

If you only want the frontend dev server without emulator orchestration, run npm run dev:web in react-app.

Seeded Test Accounts

• Admin email: admin+emulator@atc.local
• Admin password: LocalPass123!
• Volunteer email: h4iatctest@gmail.com

---

Project Structure

File Organization & Preferred Practices

• Documentation on the preferred practices used for this project can be found here

Note:

• We are using a singular global assets folder: /assets.
• Only components used across multiple pages are stored in the global components folder: /components.
• The Typescript and CSS files for each page can be found in /pages. The specific page folders may contain additional sub-folders for each component used on the page for organization. Each folder should contain the x.tsx file and corresponding x.module.css file.