Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/jingjing-jin/calorie-tracker-app

A cross-platform mobile application
https://github.com/jingjing-jin/calorie-tracker-app

backend cloud-database front-end mobile-development node-js react-native

Last synced: 9 days ago
JSON representation

A cross-platform mobile application

Awesome Lists containing this project

README

        

# Calorie Tracker App

The Calorie Tracker App is a cross-platform mobile application built using React Native. This app allows users to track their daily calorie intake, manage entries, and store data in a Firebase Firestore database. The application is designed to work seamlessly on both iOS and Android devices.

## Technologies Used

- **React Native**: Framework for building the cross-platform mobile application.
- **Firebase Firestore**: Cloud-hosted NoSQL database for backend database to store and sync data in real-time.
- **React Navigation**: For navigating between screens using a nested navigation structure.
- **Environment Variables**: Using `react-native-dotenv` or `react-native-config` for secure configuration management.
- **Expo**: Simplifies building, deploying, and testing React Native apps.
- **Node.js & npm**: Used for running development scripts and managing dependencies.
- **Git and GitHub**: For version control and collaboration, facilitating code management and pull requests.
- **Android Studio / Xcode**: IDEs used for testing and debugging on Android and iOS.

## Features

- **All Entries Screen**: View a list of all meal entries with calorie counts.

All Entries Screen

- **Over-limit Entries Screen**: Automatically mark and view entries with calorie counts over 500.

Over Limit Entries Screen

- **Edit Entry**: Update or delete existing entries, and mark over-limit entries as reviewed.

Edit Entry Screen 1
Edit Entry Screen 2

- **Add Entry**: Add new meal entries with validation for calorie and description inputs.

Add Entry Screen

## Setup Instructions

- **Clone the Repository:** Use `git clone` to download the repository onto your local machine and navigate into the project directory using `cd`.

- **Install Dependencies:** Use `npm install` to install all the necessary packages listed in the `package.json` file.

- **Set Up Firebase:**
- Create a Firebase project in the Firebase Console and enable Firestore.
- Configure security rules for Firestore to manage data access appropriately.

- **Environment Variables:**
- Use a `.env` file to store your Firebase configuration securely. You can use packages like `react-native-dotenv` or `react-native-config` to load these variables.

- **Run the Application:**
- Use the `npx react-native run-ios` command to run the app on an iOS simulator.
- Use the `npx react-native run-android` command to run the app on an Android emulator.

This setup will ensure that your application is configured correctly with Firebase and can be tested on both iOS and Android platforms.