Skip to content

Add comments and update README #1

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
RemoStain wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Add comments and update README #1

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
89 changes: 54 additions & 35 deletions App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,35 +1,54 @@
import React from 'react';
import { ActionSheetProvider } from '@expo/react-native-action-sheet';

import {
useFonts,
Nunito_400Regular,
Nunito_600SemiBold,
Nunito_700Bold,
Nunito_800ExtraBold,
} from '@expo-google-fonts/nunito';

import AppStack from './src/routes/AppStack';
import { StatusBar } from 'expo-status-bar';

export default function App() {
const [fontsLoaded] = useFonts({
Nunito_400Regular,
Nunito_600SemiBold,
Nunito_700Bold,
Nunito_800ExtraBold,
});

if (!fontsLoaded) {
return null;
} else {
return (
<>
<StatusBar animated translucent style="dark" />
<ActionSheetProvider>
<AppStack />
</ActionSheetProvider>
</>
);
}
}
/**
* Root component of the Expo application.
*
* Responsibilities:
* - Load required Nunito font families before rendering the UI
* - Configure the status bar appearance
* - Wrap the entire app with ActionSheetProvider so screens can use ActionSheets
* - Render the navigation stack once fonts are ready
*/
import React from 'react';
import { ActionSheetProvider } from '@expo/react-native-action-sheet';

import {
useFonts,
Nunito_400Regular,
Nunito_600SemiBold,
Nunito_700Bold,
Nunito_800ExtraBold,
} from '@expo-google-fonts/nunito';

import AppStack from './src/routes/AppStack';
import { StatusBar } from 'expo-status-bar';

export default function App() {
/**
* Load font assets before the application renders.
* If fonts are not loaded, return null temporarily to avoid UI inconsistencies.
*/
const [fontsLoaded] = useFonts({
Nunito_400Regular,
Nunito_600SemiBold,
Nunito_700Bold,
Nunito_800ExtraBold,
});

if (!fontsLoaded) {
return null;
} else {
/**
* Once fonts are loaded, render the application:
* - StatusBar for system UI styling
* - ActionSheetProvider wraps the component tree
* - AppStack handles navigation between screens
*/
return (
<>
<StatusBar animated translucent style="dark" />
<ActionSheetProvider>
<AppStack />
</ActionSheetProvider>
</>
);
}
}
100 changes: 62 additions & 38 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,38 +1,62 @@
# Volunteam App

## Setting up the fake API (json-server)

Update the file `src/services/api.ts`.

Before running your 'json-server', get your computer's IP address and update your baseURL to `http://your_ip_address_here:3333` and then run:

```
npx json-server --watch db.json --port 3333 --host your_ip_address_here -m ./node_modules/json-server-auth
```

To access your server online without running json-server locally, you can set your baseURL to:

```
https://my-json-server.typicode.com/<your-github-username>/<your-github-repo>
```

To use `my-json-server`, make sure your `db.json` is located at the repo root.

## Setting up the image upload API

Update the file `src/services/imageApi.ts`.

You can use any hosting service of your preference. In this case, we will use ImgBB API: https://api.imgbb.com/.
Sign up for free at https://imgbb.com/signup, get your API key and add it to the .env file in your root folder.

To run the app in your local environment, you will need to set the IMGBB_API_KEY when starting the app using:

```
IMGBB_API_KEY="insert_your_api_key_here" npx expo start
```

When creating your app build or publishing, import your secret values to EAS running:

```
eas secret:push
```
# Volunteam App

## Project Scope
This project provides a mobile application that enables users to browse, view, and interact with event-related information. It integrates map functionality, user authentication, caching utilities, and external APIs for retrieving data and uploading images.

Key components:
- Interactive map for event visualization
- Login and authentication flow
- Local caching fallback for network requests
- Image upload support through external providers

## Setting up the fake API (json-server)

Update the file `src/services/api.ts`.

Before running your 'json-server', get your computer's IP address and update your baseURL to `http://your_ip_address_here:3333` and then run:

```
npx json-server --watch db.json --port 3333 --host your_ip_address_here -m ./node_modules/json-server-auth
```

To access your server online without running json-server locally, you can set your baseURL to:

```
https://my-json-server.typicode.com/<your-github-username>/<your-github-repo>
```

To use `my-json-server`, make sure your `db.json` is located at the repo root.

## Setting up the image upload API

Update the file `src/services/imageApi.ts`.

You can use any hosting service of your preference. In this case, we will use ImgBB API: https://api.imgbb.com/.
Sign up for free at https://imgbb.com/signup, get your API key and add it to the .env file in your root folder.

To run the app in your local environment, you will need to set the IMGBB_API_KEY when starting the app using:

```
IMGBB_API_KEY="insert_your_api_key_here" npx expo start
```

When creating your app build or publishing, import your secret values to EAS running:

```
eas secret:push
```

## Running the App in Development
To run the application in a local development environment:

1. Ensure the fake API is running using the json-server instructions above.
2. Start the Expo development server:
IMGBB_API_KEY="insert_your_api_key_here" npx expo start

1.
## Running the App
Once the development environment is active:

1. Use Expo Go (mobile app) to scan the QR code shown in the terminal or browser.
2. The app will load and connect to your configured mock API.
3. Ensure your device is on the same network as your development machine to avoid connection issues.
80 changes: 40 additions & 40 deletions app.config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,40 +1,40 @@
import { ExpoConfig, ConfigContext } from 'expo/config';

export default ({ config }: ConfigContext): ExpoConfig => ({
...config,
name: 'volunteam',
slug: 'volunteam',
version: '1.0.0',
orientation: 'portrait',
icon: './assets/icon.png',
splash: {
image: './assets/splash.png',
resizeMode: 'cover',
backgroundColor: '#031A62',
},
updates: {
fallbackToCacheTimeout: 0,
},
assetBundlePatterns: ['**/*'],
ios: {
supportsTablet: true,
},
web: {
favicon: './assets/favicon.png',
},
plugins: [
[
'expo-image-picker',
{
photosPermission: 'The app accesses your photos to let you add them to events.',
cameraPermission: 'The app accesses your camera to let you add pictures to events.',
},
],
],
extra: {
eas: {
projectId: '954f3b8e-1155-4f8f-8601-a2b3126da39e',
},
IMGBB_API_KEY: process.env.IMGBB_API_KEY,
},
});
import { ExpoConfig, ConfigContext } from 'expo/config';
export default ({ config }: ConfigContext): ExpoConfig => ({
...config,
name: 'volunteam',
slug: 'volunteam',
version: '1.0.0',
orientation: 'portrait',
icon: './assets/icon.png',
splash: {
image: './assets/splash.png',
resizeMode: 'cover',
backgroundColor: '#031A62',
},
updates: {
fallbackToCacheTimeout: 0,
},
assetBundlePatterns: ['**/*'],
ios: {
supportsTablet: true,
},
web: {
favicon: './assets/favicon.png',
},
plugins: [
[
'expo-image-picker',
{
photosPermission: 'The app accesses your photos to let you add them to events.',
cameraPermission: 'The app accesses your camera to let you add pictures to events.',
},
],
],
extra: {
eas: {
projectId: '954f3b8e-1155-4f8f-8601-a2b3126da39e',
},
IMGBB_API_KEY: process.env.IMGBB_API_KEY,
},
});
19 changes: 13 additions & 6 deletions babel.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,13 @@
module.exports = function(api) {
api.cache(true);
return {
presets: ['babel-preset-expo'],
};
};
/**
* Babel configuration for the Expo project.
*
* This enables Expo's preset, allowing the build system to understand
* the project's React Native and TypeScript syntax during compilation.
* The configuration is cached to improve build performance.
*/
module.exports = function (api) {
api.cache(true);
return {
presets: ['babel-preset-expo'],
};
};
Loading