Emoji Decode using Amazon Q

Setting up Context

I recently participated in the AWS Game Builder Challenge & created a submission for the same also which is an Emoji Decode (Guess phrase from Emojis) game.
This article summarizes my journey throughout the building process.

Some interesting points:

I build this game in under 10 hours only.
I started using AWS for also the first time in this hackathon & the experience was quite unexpected as I always thought working with AWS was a very complex task & required extensive knowledge of AWS but It was very beginner-friendly with extensive explanation in the documentation.
Technologies I used
- Frontend: ReactJS + TailwindCSS
- Backend: FastAPI
- Database: DynamoDB
- Deployment: AWS EC2
- Common for all: Amazon Q

The Journey of Development

Initial Thoughts:

I started thinking "What should I build?" & the answer I got was "A simple game, not a complex one" I was new to AWS so I didn't want to take up something complex that I might mess up developing & may ruin my first experience working with AWS. So I decided to go with a very simple Emoji Decode Game.

Technical Considerations:

Now, the second question is => What will be the tech stack for the application?
I explored AWS services & listed out a few that I could use & those were:

Amazon Q: Our handy assistant
Dynamo DB: Managed NoSQL DB
EC2: Compute Engine(Server on Cloud)
S3: Storage Bucket

Note: Later on, I decided to not go with S3 this time as it may overwhelm me with learning too many things at the same time.

Show Time:

Since I had a mental map ready of what I had to build & using which AWS services, I was now good to go to set up my vscode with Amazon Q extension to start developing the project.

Development Steps:

Initialized a Vite + ReactJS + TailwindCSS project for frontend & setup FastAPI server for backend so that I can use boto3 for interacting with DynamoDB.
Prompted Amazon Q with my requirements & it gave me almost 80% of the backend code including connection to DynamoDB, & most of the APIs. I had some doubts regarding the credentials which again I asked in the next prompt & it told to where to create them & how to use them.
Similarly, Developed the front end too.

Final Phase (Deployment)

For Deployment, I considered using EC2 for the backend & Vercel for the front end because I wanted to try different origins for both applications so that in the future if I have to do something like this then I would have some idea of what problems I may face & how to resolve them.

Problem I faced(with resolution):

On EC2, My app was running locally & to make API calls to that I had to hit http endpoint instead of https which the browser blocked me from doing.
Resolution: Purchased a free domain from DotTech (included in the GitHub Student Developer Pack) & free SSL certificate using Let's Encrypt, then used Nginx for reverse proxy & redirected all the requests to secure https endpoint which I mapped in my nginx configuration pointed to my local server which I ran in the background by starting a daemon using Gunicorn.

Now, I just had to update my backend server URL in the environment variables of my frontend application deployment to the https one.

Bingo!

My application was successfully up & running @ [Emoji Decoder Game](https://emoji-decode-using-amazon-q.vercel.app/)

How It Works

Login: Enter your unique Player ID to start the game, if the Player ID is already not there in DynamoDB then a new entry.
Decode Emojis: Guess the correct phrase represented by emojis.
Score Tracking: If the guess is correct, the score will be updated by +10 in DynamoDB, or else will remain the same.
Leaderboard: Hits the /leaderboard API on the backend & shows the list of all users sorted by rank & score.

Acknowledgments

Amazon-Q: For providing an incredible tool that simplified development and deployment.
SSL certificate provided for free by Let's Encrypt. [removed]
Domain provided by DotTech via GitHub Student Developer Pack. [removed]
Special thanks to the Amazon Community for hosting this hackathon and fostering innovation.

EDIT:

After the initial deployment, the app was working fine on my local machine but when I tried it on my phone it was not working, I tried again on my laptop then it worked So I thought it was some cache-related issue therefore I tried opening the app in incognito browser & guess what? It broke :(
I was thinking maybe I messed up something while configuring SSL and Nginx to serve the API calls correctly. I tried to fix the configuration and do some hacks, but nothing worked. Finally, after messing around for some time, I decided to terminate the EC2 instance, spin up a new one, and deploy the app again.
Now, I terminated the previous EC2 instance and spun up a new one. In the new one, I thought, why mess around with domain, SSL, and other things? There must be some way to directly make API calls to the local server running in EC2. Then, after some research, I found out that I could use the Ngrok tool and create a tunnel that will forward all the API calls from a specific Ngrok https URL to the destination one (which we can configure). I realised that Ngrok is what I was looking for.
So, Now again in my EC2 instance, I cloned by repository & configured everything related to the project then also configured Nginx & started the Python server using `Uvicorn` . Lastly, I installed Ngrok & created a tunnel to the target http://127.0.0.1:8000 , & After this Ngrok provided me with a https URL which I can use BASE_URL for my API calls. Then I update the environment variables of my frontend app.
Bingo! The application is up & running now :)

Site Terms, Privacy, and more.

Emoji Decode using Amazon Q

Built in just 10 hours, my Emoji Decoder Game showcases how beginner-friendly AWS services like Amazon Q, DynamoDB, and EC2 can be. Dive into my journey of learning, building, and deploying a fun game with ease!