Building a photographer portfolio

Before I start, I can hear people saying:
"Why create a dedicated website to display your photos when you can just do that on Instagram? No server overload, no asset size management, no region-based serving...etc."

Well, to give it to you straight—I want to deal with those problems. That's all. As a developer, solving problems is how I learn and grow. For me, this project is the perfect combination of creativity and technical challenge.

Why Build This?

This project is a learning milestone. It’s an opportunity to deepen my understanding of things I know and dive into areas I haven’t explored yet. It’s not just about showcasing photos; it’s about building something end-to-end and experimenting with new tools and tech.

Tech Stack

Next.js 14

I chose Next.js 14 for this project, despite Next.js 15 being recently released. While the newer version offers exciting features, I opted for the more stable and battle-tested version 14. I'm particularly excited to leverage Server Components and Server Actions, which introduce a paradigm shift in how requests are handled compared to traditional client-server architectures. These features enable more efficient server-side rendering and data mutations, improving both performance and developer experience.

ShadCN UI

To speed up development, I’m leveraging ShadCN UI, a popular component library. It provides ready-to-use, customizable components, making it easier to focus on building functionality rather than spending hours tweaking design. I made a blog post talking about my experience using ShadCN UI which can be found here

Prisma ORM

For database interaction, I've chosen my trusty old friend Prisma as my ORM. Prisma provides type-safe queries, intuitive database modeling, and safe to say a very good developer experience. Its query engine is capiable of handling both simple CRUD operations and complex raw queries, making database interactions a breeze.

While in a typical business setting I would build dedicated API endpoints to scale and handle edge cases, I chose a simpler approach here. Given the scope and goals of this project, I wanted to explore how far I could push Next.js's built-in capabilities without introducing additional complexity. This allowed me to focus on learning and experimentation while still delivering a robust solution.

Cloudflare R2

For image hosting, I'm using Cloudflare R2. With its built-in CDN for fast global delivery, robust caching for better performance, and region-based serving at a competitive price point, it's proven to be a solid choice for hosting assets without breaking the bank. One of the key benefits is that R2 doesn't charge for egress bandwidth when serving through Cloudflare's CDN, making it significantly more cost-effective compared to alternatives like AWS S3 which can get expensive quickly due to egress fees.

How Did It Go?

Honestly, it went really well! There were some hiccups early on as I figured out the new Next.js 14 features and layout system, but after a few days of tinkering, I was able to pump out pages in a matter of hours.

The ready-to-use components from ShadCN made building the UI a breeze. Instead of wrestling with design details, I could focus on the "business logic" and core functionality.

Again, If you’re curious about my experience using ShadCN, I wrote a detailed blog post about it. Check it out here.

I did run into a small challenge with Sharp, a high-performance image processing module, which had compatibility issues on Linux distributions during deployment. The solution was to downgrade to version 0.32.6, which resolved the compatibility problems and got everything running smoothly.

Looking back at this project (which realistically took a few weeks), I learned a lot about deployment strategies, website hosting considerations, and image service optimization. The hands-on experience with these technologies proved invaluable for my growth as a developer.

Credits and Inspiration

The design of this photo gallery was inspired by Sam Becker's beautiful photography portfolio. His clean, minimalist approach to displaying photography work served as a great reference point for this project.