A production-grade, open-source digital photo album & blog, built with Next.js, Clerk, Sanity, and Neon. The entire development process, conducted in close collaboration with an AI co-pilot, is documented in a 17-part tutorial series.
Live Demo | Full Tutorial Series
This project began with a simple question: in the age of AI, can a solo developer truly build, launch, and maintain a production-grade application from scratch?
This repository is my answer to that question. It is, first and foremost, a public experiment in AI co-development, and only secondarily, a product.
To be frank, the application itself is not a groundbreaking startup. It's a personal "online album" built to solve a real pain point: sharing photos without the heavy compression of social media. The true value of this project lies in the process. It's a complete, documented journey of a novice indie developer learning to leverage AI to explore, learn, and ultimately build something real, useful, and production-ready.
The entire journey—the successes, the pitfalls, the late-night bug fixes, and the "aha!" moments—is unreservedly documented in the accompanying tutorial series.
- 🖼️ Masonry Photo Gallery: A beautiful, responsive masonry grid for photo collections, respecting original aspect ratios.
- 📸 Immersive Polaroid-style Preview: An emotionally resonant, algorithmically sized photo modal with spring animations.
- 🌐 Full Internationalization (i18n): Complete English and Chinese language support from day one, built into the core architecture.
- 💬 Mini Community System: User authentication (Clerk), likes, and nested comments with a full backend moderation system.
- ✍️ Markdown Blog: A personal blog with a real-time Markdown previewer that syncs content to Sanity's Portable Text format.
- 🛡️ Enterprise-Grade Security: A multi-layered defense system including hotlink protection, API rate-limiting, and a secure image proxy to protect digital assets.
- 🚀 Performance-Optimized: Built for speed with a multi-layer caching strategy, SSG/ISR,
next/image, and a focus on Core Web Vitals. - 🤖 AI Co-Developed: Over 95% of the code was written in collaboration with an AI partner, guided by human architectural decisions.
This project was built with a modern, production-ready, and scalable tech stack.
Frontend: Next.js (App Router), React, TypeScript, Tailwind CSS, Framer Motion Backend: Next.js (Route Handlers, Server Actions), Sanity (Headless CMS), Neon (Serverless Postgres), Prisma (ORM) Authentication: Clerk Deployment: Vercel Monitoring: Sentry
This isn't just a collection of features; it's a system built on a set of deliberate architectural principles designed to showcase modern web development best practices. This approach highlights my experience in moving beyond a standard PM role into technical architecture and strategy.
- AI Co-Development Model: A "Captain & Co-pilot" workflow was used throughout. As the human "captain," I was responsible for the "invisible" work: product requirements, technical architecture, course-correction, and problem decomposition. The AI acted as the "co-pilot," handling over 95% of the "visible" work: writing code, drafting content, and executing clear instructions. You can read a full retrospective here.
- Dual-Core Data Architecture: A clear separation of concerns between two data sources. Sanity CMS is used for structured content creation (articles, photos), while a Postgres database (Neon) handles all relational, interactive data (users, likes, comments). A Data Access Layer (DAL) unifies them.
- Defense-in-Depth Security: The application is protected by a multi-layered security system, including a strict Content Security Policy, rate-limiting on sensitive actions, input validation with Zod, and a custom secure image proxy to prevent hotlinking and hide the CMS sensitive information.
- Performance-First & Multi-Layer Caching: The architecture is designed for speed, leveraging a three-layer caching strategy (Cloudflare CDN, Vercel Edge Cache, Sanity CDN) and prioritizing Static Site Generation (SSG/ISR) wherever possible to achieve excellent Core Web Vitals.
This repository is the complete source code for a 17-part tutorial series on building a production-grade application. The setup is comprehensive, involving several third-party services.
There are two main ways to get started:
The quickest and easiest way to have your own live version of this project is to deploy it directly to Vercel. This allows you to have a running application in minutes.
After deploying, you will need to:
- Create your own free accounts for Clerk, Sanity, and Neon.
- Follow the setup steps in their respective dashboards.
- Add the required API keys and database URLs as Environment Variables in your new Vercel project's settings.
The detailed process for configuring these services for a production environment is covered in the Deployment Tutorial.
Setting up the local development environment is a more involved process, as it requires configuring the full stack (database, authentication, CMS) on your machine. This is a fantastic way to understand the project's inner workings but is more complex than a simple pnpm dev.
The complete, step-by-step guide for the local setup is detailed throughout the tutorial series. The repository's code corresponds to the final state of the tutorials.
For experienced developers who wish to set it up directly, here is a high-level overview of the steps involved:
-
Clone & Install:
git clone https://github.com/edisonmbli/digital-garden.git cd digital-garden pnpm install -
Set Up External Services: You will need to create your own development instances for the following services:
- Clerk: For user authentication.
- Sanity: For content management.
- Neon: For the PostgreSQL database.
-
Configure Environment Variables: Copy the
.env.examplefile to.env.localand populate it with the API keys and connection strings from the services you created in the previous step.cp .env.example .env.local
-
Initialize Local Database:
- Ensure Docker Desktop is running.
- Start the local PostgreSQL container:
docker-compose up -d
- Apply the database schema using Prisma:
pnpm prisma db push
-
Run the Application:
pnpm dev
The application should now be running on http://localhost:3000.
- Manages Expectations: It immediately clarifies that the local setup is non-trivial, preventing user frustration.
- Provides a "Quick Win": The "One-Click Deploy" option is a fantastic feature of modern platforms like Vercel. By placing it first, you give users an instant sense of accomplishment and a live project they can immediately start configuring.
- Respects the User's Time: It correctly positions the full tutorial series as the primary source of documentation for a deep dive, rather than trying to poorly replicate it in the README.
- Polite and Professional: The tone is helpful and guiding. It doesn't say "it's too hard for you"; it says, "For a deeper dive, the full guide is here." This respects the intelligence of the reader.
- Still Provides a Roadmap: The high-level overview for local setup is still present, acting as a mental checklist for experienced developers who want to jump right in.
The name of this project, "Hackers & Albums," is my personal tribute to Paul Graham's classic book, "Hackers & Painters," which has profoundly shaped my values regarding technology and creation.
There's an idea in the book that I believe shines brighter than ever in today's AI explosion:
"The computer is just a medium to express your ideas, like a painter's pigments and brushes, or an architect's steel and concrete. The real work is born in your mind."
In the past, only a few "painters" (developers) who had mastered the complex techniques of the "paintbrush" (coding ability) could turn the ideas in their minds into reality. Today, AI is becoming that incredibly powerful "paintbrush" in all of our hands. It allows us to focus more on what to paint and why to paint it, rather than getting overly bogged down in how to paint. This, perhaps, is the most precious gift the age of AI has given to every one of us independent creators.
This project, including all tutorial content and source code, is licensed under the Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License (CC BY-NC-SA 4.0). Please see the LICENSE file for the full legal text.
This license also explicitly covers all creative assets displayed on the live project website (edisonmbli.com), including but not limited to all photographic works and written articles.
In plain English, this means you are free to:
- ✅ Share: Copy and redistribute the material in any medium or format.
- ✅ Adapt: Remix, transform, and build upon the material for non-commercial purposes.
Under the following terms:
- ✍️ Attribution: You must give appropriate credit, provide a link to the license, and indicate if changes were made.
- 🔄 ShareAlike: If you remix, transform, or build upon the material, you must distribute your contributions under the same license as the original.
- 🚫 NonCommercial: You may not use the material for any commercial purposes.
What does "Commercial Purposes" include?
To be crystal clear, any use of this project's code or content for direct or indirect commercial gain is strictly prohibited. This includes, but is not limited to:
- Using the code or content on a corporate or personal monetized website/blog.
- Using the material in any form of paid educational content (e.g., courses, paid tutorials, workshops).
- Repackaging or selling the project or its derivatives.
- Any other activities where the primary purpose is commercial advantage or monetary compensation.