This is a solution to a challenge on devChallenges. I built this using:
- React, styled-components and Framer Motion for a tiny bit of animation
- Supabase for database
- Jest for some testing
It’s the first time I’ve made a 
fullstack 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
clientdir which I use Vite to initialize, and aserverthat contains API logics, so all frontend libraries are included in/client/package.jsonwhile all backend libs are in/package.json. - In developing,
clientwill fetch fromserver(2 different servers, use proxy to not get CORS error) - When deploying, the
distfolder built fromclientwill 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!