Back to Projects

CropNeeds – E-commerce Platform for Farmers

CropNeeds is a personal project focused on building a scalable e-commerce platform for farmers to browse and purchase agricultural goods using React, Firebase, and OpenAI API integration.

'View Source Code'

Technologies Used

ReactJSFirebaseGithub PagesGithub Actions
Cropneeds

🔹 Overview

CropNeeds is a personal project built as a scalable e-commerce platform designed to allow farmers to browse and purchase agricultural goods. The platform focused on delivering a simple and functional user experience using a lightweight but effective tech stack.

🔹 Tech Stack

  • Frontend: ReactJS

  • Backend / BaaS: Firebase (Firestore database + hosting)

  • Deployment: GitHub Pages (static frontend)

  • CI/CD: GitHub Actions (automated deployment pipeline)

  • Integrations: OpenAI API (for enhanced user interaction)

🔹 Key Features

  • Product Browsing: Built a product listing interface where users could view and explore various farming-related items.

  • Search & Interaction: Integrated OpenAI API to power intelligent interaction or recommendation prompts (e.g., answering questions about products or helping users navigate).

  • Firestore Database: Used Firebase Firestore to manage product listings, categories, and user data.

  • CI/CD Automation: Configured a GitHub Actions workflow to auto-deploy the React frontend to GitHub Pages on each push to the main branch.

  • Static Hosting: Chose GitHub Pages for cost-effective hosting of the client-side application, reducing infrastructure overhead.

🔹 System Design & Flow

  1. Frontend Interface: Built using ReactJS with responsive components to handle product display and filtering.

  2. Data Management: Product and user data were managed using Firebase Firestore, enabling dynamic retrieval and updates.

  3. OpenAI Integration: Connected to OpenAI to create an engaging, interactive component that helped simulate chatbot-style user support.

  4. CI/CD Setup: GitHub Actions was used to:

    • Lint and build the React project

    • Automatically deploy the latest changes to GitHub Pages

🔹 Technical Challenges

  • Designing a structured and scalable data model in Firestore that could support dynamic product listings and future extensibility.

  • Ensuring smooth integration of the OpenAI API without affecting performance or increasing dependency risk.

  • Setting up the CI/CD pipeline with GitHub Actions, which required configuring build steps correctly for React + Firebase + GitHub Pages alignment.