The latest articles on Forem by Aayush Raj (@aayush_raj_9549d303146f35). https://forem.com/aayush_raj_9549d303146f35 https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3204699%2F1914306e-da49-4eec-bc9f-a433ddc1b474.png https://forem.com/aayush_raj_9549d303146f35 en Aayush Raj Thu, 31 Jul 2025 14:24:47 +0000 https://forem.com/aayush_raj_9549d303146f35/building-viewproof-a-photographer-client-album-sharing-platform-with-react-firebase-cloudinary-2lah https://forem.com/aayush_raj_9549d303146f35/building-viewproof-a-photographer-client-album-sharing-platform-with-react-firebase-cloudinary-2lah <p>Here’s a complete <strong>Dev.to-style blog post</strong> you can copy and paste or publish to your own blog:</p> <h1> 🚀 Building ViewProof: A Photographer-Client Album Sharing Platform with React, Firebase &amp; Cloudinary </h1> <p><em>Published on [Dev.to] by Aayush Raj</em></p> <h2> 📸 Introduction </h2> <p>In this solo-built project, I created <strong>ViewProof</strong> — a modern web app for photographers to share albums with clients, who can <strong>view</strong>, <strong>approve</strong>, and <strong>comment on photos</strong> individually. It solves a real problem in client communication and delivery — and gave me hands-on experience with full-stack technologies, UI/UX, and deployment.</p> <h2> 🌟 What is ViewProof? </h2> <blockquote> <p>A tool for photographers to upload photo albums and share them securely with clients. Clients can approve/reject photos and leave comments per image.</p> </blockquote> <h3> 🔑 Key Features: </h3> <ul> <li>👤 Role-based access: Photographer &amp; Client</li> <li>🖼️ Album upload with image previews (using Cloudinary)</li> <li>🧑‍💼 Clients can approve/reject photos and leave feedback</li> <li>✏️ Rename/Delete albums (for photographers)</li> <li>🔐 Access control — only the intended user can view the album</li> <li>📈 Progress indicator (e.g., 8/10 photos approved)</li> </ul> <h2> ⚙️ Tech Stack </h2> <div class="table-wrapper-paragraph"><table> <thead> <tr> <th>Category</th> <th>Stack</th> </tr> </thead> <tbody> <tr> <td>Frontend</td> <td>React, TailwindCSS</td> </tr> <tr> <td>Backend</td> <td>Firebase Auth &amp; Firestore</td> </tr> <tr> <td>File Hosting</td> <td>Cloudinary (chunk upload)</td> </tr> <tr> <td>Deployment</td> <td>Vercel</td> </tr> </tbody> </table></div> <h2> 🧠 What I Learned </h2> <p>This project pushed me beyond basic CRUD:</p> <h3> 🔐 Firebase Authentication &amp; Role Access </h3> <ul> <li>Users register with a <strong>role</strong> (<code>photographer</code> or <code>client</code>)</li> <li>On login, the UI adjusts based on role</li> <li>Protected routes and album access checks ensure <strong>only the right user sees the right content</strong> </li> </ul> <h3> ☁️ Cloudinary File Upload </h3> <ul> <li>Implemented <strong>chunked uploads</strong> for better large-file handling</li> <li>Stored photo metadata in Firestore, while image URLs came from Cloudinary</li> <li>Used <code>FormData</code> and REST API rather than an SDK for full control</li> </ul> <h3> 🎨 UI/UX and Responsiveness </h3> <ul> <li>Built a clean, minimal interface using Tailwind</li> <li>Prioritized mobile-friendliness (tested on various breakpoints)</li> <li>Focused on microinteractions like loading spinners, status badges, and modals</li> </ul> <h2> 📸 Demo </h2> <blockquote> <p>✅ <strong>Live Demo</strong>: <a href="https://view-proof.vercel.app" rel="noopener noreferrer">https://view-proof.vercel.app</a></p> <p>📂 <strong>GitHub Repo</strong>: <a href="https://github.com/Aayush-2825/viewproof" rel="noopener noreferrer">https://github.com/Aayush-2825/viewproof</a></p> </blockquote> <h2> 🧪 What's Next? </h2> <p>If I extend this project, I’d add:</p> <ul> <li>🔔 Email or push notifications for new uploads</li> <li>📥 Zip download option for approved photos</li> <li>💬 Real-time chat or comment thread per album</li> <li>🧾 Admin dashboard for photographers</li> </ul> <h2> 🙌 Final Words </h2> <p>This project helped me <strong>solidify full-stack concepts</strong>, learn <strong>real-world file management</strong>, and improve my <strong>UI/UX thinking</strong>. If you're learning React and Firebase, or just looking for a solo project to showcase on your portfolio — something like ViewProof is a great bet.</p> <p>If you liked this, let’s connect:</p> <p>👉 <a href="https://github.com/Aayush-2825" rel="noopener noreferrer">GitHub</a><br> 👉 <a href="https://www.linkedin.com/in/aayush-raj-138430322/" rel="noopener noreferrer">LinkedIn</a></p> webdev react firebase javascript