GroGo

⭐A Grocery Delivery app built with React Native⭐

Backend Code Repo

Overview of Project

A grocery delivery app built with react native , nodejs and mongodb.

Tech Stacks used

# React Native for Android app development
# Redux toolkit for state management
# Nodejs for Backend
# Mongodb as Database
# Mapbox for map feature
# Stripe for payment gateway
# Firebase cloud storage for storing images
# Docker for Containerization
# Nginx Reverse Proxy
# RabbitMQ as a message broker
# JWT authentication
# Hashed password saving in the MongoDB database
# RESTful API using ExpressJS

Key Features

# Login using email and password
# Searching products by voice
# Adding and removing products from wishlist
# Adding Different Address to a user by selecting on the map
# Payment feature by stripe
# Filtering Products based on different categories
# Sorting Products based on Price in ascending and descending order
# Separate screen for seeing user's all orders
# Free Delivery on orders above 99
# Persisting User Cart
# Persisting Current User
# Checkout Feature
# JWT Authentication
# JWT cookie authentication

Getting Started

Prerequisites

Before running the project, make sure you have the following installed:

# For Backend
- Node.js (v18 or higher)
- Docker & Docker Compose
- MongoDB (if running without Docker)
- CloudAMQP account (for RabbitMQ message queuing)

# For Frontend (React Native)
- Node.js (v18 or higher)
- React Native CLI
- Android Studio (for Android development)
- Xcode (for iOS development - macOS only)
- Java Development Kit (JDK 11 or higher)
- Android SDK

Backend Setup

Option 1: Using Docker (Recommended)

1. Navigate to backend directory

   cd backend_app

2. Create environment files

   # Create .env files for each service
   touch customer/.env
   touch products/.env
   touch shopping/.env

3. Set up RabbitMQ with CloudAMQP

   The project uses RabbitMQ for message queuing between microservices. Follow these steps to set up CloudAMQP:

   a. Create CloudAMQP account:

   • Go to CloudAMQP
   • Sign up for a free account
   • Create a new instance (select "Little Lemur" for free tier)
   • Note down the AMQP URL from your instance dashboard

   b. Get your CloudAMQP URL:

   • In your CloudAMQP dashboard, copy the AMQP URL
   • It should look like: amqps://username:password@host/vhost

4. Configure environment variables

   # Add the following to each .env file:
   # customer/.env
   DB_URL=mongodb://localhost:27017/customer_db
   MONGODB_URI=mongodb://localhost:27017/customer_db
   APP_SECRET=your_secret_key
   PORT=8001
   MSG_QUEUE_URL=amqps://your-cloudamqp-url
   
   # products/.env
   DB_URL=mongodb://localhost:27017/products_db
   MONGODB_URI=mongodb://localhost:27017/products_db
   APP_SECRET=your_secret_key
   PORT=8002
   MSG_QUEUE_URL=amqps://your-cloudamqp-url
   
   # shopping/.env
   DB_URL=mongodb://localhost:27017/shopping_db
   MONGODB_URI=mongodb://localhost:27017/shopping_db
   APP_SECRET=your_secret_key
   PORT=8003
   MSG_QUEUE_URL=amqps://your-cloudamqp-url

   Note: Replace your-cloudamqp-url with your actual CloudAMQP AMQP URL from step 3.

5. Start services with Docker Compose

   docker-compose up --build

6. Access the services

   • Customer Service: http://localhost:8001
   • Products Service: http://localhost:8002
   • Shopping Service: http://localhost:8003
   • Nginx Proxy: http://localhost:80

Option 2: Manual Setup

1. Set up RabbitMQ with CloudAMQP (same as Option 1, steps 3a-3b)

2. Configure environment variables (same as Option 1, step 4)

3. Start each service individually

   # Terminal 1 - Customer Service
   cd backend_app/customer
   npm install
   npm start
   
   # Terminal 2 - Products Service
   cd backend_app/products
   npm install
   npm start
   
   # Terminal 3 - Shopping Service
   cd backend_app/shopping
   npm install
   npm start
   
   # Terminal 4 - Gateway Service
   cd backend_app/gateway
   npm install
   npm start

Frontend Setup

1. Navigate to frontend directory

   cd Frontend_app

2. Install dependencies

   npm install

3. Configure backend URL

   # Update src/config.js with your backend URL
   # For local development: http://localhost:8080 or your gateway URL

4. Start Metro bundler

   npm start

5. Run on Android

   # Make sure Android emulator is running or device is connected
   npm run android

6. Run on iOS (macOS only)

   # Make sure iOS simulator is running
   npm run ios

Development Tips

• Backend: Services will automatically restart when you make changes (using nodemon)
• Frontend: Metro bundler supports hot reloading
• Database: Make sure MongoDB is running if not using Docker
• RabbitMQ: Used for inter-service communication. CloudAMQP provides a free tier for development
• API Testing: Use tools like Postman to test backend endpoints

Common Issues & Solutions

1. Metro bundler issues: Clear cache with npx react-native start --reset-cache
2. Android build issues: Clean build with cd android && ./gradlew clean
3. iOS build issues: Clean build folder in Xcode
4. Docker issues: Make sure Docker is running and ports are not occupied
5. RabbitMQ connection issues: Verify your CloudAMQP URL is correct and the service is running

Project Structure

├── backend_app/          # Backend microservices
│   ├── customer/         # Customer service (Port 8001)
│   ├── products/         # Products service (Port 8002)
│   ├── shopping/         # Shopping service (Port 8003)
│   ├── gateway/          # API Gateway
│   └── proxy/            # Nginx reverse proxy
└── Frontend_app/         # React Native mobile app

Untitled.mov

(back to top)

Feedback

If you have any feedback or suggestions please reach out to maintainers.

• Manan khandelwal

Show some ❤️ by starring this awesome repository!