Art Journal - A Digital Art Journaling App
Live: artjournal.ing
Project Description
Art Journal is a modern digital art journaling app designed to help you document exhibitions, concerts, performances, and your own creative work in one beautiful timeline. Built as a personal project after visiting STRAAT Museum in Amsterdam with my son, I wanted a way to capture not just photos, but the emotions and reflections that come with experiencing art.
Main Features
- Personal Art Timeline - Document museum visits, concerts, and your own creative work
- Multiple Visibility Modes - Private, friends-only, or public moments
- Social Features - Friend connections, likes, comments, and notifications
- User Search - Find friends and discover public art moments by artist, venue, or tags
- SEO-Optimized Blog - Integrated blog with dynamic sitemap for content marketing
- GDPR Compliance - Data export, account deletion, privacy controls
- PWA Support - Installable on mobile devices with offline capabilities
Tech Stack
| Category | Technology |
|---|---|
| Framework | Next.js 16 (App Router) |
| Language | TypeScript |
| Styling | Tailwind CSS v4 |
| UI Components | shadcn/ui + Radix UI |
| Database | Supabase (PostgreSQL) |
| Auth | Supabase Auth |
| Storage | Supabase Storage |
| Analytics | Vercel Analytics |
| Deployment | Vercel |
Technical Highlights
- Row Level Security (RLS) on all 7 database tables with granular policies for data protection
- Security Headers - X-Frame-Options, HSTS, CSP, XSS Protection
- Dynamic Sitemap - Auto-generates sitemap including user profiles for SEO
- Server Actions - All data mutations use Next.js server actions with auth checks
- Username-based URLs - Human-readable profile URLs (
/u/username) - Optimistic UI - Instant feedback on likes and social interactions
Main Wins
- Built entirely with v0 - From initial concept to production app, the entire development was done through v0 conversations, showcasing what’s possible with AI-assisted development.
- Real-time iteration - Quickly pivoted features based on needs: added username-based URLs (
/u/username), GDPR compliance (data export/delete), and SEO blog in the same session. - Production-ready security - Implemented RLS on all tables, security headers, proper auth flows, and privacy controls without compromising development speed.
- Dynamic SEO - Created a sitemap that automatically includes new user profiles and blog posts, plus optimized content with targeted keywords like “art journal diary”.
- Full social platform - Friends system, notifications, likes, comments, and privacy controls all working together seamlessly.
Main Challenges
- Build errors with **/analytics** - The Analytics component kept causing deployment failures. Had to carefully remove and re-add it after other fixes were in place.
- Missing function exports - The username profile page referenced
getFriendshipStatuswhich didn’t exist yet, causing cryptic build failures. Debugging required tracing the actual error in deployment logs. - Sitemap domain mismatch - Initially hardcoded wrong domain (
artjournal.appinstead ofartjournal.ing), causing Google Search Console to reject all URLs. - TypeScript strict mode - Unused imports (like
notFound,Tabs,ArrowLeft) caused silent build failures. Had to clean up all unused code. - Database migrations timing - Adding the username system required careful ordering: migration first, then code changes, to avoid runtime errors on missing columns.