Botanica Plant Store

A custom-built plant store built with Next.js to practice GraphQL and Shopify Storefront API integration.

🔍 Purpose & Motivation
I created this project to practice GraphQL and Apollo Client, because I wanted to learn how GraphQL is actually used in real-world e-commerce platforms Understand how I can use Shopify Storefront API and practice frontend customization without using Shopify templates

✨ What I built an online plant e-commerce website where users can:
Browse and view product details
Search for plant information via Wikipedia & Plant.id API
Add products to cart
Switch region/currency
Explore a custom blog (with Supabase) templates

🛠️ Tech Stack Next.js 14, React, TypeScript, Tailwind CSS GraphQL + Apollo Client (for blog and Supabase) Shopify Storefront API (to fetch live product data) Supabase (for login and uploading blog images)

🧠 What I Learned
How to write GraphQL queries to fetch product data from Shopify
How to use Apollo Client to manage GraphQL data fetching and caching How to integrate a third-party CMS (Supabase) with custom blog functionality
How to build responsive layouts and component-based architecture with Tailwind and Next.js

• Date: April 2025
• Category: Fullstack