Pie is an open-source image gallery built with the latest advancements in the React ecosystem, allowing users to upload and download images from any device connected to their account, delivering a fast, smooth, and visually engaging user experience.

The project was created as a hands-on exploration of modern React and Next.js capabilities, balancing performance, SEO, and a clean, modern UI.

🧠 Technologies Used

⚙️ Core

Built with React 18, Next.js 14, and TypeScript, Pie leverages:

• Client and Server Components
• Hybrid rendering (SSG + SSR)
• Improved performance and SEO
• A clean, scalable architecture

This foundation embraces the modern React paradigm while keeping the project future-proof.

🎨 Styling & UI

• Tailwind CSS for fast and consistent styling
• shadcn/ui for reusable and accessible components

This setup enabled rapid development without sacrificing a polished visual experience.

📊 Analytics

To better understand how the product is used in real scenarios, Pie integrates:

• PostHog (open-source) for user behavior analytics

These insights help guide future improvements by focusing on features with real user impact.

🔐 Authentication

Authentication is handled with Clerk, ensuring both security and fast implementation.

Currently, Pie supports login via:

• Google
• GitHub

This approach allowed the project to launch quickly while maintaining a solid authentication foundation.

☁️ Storage & Limitations

Since image storage can be costly, the project was designed with smart constraints in mind:

• uploadthing (free tier) for image uploads
• @upstash/ratelimiter to prevent abuse and limit simultaneous uploads

This balances cost, scalability, and security as the project grows.

🗄️ Database

• Drizzle ORM
• Vercel Postgres

Used to store metadata and auxiliary information, providing simplicity and seamless integration with the Next.js ecosystem.

🔀 Parallel Routes & Seamless Navigation

Pie takes advantage of Next.js Parallel Routes to deliver a modern, intuitive navigation experience:

• Clicking an image opens it in a modal
• The URL updates with the image ID
• The image page can be:
• Refreshed
• Shared
• Accessed directly

All while preserving the original navigation context, revisiting classic SPA navigation concepts through Server Components.

🚀 Project Vision

Pie was created to showcase, in practice, the power of modern web development technologies, exploring:

• Contemporary architectures
• Advanced navigation patterns
• High-performance UX

As an open-source project, Pie welcomes contributions, forks, and adaptations for different use cases.

If you’d like to learn more or discuss the project, feel free to reach out 😊