🧠 My Admin Dashboard — Learning Supabase with Real Practice

Hi! I'm Skino — a self-taught developer on a journey to master full-stack JavaScript. This project is part of my learning adventure, and it's the first time I fully integrated a real backend using Supabase.

I built this Admin Dashboard to manage products — with features like authentication, image upload, and real-time updates. It's been an eye-opening experience working with cloud tools and understanding how frontend talks to a real database.

🚀 What This Project Does

This is a simple but powerful product management tool:

👤 Users can sign up and log in
🛒 Add products with:
- Name (auto-capitalized)
- Category (selectable from dropdown)
- Price (displays with $ symbol)
- Product image (uploaded and previewed live)
🖼 Uploaded images are stored in Supabase Storage
🧾 Products are stored in Supabase Database
✅ Users can update or delete their own products
🔐 All content is user-specific — no one sees another user’s data

💡 What I Learned

While building this, I learned how to:

Connect frontend JavaScript with Supabase Auth for user login
Upload and delete images from Supabase Storage (even private buckets!)
Save metadata like image_path and handle it cleanly
Use Signed URLs to display images securely
Write clean UI logic with *toasts, **modals, and *form resets
Handle edge cases like "no image selected" or auth session expiry
Use real-time database insertions and fetch with filters

Honestly, this changed the way I see web development. Now I understand how you can build full products without setting up your own server.

🔧 Tools Used

HTML/CSS/JavaScript
Supabase (Auth, DB, Storage)
Toast feedback system for alerts
Confirm modals for deletes
Custom styling and animations for product cards

✅ What Works Right Now

User auth with session check
CRUD for products (Create, Read, Update, Delete)
Product image uploads to Supabase
Image previews before uploading
Only signed-in users can manage their data
Private bucket access with Signed URLs
Clean UI with reset after submission

✅ What Works Right Now
User auth with session check
CRUD for products (Create, Read, Update, Delete)
Product image uploads to Supabase
Image previews before uploading
Only signed-in users can manage their data
Private bucket access with Signed URLs
Clean UI with reset after submission

🌐 View Live Project

🛠 Things I Want to Improve Next

Add dark mode 🌙
Add search/filter for products
Live dashboard stats (e.g., total products)
Upload progress feedback
Add tags or color categories
Deploy it publicly (GitHub Pages or Netlify)

📸 Sample Screenshot

Coming soon after final polish!

🧠 Final Thoughts

This was a big breakthrough for me. It’s not just about coding now — it’s about thinking like a real developer, building full apps, and understanding both frontend and backend. Supabase made that possible without being too complicated.

If you’re like me, just starting out — don’t wait to build things. Start messy. You’ll learn a lot more than you expect.

💻 Built by: Skino

Mentored by: Legacy (my tough AI code partner)
Date: 7th July 2025

skinojosh22/Admin-dashboard