Product Requirement Document (PRD)
This document describes a “Wordle” game development in order to participate in a full cycle of web development.
The project was structured to support and guide our web development study path.
Wordle is a Bull & Cows style word game. The user is required to guess a randomly selected word in N turns. The application gets each guess as input and provides clues for the next guess.
An example to a “Wordle” game:
Till another decision - Typescript and javascript are allowed.
We use user stories to describe our application requirements. Each user story contains a list of tasks required to complete it.
There are several ways to write user stories. I chose a template that describes the product from the point of view of a user who tries to use the application.
| Requirement | Category | Target |
|---|---|---|
| Milestone A | ||
| Navigating to the page will display a static wordle game | npm, HTML, CSS | 💻 |
| The user should be able to enter a word | HTML, CSS, JS | 💻 |
| The user should not notify we changed the implementation | Static React | 💻 🌿 |
| Milestone B | ||
| User should start with welcome and have some help | Routing, Modal | 💻 🌿 |
| User can play | State | 💻 🌿 |
| Let me connect | Forms and storage | 💻 🌿 |
| Milestone C | ||
| Let the server choose the word | Express | 🏭 🌿 |
| The word should not be available to the client | Express | 🏭 🌿 |
- 💻 Client Side
- 🌿 React
- 🏭 Server Side
Navigating to the page will display a static “Wordle” game.
- Prepare your development environment
- Implement game HTML page (see example below)
- Add style to the page (choose your own)
- After page loaded, the focus should be at the first input
- Allow user to enter single letter:
- Only letters
- Move focus to the next input in the same row
- After the last letter of each line print "done" to the console
- Split the page into components
- Refactor the page into static React components
- Consider use the React tools
- Provide "start" script to run the project (
npm startto run your project)
- Welcome screen
- First navigating to the game will the display the welcome
- The screen should contain the text "Welcome user!"
- You should choose how to style this page (animation, video, just text)
- Topb
- Should contain header/name and a link/button to display the help screen
- Help screen
- Should be modal popup
- Should close only by clicking X at the top corner or clicking "ESC" in the keyboard
- You should choose how to explain the game
Welcome Screen
Top Bar
- Choose word (static)
- Starting at the first line
- After the last letter check the input against the select word and mark the inputs
- Bull => green background
- Cow => yellow background
- Mark all guessed letters in the virtual keyboard
- If all letters are Bull display dialog "success"
- For all lines
- After finish line logic, put the focus on the first character of the next line
- Do single line logic
- If no success, display dialog "fail"
- login link/button at the topbar
- Show modal with login form (name) and login button that close the modal
- Keep the username locally (browser)
- Change the welcome screen to greet the user by his name if any, else use "guest"
- After login, the topbar should contain the username and a logout link/button
- The logout link/button should delete username locally
- when game starts, fetch the word for the game from the server
- move the check word mechanism to the server
- don't send the real word in the network
- any testable code should have tests (client & server)
- the code should be in TypeScript
- the code should be clean (should pass linter and formatter)
TBD
🌐