SmartBookmark

SmartBookmark is a real‑time bookmark manager that combines elegant design with robust functionality. It was built to demonstrate a full‑stack application using Next.js (App Router) and Supabase, with a focus on instant data synchronization and a polished user experience.

The application leverages Supabase for authentication (Google OAuth) and database, with PostgreSQL storing user‑specific bookmarks. Row‑Level Security (RLS) policies ensure that each user sees only their own data. Realtime subscriptions propagate insert and delete events to all connected clients, enabling seamless multi‑tab collaboration.

The frontend is crafted with Tailwind CSS and Framer Motion, featuring a custom dark color palette (#2B2D42, #8D99AE, #EDF2F4, #EF233C, #D90429) and smooth animations. Custom modal components (with React Portal) and toast notifications enhance the interactive experience.

• Implemented Google OAuth authentication with secure session handling using Supabase SSR.
• Designed a responsive, animated UI with Tailwind CSS and Framer Motion, including card entrance/exit animations.
• Built real‑time bookmark sync using Supabase Realtime – changes appear instantly in all open tabs.
• Added custom confirmation modals (delete, logout) rendered via React Portal to avoid CSS containment issues.
• Integrated react‑hot‑toast for non‑intrusive success/error messages.
• Extended functionality with email/password signup and mandatory profile picture upload (stored in Supabase Storage).
• Deployed the frontend on Vercel with environment variables configured for production; updated Google Cloud OAuth redirect URIs and Supabase URL settings.
• Used TypeScript for type safety and generated database types from Supabase CLI.

Secure Google OAuth Login

Users sign in with their Google account – no passwords, no friction. The login page features a sleek dark gradient and a polished Google button with hover animations.

Dashboard & Bookmark Management

After login, users land on a protected dashboard where they can add new bookmarks (title + URL) and see their existing ones. The form is clean and responsive.

Real‑time Sync Across Tabs

Bookmarks update instantly across all open browser tabs – no refresh needed. Powered by Supabase Realtime, any addition or deletion is broadcast immediately.

Animated Bookmark Cards & Delete Confirmation

Each bookmark appears as a stylish card with smooth entrance animations. Deleting a bookmark triggers a custom modal with a cancel/delete option and shows a success toast.

Email/Password Signup (Extended)

Beyond the core spec, users can also create an account with email/password and upload a profile picture. Avatars appear in the header alongside the email.