PoultryPro

Live Demo https://poultrypro.net ([email protected] - password)

This project is a frontend client that allows users to manage poultry farms and their associated data. It provides features for user authentication, farm management, poultry management, and data analysis.

Table of Contents

• Installation
• Usage
• Tech Stack and Architecture
• Frontend
• Backend
• Deployment
• Monitoring and Analytics
• Architecture Overview

Installation

To set up the PoultryPro frontend client on your local machine, follow these steps:

1. Clone the frontend repository:

   HTTPS - git clone https://github.com/TaylorBeck/poultrypro-client.git
   SSH - git clone [email protected]:TaylorBeck/poultrypro-client.git
   cd poultrypro-client
   

2. Clone the backend repository:

   HTTPS - git clone https://github.com/TaylorBeck/poultrypro-server.git
   SSH - git clone [email protected]:TaylorBeck/poultrypro-server.git
   cd poultrypro-server
   

3. Install dependencies:

   npm install
   

4. Create a frontend .env file in the root directory and add the necessary environment variables:

   VITE_FIREBASE_API_KEY=your_firebase_api_key
   VITE_FIREBASE_AUTH_DOMAIN=your_firebase_auth_domain
   VITE_FIREBASE_PROJECT_ID=your_firebase_project_id
   VITE_FIREBASE_STORAGE_BUCKET=your_firebase_storage_bucket
   VITE_FIREBASE_MESSAGING_SENDER_ID=your_firebase_messaging_sender_id
   VITE_FIREBASE_APP_ID=your_firebase_app_id
   VITE_FIREBASE_API_URL=http://localhost:3001 # or your deployed backend URL
   

5. Create a backend .env file in the root directory and add the necessary environment variables:

   PORT=3001
   FIREBASE_TYPE="service_account"
   FIREBASE_PROJECT_ID=""
   FIREBASE_PRIVATE_KEY=""
   FIREBASE_PRIVATE_KEY_ID=""
   FIREBASE_CLIENT_EMAIL=""
   FIREBASE_CLIENT_ID=""
   FIREBASE_AUTH_URI="https://accounts.google.com/o/oauth2/auth"
   FIREBASE_TOKEN_URI="https://oauth2.googleapis.com/token"
   FIREBASE_AUTH_PROVIDER_X509_CERT_URL="https://www.googleapis.com/oauth2/v1/certs"
   FIREBASE_CLIENT_X509_CERT_URL=""
   FIREBASE_UNIVERSE_DOMAIN="googleapis.com"
   FIREBASE_DATABASE_URL=""
   

6. Start the development servers on the frontend and backend:

   npm run dev
   

7. Open your browser and navigate to http://localhost:5173 to view the application.

Note: Make sure you have Node.js (version 14 or later, ideally 20) and npm installed on your machine before starting the installation process.

Usage

1. Sign in to the application at https://poultrypro.net ([email protected] - password)
2. Alternatively, sign up at https://poultrypro.net/sign-up (takes roughly 5 seconds for database seeding).
3. Navigate to /chickens or /farms to Add/Edit/Delete poultry in your farm and track their health and growth.
4. Each chicken will have a timeline of its measurements:

6. Then for guest access, use a guest token (created automatically durin): https://poultrypro.net/guest/uniqueAccessToken2

7. A list of your farm business' orders can be accessed at /orders and downloaded as a CSV file.

8. NOTE: Navigating to a path that doesn't exist will end up on the 404 page. Simply go back or sign in again to continue.

Tech Stack and Architecture

Frontend

• React 18
• Vite for build tooling
• Material-UI (MUI) for UI components
• Redux Toolkit for state management
• React Router for navigation
• Chart.js for data visualization
• Firebase for authentication and real-time database
• Axios for API requests
• Domain hosted in Route 53
• Github Actions Workflow using Github Action secrets

Backend

• Node.js with Express.js framework
• Firebase Admin SDK for authentication and database interactions
• Body-parser for parsing incoming request bodies
• CORS for Cross-Origin Resource Sharing
• Helmet for setting various HTTP headers for security
• Morgan for HTTP request logging
• Azure App Service Environment Variables for environment variable management
• Azure App Service (P0v3 plan)
• (Github Action Workflow)
• Custom autoscaling rules:
  • Scale out: +1 instance when CPU > 70% for 5 minutes
  • Scale in: -1 instance when CPU < 25% for 5 minutes
  • Min instances: 1, Max instances: 5
  • Cost-effective, and adjustable up to 30 max instances as needed

Deployment

• Azure Static Web Apps (Standard plan with Enterprise Grade Edge)
• GitHub Actions for CI/CD

Monitoring and Analytics

• Azure Application Insights

Architecture Overview

The PoultryPro application is built on a modern, scalable architecture leveraging Azure cloud services:

1. The frontend is a React-based Single Page Application (SPA) currently hosted on Azure Static Web Apps. I also set up an App Service for the frontend as displayed in the diagram. Pros and cons are listed below.
2. Backend services are provided by Azure App Service, with custom autoscaling for performance and cost optimization.
3. Authentication is handled through Firebase, integrated with the React frontend and Express backend.
4. State management is centralized using Redux Toolkit for predictable data flow.
5. Continuous Integration and Deployment (CI/CD) is implemented using GitHub Actions, automatically deploying to Azure on code changes to the main branch.
6. Application performance and user behavior is monitored using Azure Application Insights.

This architecture ensures high performance, scalability, and maintainability while providing a smooth development and deployment workflow.

Azure Hosting Comparison: App Service vs Static Web Apps

Azure App Service

• Pros:
  • Highly scalable
  • Integrates well with other Azure services
  • More control over server environment
• Cons:
  • More expensive for simple applications
  • More complex to set up and manage
  • Can have cold start times

Azure Static Web Apps

• Pros:
  • Cost-effective for static content
  • Global content distribution
  • Free SSL certificates
• Cons:
  • Less flexible for complex configurations
  • Some resource limitations
  • Primarily for static and JavaScript-based apps