SideQuest is a mental health and social media app designed to push its users outside of their comfort zones while inspiring fun adventures.
- NPM 9.20
- Node 18.19.1
- PNPM 10.9.0
- JDK 21 LTS (21.0.6)[https://www.oracle.com/java/technologies/downloads/#jdk21-windows]
- Android Studio 2024.3.1
Step 1: Clone the repository https://github.com/conmmander/sidequest
Step 2: Download the .env file (ensure it is named ".env" with the . ) and place it in the root of the project folder
Step 3: Install pnpm https://pnpm.io/installation
Step 4: Install JDK 21 LTS https://www.oracle.com/java/technologies/downloads/#jdk21-windows
Step 5: Ensure pnpm and JDK are installed properly.
Run java -version and pnpm -v, you should see version numbers for both.
If this doesn't work, you likely need to update your PATH variables. Before doing that, quit your terminal and open a new one, that may fix it automatically. Otherwise, you may need to restart.
Step 6: In a terminal, in the root of the project folder, run:
pnpm install
Step 7: In a terminal, in the root of the project folder, run:
npx expo install --check
Step 8: Confirm project dependencies are installed properly. In a terminal, in the root of the project folder, run:
npx expo-doctor
It should pass 14/15 checks. If not, try Step 7 again.
Step 9: Follow this guide to set up your simulator.
- If on Windows, select the option "Android Emulator" and "Development Build".
- IMPORTANT: Disable the section "Build with Expo Application Services (EAS), we are building LOCALLY."
- If you have an Android phone, you can use that at your discretion.
- If on MacOS, you can do whatever your heart desires.
Guide: https://docs.expo.dev/get-started/set-up-your-environment/
Step 10: Build the app. In a terminal, in the root of the project directory, run:
npx expo run:android
This will take a while on the first build.
You only need to create new builds when you add or remove packages using pnpm. If you have not modified the packages since the last build, you can simply use:
npx expo start
This is a lot quicker, but you need to make sure it is using a development build. In the terminal, it should say:
Using development build
The .env file can be found in the Canvas submission for this project. Simply copy the .env file into the root of the project.
├── android/ # Android Build Files
├── .vscode/ # Visual Studio Config Files
├── .github/ # GitHub Config Files
├── ios/ # iOS Build Files
├── assets/ # Static Files (fonts, images)
├── utils/ # Utility Code (supabase, types)
├── app/ # Core app pages
│ ├── index.tsx # Entry point to the app
│ ├── _layout.tsx # Core layout for the app to provide basic back button functionality and screen layout
│ ├── onboard.tsx # Onboarding page show to new app users to enter username
│ ├── tutorial.tsx # Initial splashscreen shown to users on first login
│ └── (tabs)/ # Accessible pages via navigation bar
│ │ ├── archive.tsx # Archived quests page
│ │ ├── groups.tsx # The groups page
│ │ ├── home.tsx # The home page for the app. This is the main landing.
│ │ ├── leaderboard.tsx # The leaderboard page
│ │ ├── newGroup.tsx # Page to create new groups. Accessible from groups.tsx
│ │ ├── pageTemplate.tsx # Template page to aid contributors in adding new pages.
│ │ ├── profile.tsx # Page to edit user profile data.
│ │ └── _layout.tsx # Core layout for the navigation bar, and safe spaces for device support
├── components/ # Reusable UI components
├── constants/ # Constant Files for project (like colors)
├── context/ # Holder for app contexts (like session)
├── hooks/ # Hooks for access to context
├── package.json # Project metadata and dependencies
├── pnpm-lock.yaml # Project metadata and dependencies
├── README.md # Project documentation
├── tsconfig.json # typescript configuration
├── app.config.ts # Build configuration settings
├── .prettierrc # Prettier configurations
└── eslint.config.mjs # ESLint Configuration
Once the app is set up, run it with npx expo run:android. The application should open on a simulated Android device, where you can follow the somewhat intuitive UI.
The code to this app is roughly the same in each file. There you will find:
export default function MyFunction()
{
// Code here
return (
//React component
)
}You can also have named exports in your code, and while technically react will work without a default export, it is not recommended.
To contribute to the repository, do the following steps:
- Fork the repository
- Create a new branch with
git switch -C branchname - Add code to new branch
- Add files with
git add . - Commit files with
git commit -m "Commit message" - Push to remote repo
git push origin branchname - Open a pull request and it will be reviewed