Emoji Decoder | Devpost

Inspiration

The inspiration for the Emoji Decoder Game came from my wild thought of creating something simple, fun, and interactive for my first experience with AWS. As someone new to the platform, I wanted to build a project that showcased how even beginners can leverage AWS services effectively.

Amazon Q Developer

Amazon Q was my assistant throughout the development journey. It simplified backend logic creation, automated repetitive coding tasks, and provided suggestions on connecting to DynamoDB. Amazon Q extension enabled me to resolve my doubts in the Code Editor itself without going to the browser.

AWS Services

AWS EC2: Hosted the FastAPI backend & created a tunnel using Ngrok for routing API calls.
AWS DynamoDB: Used as the primary database for storing emoji puzzles and player scores.
Amazon Q: My private assistant who helped me through the process.

Features and Functionality

The game allows players to decode emoji sequences into meaningful phrases. Key features include:

Player Registration: Each player is identified by a unique ID stored in DynamoDB.
Real-Time Scoring: Scores are dynamically updated and stored securely in DynamoDB.
Leaderboard: A global leaderboard API fetches and displays top players sorted by rank and score.

Intended Purpose

The Emoji Decoder Game serves as an entertaining way to showcase the ease and power of building with AWS services, especially Amazon Q. It demonstrates how complex infrastructures can be simplified into fun, engaging applications, inspiring developers to explore AWS for innovative projects.

How I Built It

1. Planning the Tech Stack

Frontend: Built with ReactJS and styled with TailwindCSS for a sleek user interface.
Backend: Powered by FastAPI to handle API requests and game logic.
Database: Used AWS DynamoDB to store emoji puzzles and track player scores.
Deployment:
- Backend hosted on AWS EC2.
- Frontend deployed on Vercel.
- Amazon Q assisted throughout the development process, from writing backend logic to integrating AWS services.

2. Development Workflow

Started with Amazon Q in VSCode, which provided pre-generated backend logic and database queries, saving me hours of manual work.
Designed the front end using Vite & ReactJS for fast development and live updates.
Integrated the backend with DynamoDB using Boto3, guided by Amazon Q prompts.

3. Deployment Challenges

Faced issues with browser blocking HTTP API calls to the backend hosted on EC2.
Resolved it by using a free .tech domain from the GitHub Student Developer Pack and securing it with Let's Encrypt SSL via Nginx reverse proxy.

Challenges I Faced

AWS Ecosystem: As a beginner, understanding and setting up AWS services seemed daunting initially. However, detailed documentation and Amazon Q's suggestions made it manageable.
Domain and SSL Setup: Configuring the domain and SSL was challenging, but I learned to set up Nginx for HTTPS requests.
Frontend-Backend Integration: Debugging cross-origin issues was tricky, but the process taught me valuable lessons about deployment and security.
Ngrok Tunnelling: Finding a way to route HTTPS API calls to HTTP was also an interesting challenge for me.

Learnings

AWS services are more beginner-friendly than I imagined, especially with tools like Amazon Q guiding the process.
EC2 is nothing but just another machine running somewhere & deploying our app over EC2 is not complex at all.

Going Forward

I plan to:

Explore more AWS services like S3 and Lambda for future projects.
Improve the game by adding a multiplayer mode and advanced leaderboard features.
Use Amazon Q in future hackathons to accelerate development and learn new techniques.

Conclusion

The Emoji Decoder Game was not just a project but a journey of learning and growth. From understanding AWS to leveraging Amazon Q, it taught me that powerful tools combined with curiosity can lead to amazing outcomes.

Check out the live game here: Emoji Decoder Game