Smart Bookmark

A real-time bookmark manager built with Next.js and Supabase.

This project allows users to securely save and manage their personal bookmarks using Google login, with real-time syncing across tabs and devices.

---

Features

• Google OAuth authentication (no email/password)
• Private bookmarks per user
• Add and delete bookmarks
• Real-time sync across multiple tabs
• Row Level Security (RLS) enabled
• Clean modern UI
• Deployed on Vercel

---

Tech Stack

• Next.js (App Router)
• Supabase (Auth, Database, Realtime)
• Tailwind CSS
• Vercel (Deployment)

---

Live Demo

https://smart-bookmark-six-peach.vercel.app

---

GitHub Repo

https://github.com/rehmnjr/smart-bookmark

---

Challenges I Faced & How I Solved Them

1. Supabase Table Not Working (404 Errors)

At first, I kept getting 404 errors while inserting bookmarks. The issue was caused by a mismatch between the table name in Supabase and the one used in the frontend.

I solved it by:

• Double-checking the exact table name
• Ensuring the table exists in the public schema
• Rewriting the Supabase queries from scratch

---

2. "No API key found in request"

Even after setting environment variables, Supabase was throwing API key errors.

Root cause:

• Incorrect environment variable naming and caching issues.

Fix:

• Used NEXT_PUBLIC_SUPABASE_URL and NEXT_PUBLIC_SUPABASE_ANON_KEY correctly
• Restarted the dev server
• Replaced all Supabase client code to avoid stale config

---

3. Row Level Security (RLS) Confusion

Initially, bookmarks weren’t inserting due to RLS blocking access.

What helped:

• Understanding how auth.uid() works
• Creating separate policies for SELECT, INSERT, DELETE
• Matching user_id with auth.uid()

This was a big learning moment about real-world database security.

---

4. Google OAuth Setup Complexity

Setting up Google login was harder than expected.

Problems faced:

• Google Cloud requiring 2FA
• OAuth consent screen confusion
• Redirect URL mismatch between localhost and production

Fix:

• Added both localhost and Vercel domains in Google OAuth settings
• Updated Supabase Auth redirect URLs
• Verified callback URLs carefully

---

5. Tailwind Not Applying Styles

At one point, the UI looked completely broken even though Tailwind was installed.

Issue:

• Incorrect layout setup in Next.js App Router

Fix:

• Rebuilt layout.js properly
• Ensured globals.css was imported correctly
• Verified Tailwind config

---

6. Realtime Not Updating

Realtime updates initially didn’t work across tabs.

Reason:

• Realtime not enabled on the table in Supabase

Solution:

• Enabled realtime in Supabase dashboard
• Subscribed to postgres_changes channel correctly
• Refetched data on INSERT and DELETE events

This made bookmarks sync instantly across tabs.

---

7. Next.js Build Errors on Vercel

During deployment, I hit prerender errors like: "default export is not a React Component"

Fix:

• Removed unused routes
• Cleaned folder structure
• Ensured App Router conventions were followed

---

8. Google Login Not Working in Production

Login worked locally but failed on Vercel.

Cause:

• Missing production redirect URLs in Supabase and Google Cloud

Fix:

• Added Vercel domain to:

  • Supabase redirect URLs
  • Google OAuth authorized origins

After this, authentication worked perfectly in production.

---

What I Learned

This project taught me a lot about:

• Real-world authentication flows
• Database security using RLS
• Environment variables across environments
• Debugging deployment issues
• Realtime systems with Supabase
• Production-ready Next.js apps

It was a great hands-on experience building and deploying a full-stack real-time app from scratch.

---

Future Improvements

If I continue this project, I would add:

• Edit bookmarks
• Dark mode
• Bookmark categories/tags
• Link previews
• Analytics dashboard

---

Author

Fahim Rehman https://github.com/rehmnjr