Pie is an open-source image gallery designed with the latest advancements in the React ecosystem, allowing users to upload and download images in any device logged into their account, providing a fast and visually stunning user experience.

Technologies

• Core: Built with React 18, Next.js 14, and TypeScript, Pie uses the best of these technologies and the new horizon expanding for React with Client and Server Components, optimizing performance and SEO while building a modern website.
• Styling: Tailwind CSS was the right choice, enabling rapid project creation and styling, along with the shadcn/ui library.
• Analytics: For site usage analysis, Posthog was used. It is an open-source tool that provides valuable insights into user behavior, enabling understanding of improvements that should be prioritized in the project's future.
• Authentication: For this, I chose Clerk, that simplifies user authentication while ensuring security, facilitating the project's first version with greater speed. Currently, Pie allows login with a Google or GitHub account.
• Limitation and Storage: Images are heavy to store, and currently, the project is using free solutions. To save images, uploadthing with its free plan is being used, and to ensure there is no storage abuse, upstash/ratelimiter is employed to prevent users from uploading too many images at once.
• Database: Management of information other than images is being handled with Drizzle, stored in the Vercel Postgres hosting.

Parallel Routing for Smooth Navigation

Pie takes advantage from Next.js's parallel routes feature to offer a smooth user experience when viewing images. Clicking on an image opens a modal window, but the URL is also updated with the image ID. This means that when refreshing the page or sharing it with someone, the full-size image page will be loaded within the existing navigation context. Despite its simplicity, with the evolution of React and SPAs, many navigation history concepts have been forgotten and are being revisited with Server Components.

Pie was created to showcase the power of the emerging new technologies for web development. Being open-source, contributions can be made to the main project, and forks can emerge with efficient alternatives for different contexts. If you want more information, feel free to contact me.