Urban Greens Antigua

Project preview

Project Overview:

Urban Greens Antigua is a mobile-first design showcase website designed to promote the company’s high-quality microgreens. The site highlights product visuals, nutritional benefits, and the company’s commitment to sustainable, local agriculture. It also reflects the founder’s passion and the brand’s pride in their locally grown produce.

Project Details

  • Type of Work: Part-time (Contract)
  • Type of Website: Product Showcase
  • Time Frame: Unknown
  • GitHub Link: github.com/Justin-Bento/believe-support-services
  • Demo Link: believesupportservices.vercel.app
  • Role: Designer, Developer, Computer Technician, Researcher
  • Duration: Aug 2023 – May 2024
  • Status: Completed
  • Team Size: 1
  • Target Audience: Chefs & Culinary Professionals, Health-Conscious Consumers, Home Gardeners / DIY Growers.

What Needed to Be Solved?

After discussing the project with the client, four core challenges were identified:

  1. Designing an Interface From Scratch: Create a clean, mobile-friendly website that educates users about microgreens—emphasizing their appearance, nutrition, and health benefits.

  2. Developing Website Functionality with Limited Experience: As a recent college graduate, I faced a learning curve that made some tasks more time-consuming. However, this process accelerated my growth as I built core features using modern tools and frameworks.

  3. Work Around Delivery Limitations: Due to the lack of postal codes in Antigua and Barbuda, traditional e-commerce wasn’t viable. The site instead focused on educating users and facilitating offline, local ordering.

  4. Enabling Easy Content Management: The client needed to update content regularly without technical support. A headless CMS was implemented to allow non-technical edits to text and images.

Additional Design and Technical Considerations:

  • Mobile-First Responsive Design: Most users accessed the site on mobile, so performance and layout were optimized for smaller screens.

  • Optimizing for Low-Bandwidth Connections: The site was designed to be lightweight and fast, considering infrastructure challenges in the region.

  • Understanding the Company’s Origin & Story: Crafting an authentic design meant understanding the company’s values, mission, and local relevance.

  • Learning New Technologies on the Fly: Several frameworks were new to me at the time, requiring rapid learning and adaptation.

  • Communicating with a Non-Technical Client: Technical decisions were explained in accessible language to keep the process transparent and collaborative.

  • Localization & Regional Relevance: Content and structure were tailored to the local audience in Antigua and Barbuda.

What Was Achieved?

  1. Mobile-Optimized User Experience
    Delivered a smooth, responsive design optimized for mobile and touch interfaces.

  2. Educational Product Presentation
    Designed sections that clearly explained microgreens’ health benefits and uses.

  3. CMS Integration with Sanity.io
    Enabled the client to update images, product descriptions, and text independently.

  4. Offline Ordering Support
    Adapted the site to work without a traditional shopping cart or postal code-based checkout system.

Technology Stack (Updated for 2025)

Frontend

  • Next.js – React-based framework with built-in routing, server-side rendering (SSR), and static site generation (SSG).
  • React.js - JavaScript library for building interactive UIs.
  • Tailwind CSS – Utility-first CSS framework for fast and responsive styling.
  • JavaScript / TypeScript – Core logic and optional static typing for improved development experience.
  • React Router (in earlier versions) – Used for client-side navigation prior to adopting Next.js’s built-in routing.
  • HTML & CSS – Foundation for markup and custom styling.

Backend / Content Layer

  • Sanity.io – Headless CMS for structured content management.
  • Sanity Studio – Customizable editor built with React.
  • GROQ – Sanity’s flexible query language.
  • Portable Text – Rich content format supported by Sanity.

Content Delivery

  • Sanity Content Lake – Real-time, cloud-hosted backend for structured content.
  • Sanity API – Used with @sanity/client to fetch dynamic data.
  • Image Optimization – Handled using @sanity/image-url in combination with Next.js’s <Image /> component for performance.

Database

None – The site does not use a traditional database; content is managed entirely through Sanity as a headless CMS.

Deployment / Hosting

  • Vercel – Hosting platform with CI/CD support, ideal for deploying static or dynamic Next.js applications.
  • Sanity Managed Hosting – For the CMS backend and studio.

Optional Add-ons

  • Preview Mode – Enables live previews of unpublished content via Next.js and Sanity integration.
  • SEO Management – Handled with next/head or next-seo for meta tags, Open Graph, and search engine optimization.

Outcome

The Urban Greens Antigua website has been live and serving the community for 5+ years, offering a stable, informative platform for promoting healthy, local produce.

View Next

Believe Support Services

An event website that provides information about camps and programs for individuals with complex needs. It outlines available services, includes testimonials and shows how the company works with participants and their families.

ParkSmart

ParkSmart is a parking app designed for Humber College. It allows students to pay parking tickets, manage processing and revenue, and track active parking time logs all through an application.