Image Uploader - React, Supabase

Live Demo on Render

Code on Github

This is a solution to a challenge on devChallenges. I built this using:

It’s the first time I’ve made a :v: fullstack :v: app, so I’d love to know what I can improve on and what is the standard way to structure a project. My approach is basically this:

  • I have a client dir which I use Vite to initialize, and a server that contains API logics, so all frontend libraries are included in /client/package.json while all backend libs are in /package.json.
  • In developing, client will fetch from server (2 different servers, use proxy to not get CORS error)
  • When deploying, the dist folder built from client will be served by server as static files. (1 server). Then just start server and I got a live working site.

At first I was using Postgres and I was going to host this on Firebase. But it seems like there isn’t really a way to put a Postgres database on Firebase?? So I opted for Supabase and basically had to change all my Postgres queries to Supabase syntax. I’m still not really sure how one would deploy a frontend and backend together in real life?? This solution is just me powering through a tunnel with one eye closed.

Any feedback on the React and styling part would also be welcomed!