I'm developing a little game using Go in the backend and React with TypeScript for the frontend. In my day job I mostly work with PHP using the Laravel framework, so Go is a new programming language for me and I find the best way to learn is by doing. So follow me on my journey on building this project. I'm already half way done, but I'll share any future PRs with you.

The game is called Suspect Recall. You can view what I have so far here: https://www.suspectrecall.com First you see a suspect for a few seconds and then you have to remember which attributes that suspect had. I'll be improving the design a bit later, although that's not the focus of this project.

Next on the todos is fetching a random suspect. I opened a PR for that part of the code: https://github.com/artisanphil/suspect_recall/pull/4 Code reviews are welcome! I also plan to save the answers so that I can get an idea of how many people try out the website and how many mistakes they make.

An overview of the code structure

Originally I used to have two folders, backend and frontend, but I found it actually works best to have the backend code in the root and the frontend folder inside the backend folder.
We don't need to deploy the frontend code, just the code that gets created from the build. Find out in the Readme file how to run the code for local development.

If you just downloaded the project, you will need to run npm install in the frontend folder to pull the dependencies into the folder 'node_modules'.
Create a .env file in the frontend folder and add REACT_APP_MODE=development. This is so that when running frontend code with live reload, it will call the api endpoints which run on another port. Then run npm run start.

We can now go to localhost:3000 and view the frontend. As you will see, the api endpoints won't work, so let's go to the root folder and run go run .. Note that we needed to allow cross-domain requests when running locally, as it's running on another port (port 8080, frontend is on 3000).

c := cors.New(cors.Options{
        AllowedOrigins:   []string{"http://localhost:3000"},
        AllowedHeaders:   []string{"Origin", "Content-Type", "Accept"},
        AllowCredentials: true,
    })

When running on production, it will all run on the same port as we just run the backend code after having built the frontend code with npm run build which creates the static files. BTW, I deployed the code to Google App Engine.

Please review this PR where I add a new api for dynamically fetching a suspect (which is currently hard-coded) and calling that endpoint in the frontend: https://github.com/artisanphil/suspect_recall/pull/4

Thanks in advance for any comments on how the code can be improved and I'll do my best to answer any questions that you might have.

In order to view future progress, please watch this repository: https://github.com/artisanphil/suspect_recall