https://dhruba-datta.netlify.app/assets/PhotoBoothPage-EF5By7SC.js

1import{j as e}from"./vendor-motion-C0Ykwh7C.js";import{f as s,z as t,h as o,A as a,B as i,e as r}from"./index-DQYSP24l.js";import{P as m}from"./ProjectPageTemplate-BukZfH_t.js";import{w as c,x as d,y as h,z as p,B as g,f as u}from"./vendor-icons-CZ0fHw8h.js";import"./vendor-react-D8ZVE-1i.js";import"./index-tD3BwZqC.js";import"./index-B32Yb0IV.js";import"./index-C9VRkwIY.js";import"./index-CMnRXDm6.js";import"./Footer-ClRpSHv8.js";import"./ProjectCard-BwLNlIzs.js";import"./projects-Clb5hPl-.js";import"./Seo-D8Plyq5-.js";const R=({isDark:n,toggleTheme:l})=>e.jsx(m,{isDark:n,toggleTheme:l,title:"PhotoBooth",description:"I built a photo-sharing gallery app in React with Sanity CMS as the backend. Users sign in with Google, post photos with a title, description, link and category, browse them in a masonry grid, search, save posts and leave comments. Authentication uses Google OAuth, and Sanity stores the users, posts, saves and comments, so there is no custom backend to run.",coverSrc:"/images/projects/photobooth.webp",chips:[{name:"React",icon:e.jsx(s,{className:"w-3 sm:w-3.5 h-3 sm:h-3.5"})},{name:"Sanity.io",icon:e.jsx(t,{className:"w-3 sm:w-3.5 h-3 sm:h-3.5"})},{name:"Tailwind CSS",icon:e.jsx(o,{className:"w-3 sm:w-3.5 h-3 sm:h-3.5"})},{name:"Google OAuth",icon:e.jsx(a,{className:"w-3 sm:w-3.5 h-3 sm:h-3.5"})},{name:"React Router",icon:e.jsx(i,{className:"w-3 sm:w-3.5 h-3 sm:h-3.5"})},{name:"Netlify",icon:e.jsx(r,{className:"w-3 sm:w-3.5 h-3 sm:h-3.5"})}],githubUrl:"https://github.com/dhruba-datta/photoBooth",secondaryUrl:"https://phootobooth.netlify.app/",secondaryLabel:"Check it out",features:[{id:"upload",icon:e.jsx(c,{className:"w-4 sm:w-5 h-4 sm:h-5"}),title:"Image Uploads",summary:"Upload and manage photos in a gallery",details:["Upload an image with a title, description, link and category","Images stored in Sanity CMS with metadata","Sanity's CDN for image delivery and optimization"]},{id:"gallery",icon:e.jsx(d,{className:"w-4 sm:w-5 h-4 sm:h-5"}),title:"Masonry Gallery Grid",summary:"Browse photos in a responsive masonry layout",details:["Pinterest-style responsive grid layout","Images resize based on screen width","Click to view full-size images"]},{id:"engagement",icon:e.jsx(h,{className:"w-4 sm:w-5 h-4 sm:h-5"}),title:"Save, Download & Comment",summary:"Interact with other people's photos",details:["Save posts to come back to later, with a save count on each","Download the original image","Comment on a post from its detail page"]},{id:"auth",icon:e.jsx(p,{className:"w-4 sm:w-5 h-4 sm:h-5"}),title:"Google OAuth Login",summary:"Sign in with your Google account",details:["One-click login with Google OAuth","User profile pulled from Google account","Persistent login across sessions"]},{id:"profile",icon:e.jsx(g,{className:"w-4 sm:w-5 h-4 sm:h-5"}),title:"Profiles, Categories & Search",summary:"Find photos by person, topic or keyword",details:["Profile pages with each user's created and saved posts","Browse by category from the sidebar","Search across posts"]},{id:"responsive",icon:e.jsx(u,{className:"w-4 sm:w-5 h-4 sm:h-5"}),title:"Responsive Design",summary:"Works on mobile, tablet, and desktop",details:["Mobile-first responsive layout","Touch-friendly interactions on mobile","Full features on all screen sizes"]}],techSectionTitle:"Stack",techItems:[{icon:e.jsx(s,{className:"w-3.5 h-3.5 sm:w-4 sm:h-4"}),label:"React",description:"Component framework for building the UI."},{icon:e.jsx(t,{className:"w-3.5 h-3.5 sm:w-4 sm:h-4"}),label:"Sanity.io",description:"Headless CMS for users, posts, saves and comments."},{icon:e.jsx(o,{className:"w-3.5 h-3.5 sm:w-4 sm:h-4"}),label:"Tailwind CSS",description:"Utility-first CSS for responsive design and styling."},{icon:e.jsx(a,{className:"w-3.5 h-3.5 sm:w-4 sm:h-4"}),label:"Google OAuth",description:"Authentication for one-click login with Google accounts."},{icon:e.jsx(i,{className:"w-3.5 h-3.5 sm:w-4 sm:h-4"}),label:"React Router",description:"Client-side routing for gallery and profile pages."},{icon:e.jsx(r,{className:"w-3.5 h-3.5 sm:w-4 sm:h-4"}),label:"Netlify",description:"Hosting with continuous deployment."}],useCases:["Learning how to build a photo sharing app with React and Sanity","Understanding headless CMS architecture for managing users and content","Building a social photo platform with saves, comments and categories"],howToSteps:[e.jsxs(e.Fragment,{children:["Clone: ",e.jsx("code",{className:"text-xs sm:text-sm bg-gray-200 dark:bg-gray-700 px-1 py-0.5 rounded border border-blue-200 dark:border-gray-600",children:"git clone https://github.com/dhruba-datta/photoBooth"})]}),e.jsxs(e.Fragment,{children:["Install deps: ",e.jsx("code",{className:"text-xs sm:text-sm bg-gray-200 dark:bg-gray-700 px-1 py-0.5 rounded border border-blue-200 dark:border-gray-600",children:"npm install"})]}),e.jsxs(e.Fragment,{children:["Configure environment: Set Sanity project vars and Google OAuth credentials in your ",e.jsx("code",{className:"text-xs sm:text-sm bg-gray-200 dark:bg-gray-700 px-1 py-0.5 rounded",children:".env"}),"."]}),e.jsxs(e.Fragment,{children:["Start dev server: ",e.jsx("code",{className:"text-xs sm:text-sm bg-gray-200 dark:bg-gray-700 px-1 py-0.5 rounded border border-blue-200 dark:border-gray-600",children:"npm run dev"})]}),e.jsxs(e.Fragment,{children:["Build & deploy (Netlify): ",e.jsx("code",{className:"text-xs sm:text-sm bg-gray-200 dark:bg-gray-700 px-1 py-0.5 rounded border border-blue-200 dark:border-gray-600",children:"npm run build"})," then connect repo on Netlify for CI/CD."]})],contactCTA:{title:"Building a social gallery or portfolio site?",description:"I build photo-sharing platforms with React, Sanity CMS for content management, and social features like saves and comments.",primaryButtonText:"Get Started",secondaryButtonText:"View All Projects"}});export{R as default};