Corazonada Tattoo
Full-stack website for a private tattoo studio with dynamic artist portfolios, appointment booking, and an integrated blog.
Complete website for Corazonada Tattoo, a private tattoo studio in Playa del Carmen, Mexico. Built with Next.js and MongoDB, the site manages rotating guest artist portfolios, handles appointment bookings with email notifications, and publishes tattoo care content through a blog, all with smooth Framer Motion animations.
Gallery
Project Overview
Corazonada Tattoo is a private tattoo studio in Playa del Carmen, Mexico. “Private” means appointment-only: each client gets dedicated time with the artist, and there are no walk-ins. The website serves as the primary way potential clients discover the studio, preview artists’ work, and book sessions.
The studio regularly hosts guest artists from different cities and countries. The site needed to handle this rotation smoothly: artists come and go, each with their own portfolio, bio, and booking information.
Artist Portfolio System
Each artist has a dedicated page with their biography, specialization, and a gallery of their work. The system is backed by MongoDB, so adding a new guest artist or updating a portfolio doesn’t require a deployment. It’s a data operation.
Gallery Experience
Tattoo portfolios are inherently visual. The gallery uses Embla Carousel for horizontal navigation and opens images in a modal view for detailed inspection. On mobile, touch gestures feel native: swipe to navigate, pinch interactions are handled gracefully, and the modal adapts to screen size.
High-Resolution Images
Tattoo photography needs detail. Images are served through Next.js Image component with responsive sizing and lazy loading to balance quality against page load performance.
Booking Flow
The appointment booking system collects client information through a validated contact form:
- Zod schemas validate input before submission
- Server Actions process the form and store the submission in MongoDB
- Nodemailer sends confirmation emails to both the studio and the client
- WhatsApp integration provides an alternative direct contact channel
The form captures enough detail (preferred artist, tattoo idea, placement, size) to reduce the initial consultation back-and-forth.
Blog
An integrated blog publishes tattoo care content: aftercare guides for new tattoos, artist spotlights, and studio updates. This serves both as a trust-building tool for potential clients and as an SEO driver for organic discovery.
Technical Architecture
Frontend
- Next.js with App Router for SSR/SSG and optimal performance
- React with modern hooks and component-driven architecture
- Framer Motion for page transitions, scroll animations, and interactive elements
- Tailwind CSS for responsive styling with the studio’s custom color palette (pink, green, ink)
Backend
- MongoDB storing artist profiles, portfolio images, contact submissions, and blog content
- Server Actions for form handling and database operations
- Nodemailer for transactional emails via SMTP
- Next.js Image optimization with lazy loading and responsive formats
Key Components
- Hero section with video background and clear call-to-action
- Artist grid with dynamic loading and filtering by availability
- Gallery system with Embla Carousel, modal viewing, and navigation controls
- Contact forms with multi-step validation and confirmation feedback
The Challenge
- Managing dynamic artist portfolios where the number of images and guest artists changes frequently
- Creating smooth gallery experiences with modal views and carousel navigation
- Implementing a booking flow with form validation and email notifications
- Building a responsive design that feels native on mobile where most clients browse
The Approach
- MongoDB-backed artist and portfolio system with dynamic image galleries
- Embla Carousel integration for smooth, touch-friendly image navigation
- Server Actions for form processing with Zod validation and Nodemailer notifications
- Tailwind CSS with custom responsive grid layouts and mobile-first approach
Results
- Professional digital presence for the studio, replacing social media as the primary booking channel
- Streamlined appointment booking reducing back-and-forth with potential clients
- Guest artists can be added and rotated without code changes
- Mobile-optimized experience for the majority of the studio's audience
Impact
The studio no longer depends on Instagram to show its work and take bookings. It has its own site now, and each guest artist gets a page with their work next to the resident team's.
Project Details
Objective
Give the studio a professional digital presence that showcases guest artists, streamlines appointment booking, and builds trust with potential clients before they visit.
Theme
Modern tattoo studio with pink and green color palette and smooth animations.
Date
June 11, 2024