From Design to Deployment: Building a Full-Stack Rock Paper Scissors Game

The Objective

o move beyond basic logic and build a production-ready web application featuring State Persistence, Asynchronous API Communication, and Automated Cloud Deployment.

1. The Architecture: Decoupling the “Brain”

A professional application separates the interface from the logic. I built this using a Flask (Python) backend to ensure the “Source of Truth” lives on the server, not the user’s browser.

By building a RESTful API, the frontend sends a POST request with the user’s choice, and the server securely calculates the result. This architecture prevents client-side tampering and ensures the application remains scalable and secure.

Python

# app.py - The Backend Logic Engine
@app.route('/play', methods=['POST'])
def play():
    data = request.get_json()
    user_choice = data.get('choice')

    # Securely generated on the server
    computer_choice = random.choice(['rock', 'paper', 'scissors'])
    # Determine Win/Loss/Draw
    if user_choice == computer_choice:
        result = 'draw'
    elif (user_choice == 'rock' and computer_choice == 'scissors') or \
         (user_choice == 'paper' and computer_choice == 'rock') or \
         (user_choice == 'scissors' and computer_choice == 'paper'):
        result = 'win'
    else:
        result = 'loss'
    return jsonify({'result': result, 'computer_choice': computer_choice})

2. Interactive UI & Micro-interactions

As a Senior Creative Designer, I focused on the “feel” of the application. High-end software isn’t just functional; it’s responsive and tactile.

• The Shake: Using CSS Keyframes, I created an 800ms “shake” animation that triggers when the user clicks. This simulates the CPU “thinking” and creates a moment of suspense.
• Sound Effects: I integrated a multi-sensory feedback loop using the browser’s Audio API. Unique auditory cues for Wins, Losses, and Draws provide immediate reinforcement to the player.
• Toast Notifications: I used Bootstrap 5 Toasts to provide non-intrusive, real-time feedback when a player breaks a personal record.

JavaScript

// The "Reveal" logic with animation
resultDisplay.classList.add('apply-shake');

setTimeout(() => {
    resultDisplay.classList.remove('apply-shake');
    // Inject the result icons and update the score...
}, 800);

3. Persistent Scoring & State Management

A core requirement for a modern web app is State Management. I utilized the LocalStorage API to ensure the application remembers the user across sessions.

• Memory: High scores and total wins are saved directly in the user’s browser.
• Persistence: The game maintains its state even if the tab is closed or the page is refreshed, ensuring the user’s progress is never lost.

JavaScript

// Saving a new Personal Best to localStorage
if (current_streak > highScore) {
    highScore = current_streak;
    localStorage.setItem('highScore', highScore);
    showToast("New High Score! 🏆", "bg-warning text-dark");
}

4. Deployment & Tech Stack

To finalize the project, I established a CI/CD pipeline by connecting my GitHub repository to Render. I swapped the Flask development server for Gunicorn, a production-grade engine, to ensure the app is fast and reliable.

The Stack:

• Backend: Python / Flask
• Frontend: JavaScript (ES6+), Bootstrap 5, Font Awesome
• Animations: CSS Keyframes
• Deployment: Gunicorn / Render (PaaS)

Appendix: The Developer’s Glossary

To understand the infrastructure of this build, here are the core technical concepts utilized:

• Full-Stack: An app featuring both a Frontend (User Interface) and a Backend (Server Logic).
• RESTful API: A standardized protocol for the frontend to “request” data from the server.
• Asynchronous (Async): A pattern allowing the browser to communicate with the server without refreshing the page.
• LocalStorage: A web API used to store persistent data on the user’s device.
• Gunicorn: A production-grade WSGI server that acts as a bridge between the web and Python code.
• CI/CD: An automated workflow where code updates are instantly deployed to the live site.

Final Results

The final product is a Mobile Responsive application — fully functional on mobile, tablet, and desktop. It demonstrates a complete development lifecycle, from initial logic to a live, cloud-hosted product.

Technical Links:

• Live App: https://rock-paper-scissors-pro.onrender.com/
• Source Code: GitHub Repository

Michael Nyabaige | Senior Creative Designer & Full-Stack Developer Based in Nairobi, Kenya