TASKS.md

DecodeMe! Project Tasks

App Overview

DecodeMe! is a web-based game that helps players understand code snippets in a fun and interactive way. Users can choose from multiple game modes including multiple-choice, open-ended questions, and a daily challenge.

Instructions for AI Agent

• The user is on MacOS using Visual Studio Code
• The user prefers MacOS terminal
• Never generate typescript even if the user provides an example in typescript
• An implementation plan is a step by step, start-to-finish outline of everything required to complete to given task.
• Always check your work by reviewing the conversation up to that point and correcting any previous errors or inconsistencies.

Tech Stack

• Next.js using pages router
• Firebase (Firestore, Authentication, Functions)
• OpenAI GPT-4 API
• Framer Motion
• React Code Blocks
• NextUI

Core Features

1. User Authentication
2. Game Mode Selection
3. Code Snippet Display
4. User Input for Answers
5. Scoring and Leaderboards

Tasks

Initialization

• Create GitHub repo named "DecodeMe"
• Initialize project directory structure

Backend Development

• Set up serverless functions with Firebase Functions
  • Install Firebase CLI
  • Initialize Firebase Functions in project
• Integrate OpenAI GPT-4 API for game logic
  • Get API key from OpenAI
  • Write function to communicate with GPT-4
• Implement User Authentication
  • Set up Firebase Authentication
  • Implement ID token validation in functions
• Create API routes for game modes
  • Define API structure for different game modes
  • Implement game logic in Firebase Functions

Frontend Development

• Implement Firebase Authentication in frontend
• Build a working signup page
• Create game mode selection UI
• Design UI for displaying code snippets
• Implement input forms for user answers

Game Logic

• Develop function for fetching code snippets
• Implement multiple-choice questions logic

Scoring and Feedback

• Develop scoring algorithm
• Implement leaderboard functionality
• New Scoring System with 3 strikes and unlimited questions
• Implement Post-Game Review to provide feedback on wrong answers
• Add streaks to UI
• Add strikes to UI
• Implement daily streaks
• Implement high scores

Core Tasks

• Add "Log out" button in options menu
• Implement history of past questions in options menu
• Style the game history
• Add "Skip this/Refresh" button in options menu
• Add daily, weekly, lifetime scores in leaderboards
• Implement daily streaks
• Finalize the system message
• Finalize the initial user message
• Implement 'Chat with Code' feature
• Implement learning levels in chat
• Implement learning levels in scripts
• Create share game component with copy to clipboard link
• Implement Dynamic SEO
• Implement User Stats page
• Implement GPT usage cap or rate limits
• Implement custom instructions
• Sound effects
• Custom instruction guardrails
• Leadeboard name generator
• Integrate Google Analytics
• "Play more like this" functionality

Future Release Features

• Sidebar Mode for Chat
• Open-ended mode
• Daily challenge mode
• sign-in with google/github
• Support for other lanaguages aside from python
• Profile badges
• Bug reporting
• Shareable score previews
• Notification for events like new high score
• Dark Mode
• Whisper api
• Implement AI commands
  • /Instruct
  • /Help
  • /Remember
• Implement modular context blocks
  • clear selected snippet
  • @convo-[conversationTitle]-[conversationDate]
  • @question-[questionId]
  • @memory-[memoryName]

Bugs and Issues

• Layout shift when loading auth component as logged out user
• Options menu on leaderboard page has no other options other than leaderboard
• Game History needs loading animaton to prevent massive layout shift
• Assistant settings save needs to give user confirmation. Add toast.
• Chatbot and Endgame Custom Instructions should be disabled until functional
• Switch out the heart icon for a react-icon
• Scorecard stats should have tool tip with description
• Add 404 Page
• add wrong password toast
• prevent create account until email + password are entered
• error handling on auth component
• ask for leaderboard name after account create
• Improve New user flow
• add forgot password link
• Game History should have sort by score feature
• Enter should send chat message
• Needs mobile styles
• Update background
• Fix results page
• Default sound should be quieter
• Add mute option
• Button colors should be consistent throughout app
• Prevent layout shift in leaderboard when using filters
• accessibility audit
• Game History should have chat with tutor button and enable chat window
• Add slight delay to typing animation in chatwithscript
• Leaderboard should have tooltip or something for truncated long names
• Add Play Again button to gameover
• Finalize post game review system and user messages
• Add a routing loading icon in the bottom right for routes to SSR pages
• game over modal seems to always go home?
• Add a multistep loading description to the code fetch (generating... validating... etc...)
• wrap long lines in codesnippetdisplay
• play similar instructions are not being set correctly from the gameover component
• fix chat codeblock styles
• results share page needs primary button color
• share link needs max width

Testing

• Test anonymous user flow
• UI tests for frontend
• Test sign up flow

Deployment

• Deploy backend to cloud provider
• Deploy frontend to web hosting service

Documentation

• Create user manual
• Write API documentation

Final Steps

• Conduct user testing
• Full launch