https://github.com/badgerloop-software/sc2-mobile-app
Mobile, Tablet, and Web App for Solar Car 2
https://github.com/badgerloop-software/sc2-mobile-app
expo javascript react-native
Last synced: 2 months ago
JSON representation
Mobile, Tablet, and Web App for Solar Car 2
- Host: GitHub
- URL: https://github.com/badgerloop-software/sc2-mobile-app
- Owner: badgerloop-software
- Created: 2025-07-13T07:39:52.000Z (12 months ago)
- Default Branch: main
- Last Pushed: 2026-04-22T04:23:20.000Z (2 months ago)
- Last Synced: 2026-04-22T06:40:18.763Z (2 months ago)
- Topics: expo, javascript, react-native
- Language: JavaScript
- Homepage:
- Size: 31.7 MB
- Stars: 1
- Watchers: 0
- Forks: 0
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# BSR Solar Car 2 - Mobile Telemetry App
This is a React Native/Expo based mobile application for real-time telemetry monitoring of our Solar Car 2 (SC2). It will provide live visualization of vehicle subsystems by integrating 3D models, battery status, environmental conditions, and safety alerts. It will serve as a mobile alternative to the engineering (chase car) dashboard for those who prefer the smaller form factor.
## Screenshots
| Home | Systems | Signal Search | Settings |
|------|---------|---------|----------|
| 
| 
| 
| 
|
## Quick Start
### Prerequisites
- Node.js (v20.x)
- Expo Go app on your mobile device (for both iOS and Android)
### Installation & Running
1. **Clone the repository:**
```bash
git clone https://github.com/badgerloop-software/sc2-mobile-app.git
cd sc2-mobile-app
```
2. **Install dependencies:**
```bash
npm install
```
3. **Start the development server:**
```bash
npx expo start
```
4. **Run the app:**
- Scan the QR code displayed in the terminal with Expo Go (Android) or the Camera app (iOS)
**Mapbox (optional)**
- To enable Mapbox GL maps (used in the Home screen preview and full-screen map), set a Mapbox access token using one of these approaches (recommended: create a local `.env` and use `app.config.js`):
1) Create a local `.env` file at the project root (do NOT commit it). Use the included example to get started:
```bash
cp .env.example .env
# then paste your token into .env
# .env contents:
# MAPBOX_ACCESS_TOKEN=pk.your_mapbox_token_here
```
The project includes `app.config.js` which reads `.env` on bundler start and injects `MAPBOX_ACCESS_TOKEN` into `expo.extra`, making it available at runtime via `expo-constants`.
2) Export the environment variable before starting the bundler (macOS / Linux):
```bash
export MAPBOX_ACCESS_TOKEN="pk.your_mapbox_token_here"
npx expo start
```
3) Or add it to your `app.json` under `expo.extra` (explicit config in source):
```json
{
"expo": {
"extra": {
"MAPBOX_ACCESS_TOKEN": "pk.your_mapbox_token_here"
}
}
}
```
4) You can also set it on `global.MAPBOX_ACCESS_TOKEN` in your app entrypoint if you prefer a programmatic approach.
- Important: After adding or changing your token, fully restart the Metro bundler (`npx expo start`), and restart the Expo Go client on your device (or reload simulator). This ensures the new token is read by `app.config.js` and exposed through `expo-constants` at runtime.
- If `MAPBOX_ACCESS_TOKEN` is not found in any of those locations, the app will fall back to OpenStreetMap/Leaflet tiles automatically. The app logs a short warning in Metro if no token is detected (look for `MapView: MAPBOX_ACCESS_TOKEN not found`), which can help troubleshoot missing tokens.
## Tech Stack
- **Framework:** React Native
- **Platform:** Expo (SDK 54)
- **Navigation:** React Navigation
- **UI:** Expo Linear Gradient, Expo Blur
- **Icons:** Expo Vector Icons
- **Animation:** React Native Reanimated
## Project Structure
```
sc2-mobile-app/
├── .github/ # GitHub Actions (CI/CD)
├── assets/ # Images and icons
├── docs/ # Project documentation
├── src/ # Source code
│ ├── assets/ # Models and other assets
│ ├── components/ # Reusable components
│ ├── data/ # Mock data and data sources
│ ├── screens/ # Application screens
│ └── utils/ # Utility functions
├── App.js # Main application component
└── package.json # Project dependencies
```
### Troubleshooting
- If you see an error like "TypeError: configs.toReversed is not a function" when starting Expo, make sure you're running Node v20.x (use nvm to switch to Node 20 if needed).
### License / Model credit:
This work uses the Ferrari F40 model by Black Snow on Sketchfab, licensed under CC-BY-4.0. See src/car-visualizer/ferrari_f40/license.txt for details.