This is a submission for the The Pinata Challenge

What I Built

Imagine attending an exciting event — like a developer conference—where you meet new people, take tons of photos and vidoes with them, and make lasting memories. But once the event wraps up, you realize you have no easy way to get all those great pictures.

Or consider a wedding ceremony: You know your guests captured beautiful moments throughout the day, but gathering all those photos means individually reaching out to each person. It is definitely not the way to go.

Picshaw offers a simple solution. As an event organizer, you can create a dedicated event folder on the platform, generate a shareable link, and invite your guests to upload the pictures they’ve taken. This way, everyone gets to relive the event from the unique perspectives of all attendees. No more missing moments, just memories shared effortlessly.

Picshaw Features

• Creating Public and Private events. Public events are showcased on the “Discover Events” page, allowing anyone to browse and explore them. Private events, on the other hand, remain accessible only via a shareable link provided by the event organizer.

• Upload Files Effortlessly Guests can easily upload their event photos to the designated event folder, making sure all memorable moments are gathered in one place.

• Browse Uploaded Photos with Two Viewing Modes.
  Users can explore photos either in list mode, which snaps images into a feed similar to Instagram, or in grid mode, offering a gallery-style layout.
  
  

• Easily Share Event Links
  Organizers can generate and share a unique link to invite guests to upload their pictures, streamlining the process of gathering photos.
  

• Discover Public Events
  Explore and browse all public events from the “Discover Events” page, opening up new ways to experience moments shared by others.

• Seamless Authentication Users can sign in quickly and securely using Google sign-in or magic links, making the experience smooth and hassle-free.

• Support for dark mode and light mode

Demo

Try out Picshaw live: https://picshaw.vercel.app

My Code

The full code is available on GitHub. Feel free to star the repo and follow me! 😊

npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev

Using Pinata

Integrating with Pinata was one of the smoothest parts of the project. Here’s a breakdown of how I implemented it:

1. Initialize the Pinata SDK

I set up a dedicated file, @/lib/pinata.ts, to manage the Pinata configuration:

import { PinataSDK } from "pinata"

export const pinata = new PinataSDK({
    pinataJwt: `${process.env.PINATA_JWT}`,
    pinataGateway: `${process.env.NEXT_PUBLIC_GATEWAY_URL}`
})

2. In my API Route:

• Ensured my user was logged in: I ensured the user was logged in before uploading.

const session = await auth()

if (!session || !session.user) {
   return respondError(new Error("User not authenticated"), "Failed to authenticate user", 401)
    }

• Validate the Request: I checked if the event exists and ensured the file upload is within limits.

const form = await request.formData()
const files = Array.from(form.values())
const eventSlug = params["event-slug"]

try {
    const event = await prisma.event.findUnique({ where: { slug: eventSlug } })

    if (!event) {
        return respondError(new Error("Event not found"), undefined, 404)
    }

    if (files.length > 50) {
        return respondError(new Error("Limit of 50 files per request"), "Too many files", 400)
    } else if (files.length === 0) {
        return respondError(new Error("At least one file is required"), "No files", 400)
    }

• Upload files to Pinata The next step is uploading the files.

const res = await Promise.all(files.filter(f => typeof f !== 'string').map(f => pinata.upload.file(f)))
        const successfulUploads = res.filter(r => r.status === "fulfilled")

        const uploadsWithPublicURL = await Promise.all(successfulUploads.map(async r => {
            const publicURL = await pinata.gateways.createSignedURL({ cid: r.value.cid, expires: 60 * 60 * 24 * 365 })
            return { ...r.value, publicURL }
        }))

Note: A better implementation would include checks for failed uploads. This way, users are notified about failed files and can retry uploading them.

• Save Upload Data to the Database Finally, I saved the upload information into the database using Prisma.

const dbUpload = await prisma.upload.create({
            data: {
                text: `${session.user.name} uploaded ${files.length} images for ${event?.name}`,
                ownerId: session.user?.id ?? "",
                eventId: event?.id ?? "",
                files: {
                    createMany: {
                        data: uploadsWithPublicURL.map(file => {
                            return {
                                ownerId: session.user?.id ?? "",
                                eventId: event?.id ?? "",
                                cid: file.id,
                                publicURL: file.publicURL,
                            }
                        })
                    }
                }
            }
        })

        return respondSuccess(dbUpload, "Uploaded successfully", 201)

This flow ensures the event photos are uploaded securely and efficiently to Pinata, with successful uploads tracked and stored in the database for easy access later.

Rendering the uploaded images in the browser

1. Updating next.config.js

I first had to update the images field in the next.config.js file to allow NextJS optimize images from remote URLs.

/** @type {import('next').NextConfig} */
const nextConfig = {
  images: {
    remotePatterns: [
      {
        hostname: "sapphire-obliged-canidae-626.mypinata.cloud",
        protocol: "https",
      },
    ],
  },
};

export default nextConfig;

2. Fetching Event Data

In my client, I use a custom hook useFetch to fetch the details about the selected event

 const params = useParams();
  const eventSlug = params["event-slug"];
  const [viewMode, setViewMode] = React.useState<"grid" | "list">("grid");
  const router = useRouter();

  const {
    loading,
    data,
    trigger: getEventDetails,
  } = useFetch<void, GetUploadsResponse>(`/api/e/${eventSlug}`, undefined, {
    fetchOnRender: true,
  });

3. Rendering the Images:

I render the retrieved images inside a responsive grrrrrrrrrrid

  <div className="grid grid-cols-3 md:grid-cols-4 gap-1 my-6">
        {photos.map((file) => (
          <Image
            key={file.id}
            src={file.publicURL}
            width={400}
            height={400}
            alt=""
            className="aspect-square object-cover"
          />
      ))}
 </div>

Ideas for improvement

To further improve the app, it would be necessary to add some content moderation features. This would ensure that users don't post NSFW content on public groups. I started integrating with Google Cloud Vision but I didn't have enough time to complete it before the deadline.

Conclusion

Integrating Pinata’s Files API into Picshaw has greatly enhanced how images are uploaded and managed. Pinata provided seamless performance, and its intuitive API made implementation straightforward, allowing me to focus on building the core features of the app while trusting Pinata to handle file storage and delivery efficiently.

Overall, Pinata has been an essential tool in building a reliable and smooth image management system for Picshaw.

Also, I really enjoyed building Picshaw.

Follow me on X @jeremiahlena13