Overview

The 4S SvelteKit Supabase Stripe Skeleton UI is a web application that combines the SvelteKit framework with Supabase (an authentication, database, and storage provider) and Stripe (a payment system provider) to create a skeleton user interface. It offers features such as login, updating user details, webhooks, and a subscription menu. The application is built using the newest versions of Svelte (v4.2.0), Supabase (v0.10.2 PKCE), and Skeleton (v2.0). The UI is designed to support phone navigation and follows best practices for handling private keys securely. The project is open for collaboration, and users can download the code from GitHub to set it up.

Features

• Login
• Update user details
• Webhooks
• Subscription menu

Note: Products menu may be added in the future.

Installation

1. Download the code from GitHub using GitHub CLI or any preferred method.
2. Set up Supabase:
   • Create a new Supabase project on the Supabase Dashboard.
   • Copy the Supabase keys to the .env.example file. Rename the file to .env and ensure that it is ignored by .gitignore when uploading to GitHub.
3. Set up Vercel:
   • Upload your project to Vercel.
   • Add the keys from the .env file to the Vercel environment.
   • Copy the domain (e.g., https://your-domain.vercel.app/) to use for connecting to the Stripe webhook in the next step.
4. Set up Stripe webhook:
   • Create a Stripe account.
   • Obtain your Stripe keys.
   • Access the Stripe webhook settings.
   • Copy and paste the https://your-domain.vercel.app/api/webhook URL into the Stripe webhook settings.
   • Tag the webhook to listen to all events.
5. Ensure all necessary environment keys are added and synced to Vercel.
6. Debug any errors related to webhooks by checking the Vercel logs.
7. Debug any errors related to Supabase by checking the Supabase logs, particularly if they are related to the RLS (Row Level Security) setting.

Summary

The 4S SvelteKit Supabase Stripe Skeleton UI is a skeleton user interface built using SvelteKit, Supabase, and Stripe. It offers features such as login, updating user details, webhooks, and a subscription menu. The app is set up by downloading the code from GitHub and following installation steps for Supabase, Vercel, and Stripe webhooks. Any errors related to webhooks can be checked in the Vercel logs, while errors related to Supabase can be checked in the Supabase logs, with a focus on the RLS setting. The project is open for collaboration, and users are encouraged to contribute by sending pull requests or creating branches.