Hello from ACM Hack! This repo contains the completed demo code for the 2024 Ideahacks Webdev Workshop. This simple web app is based off of Strava, an app to track activity for runners. Our site, Strovo, allows users to create new posts, view their own posts, as well as explore all posts made by all users.
To run the latest version of Strovo, you'll need a google account, Node downloaded, and a text editor of your choice. With the prerequsites out of the way, if you choose to run Strovo as a full stack app (recommended) you'll first need to set up your firestore database to store the ride information with the following steps (see slides for visual aid). Alternatively, you can run the Strovo as a front-end app by using the frontend_demo branch and can jump to the second set of steps below.
- Navigate to the Firebase console: (https://firebase.google.com/)[https://firebase.google.com/]
- Click "Go to console" in the top left
- Sign in with your google account
- Click "Add project"
- Enter a project name when prompted.
- Proceed with the default settings and click "Create project"
- When project resources have been provisioned, click "Continue"
- Navigate to your project in firebase (if it's not selected)
- Under the Build menu, select "Firestore Database"
- Click the "Create database" button
- Click "Next" to proceed with the default location
- Select "test mode" and click "Enable"
We've now created our database! We recommend creating a new collection and document with your first ride both for understanding and to have something to see when running the site (see slides for an example). Now we're ready to move forward with running Strovo locally - to do so, clone this repo locally and take the following steps
- In firebase, Click the settings (⚙️) icon to the right of the "Project Overview" label
- Click the web icon (</>) at the bottom of the page to add a new app to the project
- Give your app a name and click "Register app"
- Copy the
firebaseConfigdictionary from the code and continue - Open your cloned project directory in a text editor of choice.
- Replace the
firebaseConfigdictionary in thesrc/firebase.jsfile with the copied code - Navigate to the project directory in a terminal and run
npm install - Run
npm run devin the same terminal - Open the site in your browser!
Looking to test your skills? Below is a short list of additional features you can add building off our app (or your own)!
- User accounts and authentication
- Including pictures in posts
- Deleting and editing posts
- URL Parameter based routing
Although we're providing template code here, many of you may want to create your own site from scratch (instead of building off of our site). To do so, again you'll need Node and a text editor of your choice before following the steps below
- Open a terminal and navigate to your desired project directory
- Run the command
npm create vite@latestin your project directory - Give your project a name when prompted (ex: ec2-react-demo)
- Select
Reactas the project framework - Select
JavaScriptas the framework variant - Navigate to your web app directory by running
cd [project_name] - Run
npm installto install any dependencies - Run
npm run devto run your site locally
- Workshop slides
- ACM Hack - Hackschool recordings
- React Hooks documentation
- Firebase Javascript v9 API reference