Skip to content

Showcasing uploading images with Next.js and Supabase storage + database

Notifications You must be signed in to change notification settings

Dannymx/upload-photos-demo

Repository files navigation

This a demo to showcase uploading, storing, and retriving images using different technologies. This took about 2 days to complete.

Tech stack used

The following tools were used in this application:

  • Next.js 13 with App routing and API route handler
  • Fully typed with Typescript
  • Supabase for image storage and image search
  • React-Query for data-fetching
  • Radix UI and Tailwind CSS for styling
  • ESlint, Husky, lint-staged to enforce valid syntax, formatting and types

API Endpoints

The following API endpoints are available in this application:

GET: /api/photos

This endpoint will display all the images or filter by images if a search paramaters is provided.

PUT: /api/photos

This endpoint will store one image and append a unique ID to the name to allow multiple images with the same name to be uploaded.

DELETE: /api/photos

This endpoint will delete one image if a name parameter is provided

Getting Started

To start the application you run any of the following commands:

npm run start
# or
yarn start
# or
pnpm start
# or
bun start

Wishlist/TODO

  • Add testing
  • Enhanced error handling
  • Check API responses with Zod

About

Showcasing uploading images with Next.js and Supabase storage + database

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published