💃 Personal Dashboard Application 💃

By VITO SOFTWARE aka Ravi

🌐 Overview

This is a personal dashboard boilerplate app made with SvelteKit and Supabase. It offers a myriad of features like user authentication, server-side data fetching, and a simple starting point for a user dashboard. Moreover, it's styled using Tailwind CSS and Bulma CSS .

🚀 Getting Started

Steps

1. Clone the repository to your local machine.

   git clone https://github.com/soleribbon/SvelteKit-Auth-Boilerplate.git
   

2. Navigate to the project folder and install the dependencies.

   cd SvelteKit-Auth-Boilerplate
   npm install
   

3. Set Up Supabase. Steps:

   • 📂 Create: .env file
   • 📂 Make sure you have a Supabase Auth project set up (w/ any auth accounts like Google)
   • ⬇️ Insert Supabase URL and ANON KEY in .env ```bash

     Update these with your Supabase details from your Supabase project settings > API

     PUBLIC_SUPABASE_URL=YourURLHere PUBLIC_SUPABASE_ANON_KEY=YourKeyHere

4. Start the development server ```bash npm run dev -- --host

Note: The --host flag makes your application accessible to any device on your local network.

🎨 Features

🔒 User Authentication

• Handles user sign-up, sign-in, and password reset functionality.
• Leverages Supabase's authentication services.
• Compatible with Google + GitHub authentication (go here to create Google auth)
• 📂 Related Code: src/routes/(app)/+page.server.js

📊 Dashboard

• Displays server-side fetched data for authenticated users.
• 📂 Related Code: src/routes/(app)/dashboard/+page.svelte

🎨 Styling

• Styled using Tailwind CSS & Bulma CSS
• 📂 Related Code: tailwind.config.js & bulma.min.css

🧪 Testing

• End-to-end testing enabled with Playwright.
• 📂 Related Code: playwright.config.js and tests/test.js

📜 Scripts

npm run dev -- --host  # Starts the development server
npm run test          # Runs the Playwright tests
npm run lint          # Checks the format of the code
npm run format        # Automatically formats the code