Made with Supabase

Food and Beverage Description Learning Project

Link to Test Site - Deployed on netlify


"im trying to build quizlet over here"

This project aims to create an interactive platform for studying and learning detailed food and beverage descriptions. The learning process is facilitated through the use of digital cards, offering a visually engaging and effective method for users to master culinary terms and concepts.


  • Card-based Learning: The core feature involves the use of digital cards to present food and beverage descriptions in high detail. Each card represents a specific item, providing a rich learning experience.

  • Supabase Backend: The project leverages Supabase as the backend infrastructure. Supabase, an open-source alternative to Firebase, offers real-time data capabilities, making it an ideal choice for handling dynamic content.

  • Jira Integration: Jira is employed for project organization and task management. It enables efficient collaboration among team members, tracking progress, and ensuring the timely completion of project milestones.

  • Free and Open Access: The platform is designed to be freely accessible to users. The goal is to make high-quality culinary education available to everyone, promoting learning and appreciation for food and beverages.

Tech Stack

  • Frontend: HTML, CSS, JavaScript
  • Backend: Supabase
  • Project Management: Jira
  • Version Control: Git
  • Deployment: Netlify

Project Structure

The project is organized into the following components:

  1. Card Module: Manages the creation, editing, and presentation of digital cards. Each card contains detailed information about a specific food or beverage item.

  2. Supabase Integration: Handles data storage, retrieval, and synchronization. Utilizes Supabase APIs to interact with the backend database.

  3. User Interface (UI): The frontend interface allows users to interact with the cards, navigate through the learning materials, and track their progress.

  4. Jira Boards: Different Jira boards are set up for tracking tasks related to frontend development, backend integration, and overall project management.


The platform will be deployed [Specify deployment platform] to ensure free and widespread access. Continuous deployment strategies will be employed to seamlessly deliver updates and improvements.

How to Contribute

Contributions to the project are welcome. Please refer to the file for guidelines on how to contribute.


This project is licensed under the MIT License.

Feel free to customize this template based on the specific details and requirements of your project.

React + Vite

This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.

Currently, two official plugins are available:

How to Install

Step 1: Install Node.js and npm

Ensure that you have Node.js and npm (Node Package Manager) installed on your machine. You can download them from node v v20.5.0 npm v 10.2.3

Step 2: Install the app and Dependencies

cd supabase-cards
npx install

This will create a new React project using Vite as the build tool and install dependencies.

Step 3: Run the Application

Run your React application using

npx run dev


npm run build
netlify deploy
netlify deploy --prod


Certainly! Here's a simplified schema for your backend database:

  1. Users Table:

    • UserID (Primary Key)
    • Username
    • Password
    • Role (Admin, Company Manager, Employee)
    • CompanyID (Foreign Key referencing Company table)
  2. Companies Table:

    • CompanyID (Primary Key)
    • CompanyName
    • ManagerID (Foreign Key referencing Users table)
  3. Employees Table:

    • EmployeeID (Primary Key)
    • FirstName
    • LastName
    • Role (Employee roles)
    • UserID (Foreign Key referencing Users table)
    • CompanyID (Foreign Key referencing Companies table)
  4. Food Table:

    • FoodID (Primary Key)
    • Description
    • Mise (assuming this is a list of ingredients)
    • CompanyID (Foreign Key referencing Companies table)
  5. Beverage Table:

    • BeverageID (Primary Key)
    • Description
    • Mise (assuming this is a list of ingredients)
    • CompanyID (Foreign Key referencing Companies table)
  6. Allergy Table:

    • AllergyID (Primary Key)
    • AllergyName

Related Projects

A project by Zernonia