Next Gallery

Next Gallery – a create-T3-app – is an image gallery built with Next.js, TypeScript and Vercel Postgres. Users can upload images, and then view them in a gallery.

The original, basic design – upload and display – followed a YouTube tutorial and I added additional features beyond the original design covered by the tutorial.

These features unclude the ability for users to turn on and off the visibility of their images per individual image, also making private again images that were previously public. Images set to public can be shared with others by a link. Users can also rename their images and delete them.

The technologies and technical tools used included:

Next.js
TypeScript
Tailwind CSS
Drizzle ORM
Vercel Postgres (database)
Git/GitHub
VSCode
UploadThing (file hosting)
Shadcn/ui (components)
Clerk (user authentication)

Gallery (main) view

Images are displayed in a gallery upon login.

Modal

Individual images can be viewed in a modal. Shows a shared image as viewed by the owner.

Private image

View of image where visibility is set to private.

Public (shareable) image

View of image where visibility is set to public (shareable) as seen by logged-out user.

Update image name

Users can update the name of their images.