A straightforward, single-page web application that allows users to submit appreciation messages. The frontend is built with plain HTML and Tailwind CSS, and the backend is powered by Vercel Serverless Functions connected to a Supabase database for persistent storage. Used in andrinoff.com

The project consists of two main parts:

1. Frontend (index.html): A clean and simple form where users can type a message and an optional author name. It provides real-time feedback on submission status (loading, success, error).
2. Backend (/api): Two Vercel Serverless Functions written in JavaScript that act as an intermediary between the frontend and the Supabase database.

• Simple Submission Form: A user-friendly interface for submitting messages.
• Anonymous Submissions: Users can submit messages without providing a name.
• Serverless Backend: Uses Vercel Serverless Functions for scalable and cost-effective backend logic.
• Persistent Storage: Connects to a Supabase project to store and retrieve appreciations.
• Real-time Feedback: The UI dynamically updates to show loading spinners and success/error messages.
• Easy to Deploy: Can be deployed in minutes on Vercel.

• Frontend: HTML, Tailwind CSS
• Backend: Vercel Serverless Functions (Node.js)
• Database: Supabase (PostgreSQL)
• Dependencies: @supabase/supabase-js

The backend exposes two serverless functions:

• POST /api/database:

  • Receives an appreciation message and an optional author name in the request body.
  • Inserts the new appreciation into the Appreciations table in Supabase.
  • Body Parameters:
    • text (string, required): The appreciation message.
    • author_name (string, optional): The name of the person submitting.

• GET /api/get_appreciations:

  • Fetches all records from the Appreciations table.
  • Returns an array of appreciation objects, sorted by creation date.

To get a local copy up and running, follow these steps.

• A Vercel account.
• A Supabase account.
• Node.js installed on your machine.

1. Clone the repository:

   git clone [https://github.com/andrinoff/appreciations.git](https://github.com/andrinoff/appreciations.git)
   cd appreciations

2. Set up Supabase:

   • Create a new project on Supabase.
   • Inside your project, go to the SQL Editor and create a new table named Appreciations.

   CREATE TABLE "Appreciations" (
     id uuid GENERATED BY DEFAULT AS IDENTITY PRIMARY KEY,
     created_at TIMESTAMPTZ DEFAULT NOW(),
     text TEXT NOT NULL,
     author_name TEXT
   );

   • Navigate to Project Settings > API and find your Project URL and anon public key.

3. Set up Vercel Environment Variables:

   • Fork the repository on GitHub and connect it to a new Vercel project.
   • In your Vercel project settings, go to Environment Variables and add the following:
     • SUPABASE_URL: Your Supabase Project URL.
     • SUPABASE_ANON_KEY: Your Supabase anon public key.

4. Deploy:

   • Vercel will automatically detect the serverless functions and deploy the project. Once deployed, you can visit the provided URL to see your appreciation form live.

Distributed under the MIT License. See LICENSE for more information.

Drew Smirnoff

• Email: business@andrinoff.com
• GitHub: github.com/andrinoff