OpenDevEd · lhaj-matich · Aug 8, 2024 · Aug 8, 2024 · Aug 11, 2024 · Aug 8, 2024
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1 @@
+/node_modules
diff --git a/README.md b/README.md
@@ -1,57 +1,19 @@
-# OpenDevEd-Wordle
-## Requirements:
-Your task is to create a web-based Wordle game using React that adheres to the following specifications:
+# Wordle Project
 
-### User Interface (UI):
 
-Design a clean and intuitive UI for the game that includes:
+## How to Run
 
-- Input field for guessing words.
-- Submit button to submit the guess.
-- Display area for previous guesses.
-= Indication of correct letters in correct positions (right letter, right position).
-- Indication of correct letters in the wrong position.
-- Display remaining attempts.
-- End game state UI (upon winning or losing).
+This project uses the Node Package Manager (**npm**). Make sure you have that installed, clone the repo, run the command `npm install` to install the required dependencies, start the project by running: `npm run dev`. A local URL will appear on your terminal; use it to access the app and have fun.
 
-### State Management:
+## Approach
 
-Implement a robust state management system to handle:
+I've decided to use the Chakra UI library as it will make my job easier by not having to implement things like modals and styled input fields from scratch. I've used React Context to manage the game state. The game consists of four main components:
 
-- Target word selection (randomly generate a word at the start of the game).
-- Storing user guesses and their results.
-- Tracking remaining attempts.
+- WordInput: responsible for adding guesses and checking them
+- Keyboard: responsible for assisting the user in the next guesses
+- History: meant to display the previous guesses of the player
+- GameResult: displays whether the player has won the game or not
 
-### User Interaction:
+## Responsiveness
 
-- Capture user input for word guesses.
-- Validate input (alphabetic characters, word length, etc.).
-- Handle the submission of guesses and update the game state accordingly.
-
-
-### Game Logic:
-
-- Compare the user's guessed word against the target word.
-- Provide feedback to the user about the correctness of the guessed word.
-- End the game when the correct word is guessed or when the attempts reach zero.
-
-## Code Quality:
-
-- Write clean, readable, and maintainable code.
-- Implement best practices for React development.
-- Ensure error handling for edge cases (invalid input, unexpected behavior).
-
-## Submission Guidelines:
-
-- Fork this [repository](https://github.com/OpenDevEd/OpenDevEd-wordle/)) and create a new branch named `wordle-[YOUR NAME]`.
-- Provide clear instructions on how to run the application locally.
-- Include a README file explaining your approach, decisions made, and any additional features implemented.
-- Open a PR.
-
-## Evaluation Criteria:
-
-- UI/UX design and functionality.
-- Code quality, structure, and maintainability.
-- State management and logic implementation.
-- Handling of edge cases and error scenarios.
-- Bonus points for additional features or optimizations.
+This game is optimized for a reponsive experience only in destop and tablets
diff --git a/index.html b/index.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/logo.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Wordle game: just another way to have fun</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>