---

Grocadex is a React Native mobile app designed to help users track their grocery expenses and monitor expiry dates. The app aims to reduce food waste while keeping spending under control, making it easier to manage your household budget and minimize unnecessary waste.

This application was created using create-expo-app.

📖 Table of Contents

• 📖 Table of Contents
• 🌟 Features
• 🛠️ Tech Stack
• 📝 Prerequisites
• ⚡ Setup Instructions
• 📜 Available Scripts
• ✨ Acknowledgments
• ©️ License

🌟 Features

• Create, edit, and delete receipts along with their corresponding grocery items for easy tracking.
• Mark items as inactive once they’ve expired or have been fully consumed.
• Track your expenses for the current month and year to monitor your grocery spending.
• Search grocery items by name and easily find receipts by store name for quick reference.

🛠️ Tech Stack

Frontend:

• React Native
• NativeWind
• Gluestack UI
• Tanstack Query
• Zustand
• React Native MMKV
• Formik
• Yup

Backend:

• Express
• Passport
• passport-local
• passport-jwt
• Prisma
• PostgresSQL

📝 Prerequisites

Ensure that the following dependencies are installed onto your machine by following the Setup Instructions.

• Node.js

⚡ Setup Instructions

1. Clone this repository to your local machine.

git clone https://github.com/vikiru/grocadex.git
cd grocadex

2. Download and install all required dependencies.

npm install

3. Configure your .env file with the required values.

NODE_ENV=development
EXPRESS_PORT=3000

# Replace these with your database username, password, host, port, and database name.
DATABASE_URL='postgresql://<username>:<password>@<host>:<port>/<database name>'

# During development, you can set this to the IPV4 Address of your machine.
# e.g. "http://<IPV4 Address>:<EXPRESS_PORT>"
EXPO_PUBLIC_API_URL=""

# Used for passport-jwt auth, set this to a secure random string.
JWT_SECRET=""

4. Generate the Prisma client based on the schema.prisma file.

cd src/api
npx prisma generate

📜 Available Scripts

1. Start the development server for the frontend.

npm run start

2. Start the development server for the frontend and the backend concurrently.

npm run dev

The frontend will be available at:

http://localhost:8081

The backend will be available at:

http://localhost:3000

3. Start the development server for the frontend and launch the application on an Android device.

npm run android

4. Start the development server for the frontend and launch the application on an iOS device.

npm run ios

5. Start the development server for the frontend and launch the application on the web.

npm run web

The application will be available at:

http://localhost:8081

6. Lint all files and check if there are any issues with ESLint.

npm run lint

7. Fix all ESLint issues and then format the files with Prettier.

npm run prettier

✨ Acknowledgments

• React Native Gifted Charts
• react-native-ui-datepicker
• react-native-toast-message
• flash-list
• Axios Documentation
• Formik Documentation
• Yup Documentation
• Prisma Documentation
• Expo Documentation
• GluestackUI Documentation
• Tanstack Query Documentation
• Zustand Documentation
• Shields Badges
• Semantic Release

©️ License

The contents of this repository are licensed under the terms and conditions of the MIT license.

MIT © 2024-present Visakan Kirubakaran.