A Tinder-style web app for discovering your architectural preferences. Swipe right on buildings you love, left on ones you don't, and build up a profile of your unique architectural taste.
- Swipe Interface - Drag-to-swipe cards showing architectural images, with keyboard (arrow keys) and button support
- Authentication - Sign up / login via email, Google, or GitHub using Supabase Auth
- User Profiles - Editable profile with avatar upload, bio, and architectural style preferences
- Activity Dashboard - View your swipe stats, like ratio, decision timing, top liked/passed styles, and your "Architectural DNA" (per-style affinity breakdown)
- Admin Panel - Role-based admin dashboard with platform-wide analytics: total users/swipes, global style popularity, image performance rankings, and average decision time per style
- Framework: Next.js 14 (App Router)
- Language: TypeScript
- Styling: Tailwind CSS
- Animations: Framer Motion
- Backend / Database / Auth / Storage: Supabase
- Icons: Lucide React
- Node.js 18+
- A Supabase project with the required tables (
profiles,styles,swipes,images) and RPC functions
Create a .env.local file in the project root:
NEXT_PUBLIC_SUPABASE_URL=your_supabase_project_url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key
NEXT_PUBLIC_BASE_URL=http://localhost:3000
npm install
npm run devOpen http://localhost:3000 to view the app.
npm run build # Production build
npm run start # Start production server
npm run lint # Run ESLintsrc/app/
├── layout.tsx # Root layout with AuthProvider
├── page.tsx # Landing page
├── globals.css # Global styles & Tailwind
├── auth/page.tsx # Login / sign-up page
├── swipe/page.tsx # Main swipe interface
├── profile/page.tsx # User profile & activity dashboard
├── admin/
│ ├── layout.tsx # Admin layout with role-based access control
│ └── trends/page.tsx # Platform analytics dashboard
├── context/AuthContext.tsx # Auth context provider
└── lib/supabaseClient.ts # Supabase client initialization