cs390wap final project
The backend and frontend integration is not complete (honestly neither is complete), but this is what my backend is so far:
- PocketBase - Instead of building out a backend infrastructure myself, I figured I would use PocketBase as the foundation of my backend. I also tried SupaBase, but I didn't want to have a Docker container running on my computer since that has more overhead.
- pb_schema.json - Configuration for the PocketBase backend, which you can just import into a fresh PocketBase instance.
How to get it working:
- Download PocketBase from website (It's a standalone executable so you don't have to install it. It might require Go to work since it is written in Go, but I personally doubt that it will.).
- Run
./pocketbase serve
and openhttp://localhost:8090/_/
in web browser - Log in on admin screen.
- Navigate to
Settings > Import Collections
. - Either load
pb_schema.json
or copy its contents into the text box to import it. - PocketBase should now be prepared for the database.
- In
./server/pb_backup/
, runnpm i
andnode index.mjs
to populate the backend with some data. - Your database (with some test data) should be fully ready!
This project was bootstrapped with Create React App.
Runs the app in the development mode.
Open http://localhost:3000 to view it in your browser.
The page will reload when you make changes.
You may also see any lint errors in the console.
My notes:
- It's functional but there is some stuff that doesn't work at the moment.
- The documentation for this React page is straight up wrong and it cost me at least 40 minutes trying to figure out why. Essentially, the
action
attribute of the<form>
component expects strings only, but theonSubmit
attribute of the component expects functions only. It tells us to useaction
while passing in a function, and cue me being extremely confused for over half an hour. I want to die. - The path forward would be to fix the things that don't work (namely setting up an additional backend service to conduct
fetch
requests on PokePaste so that I don't have to deal with CORS, and fixing my issues with myApp
component randomly sending the PokePaste data to the backend multiple times).