The idea from this project came from friends that talked about how hard it's to quickly exchange cards from the world cup. Well, one simple idea for that would be using Cloud Vision that detects the text and with the text identifying the player. Which should be pretty straighforward. After identifying with the image we should be able to quickly transfer this data and figure out a good exchange between two persons.
Only the first step was implemented (being able to identify cards with images).
As a challenge, the implementation was made using a small number of dependency packages and without using some web frameworks (like Next.js, Gatsby, ...). There are only two pages in the application, one to allow users to upload their images and one to show the detected players in a image.
It turned out that not using some framework wasn't the most enjoyable experience, but at least the page quality was high without much effort.
The application is currently available through Render Deploy
The card list was extracted from CardBoardConnection.
Part of the development was made in live through YouTube:
Thanks to @MatzCouz for helping with ideas related to the aplication and during the lives.
-
Get a Google Cloud Service Account Key that has access to Cloud Vision and Cloud Storage.
-
It's also required to create a bucket in cloud storage to store uploaded images.
-
Copy the
.env.examplefile in this directory to.env(which will be ignored by Git):
cp .env.example .envThen, open .env and set the name of the bucket that you created in step 2.
Also, set the KEY_PATH variable with the path to where your service account is stored (created in step 1).
- Use the following comand to run the app.
yarn dev