Wordle Mohamed Oulmouden

README.md

@@ -1,57 +1,75 @@
-# OpenDevEd-Wordle
-## Requirements:
-Your task is to create a web-based Wordle game using React that adheres to the following specifications:
+# Wordle Game
+This is a web-based Wordle game built using React. The game includes two modes: a daily challenge mode and an unlimited practice mode. The application is designed to be responsive, with support for both dark and light themes, and features animations and a guide page to help users understand the game rules.
+### Features
 
-### User Interface (UI):
+- Two Game Modes:
+  - Daily Challenge Mode: Users can play one word per day. The state of the game is saved in local storage to ensure progress is maintained across sessions.
+  - Practice Mode: Users can play unlimited games to practice and improve their skills.
+- Responsive Design: The game is fully responsive and works well on all devices, including desktops, tablets, and smartphones.
+- State Management: The app uses the Context API to manage the game state across components efficiently.
+- Local Storage: In daily challenge mode, the game state is stored in local storage, allowing users to resume their progress each day.
+- Animations: The game includes cool animations that enhance the user experience.
+- Dark and Light Mode: Users can switch between dark and light modes, providing a comfortable experience in different lighting conditions.
+- Guide Page: A dedicated page that explains the rules of the game, helping new users get started quickly.
 
-Design a clean and intuitive UI for the game that includes:
+### <div style="color:#f22c3d; font-size: 1.4rem; ">Deployment Link</div>
 
-- 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).
+The application is deployed on Vercel and can be accessed using the following link:
 
-### State Management:
+[Wordle Game](https://wordle-game-hazel.vercel.app/)
 
-Implement a robust state management system to handle:
 
-- Target word selection (randomly generate a word at the start of the game).
-- Storing user guesses and their results.
-- Tracking remaining attempts.
+### Running the Application
 
-### User Interaction:
+#### To run the application using docker compose:
 
-- Capture user input for word guesses.
-- Validate input (alphabetic characters, word length, etc.).
-- Handle the submission of guesses and update the game state accordingly.
+   ```bash
+   docker-compose up --build
+   ```
 
+   then open [http://localhost:3000](http://localhost:3000) to view the application in your browser.
 
-### 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.
+#### Or you can run the application in the following way:
 
-## Code Quality:
+1. Clone the repository and navigate to the project folder.
 
-- Write clean, readable, and maintainable code.
-- Implement best practices for React development.
-- Ensure error handling for edge cases (invalid input, unexpected behavior).
+    ```bash
+    git clone git@github.com:oulmdev/OpenDevEd-Wordle.git
+    ```
+    ```bash
+    cd OpenDevEd-Wordle
+    ```
+    ```bash
+    git checkout wordle-mohamed-oulmouden
+    ```
+    ```bash
+    cd wordle-mohamed-oulmouden
+    ```
+2. Install the dependencies.
+
+   ```bash
+   npm install
+   ```
+3. Run the application.
 
-## Submission Guidelines:
+   ```bash
+   npm start
+   ```
+4. Open [http://localhost:3000](http://localhost:3000) to view the application in your browser.
 
-- 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.
+### Additional Features
+- Responsive UI: The design is optimized for both desktop and mobile devices.
+- Theme Support: Switch between dark and light modes easily.
+- User-Friendly Guide: Learn how to play with the included guide page.
+- Drag-and-Drop: Easily move letters around the board to form words.
+
+
+### Mobile View
+
+https://github.com/user-attachments/assets/a1618ec2-cdac-4f10-9932-67c08a272593
+
+### Desktop View
+https://github.com/user-attachments/assets/1fbce234-66e7-43c0-ade9-18ee2a82df7f

docker-compose.yml

@@ -0,0 +1,5 @@
+services:
+  app:
+    build: ./wordle-mohamed-oulmouden
+    ports:
+      - "3000:3000"

wordle-mohamed-oulmouden/.gitignore

@@ -0,0 +1,23 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

wordle-mohamed-oulmouden/Dockerfile

@@ -0,0 +1,17 @@
+FROM node:20-alpine
+
+WORKDIR /app
+
+COPY package*.json .
+
+RUN npm install
+
+COPY . .
+
+RUN npm run build
+
+RUN npm install -g serve
+
+EXPOSE 3000
+
+CMD ["serve", "-s", "build"]

wordle-mohamed-oulmouden/README.md

@@ -0,0 +1,70 @@
+# Wordle Game
+This is a web-based Wordle game built using React. The game includes two modes: a daily challenge mode and an unlimited practice mode. The application is designed to be responsive, with support for both dark and light themes, and features animations and a guide page to help users understand the game rules.
+### Features
+
+- Two Game Modes:
+  - Daily Challenge Mode: Users can play one word per day. The state of the game is saved in local storage to ensure progress is maintained across sessions.
+  - Practice Mode: Users can play unlimited games to practice and improve their skills.
+- Responsive Design: The game is fully responsive and works well on all devices, including desktops, tablets, and smartphones.
+- State Management: The app uses the Context API to manage the game state across components efficiently.
+- Local Storage: In daily challenge mode, the game state is stored in local storage, allowing users to resume their progress each day.
+- Animations: The game includes cool animations that enhance the user experience.
+- Dark and Light Mode: Users can switch between dark and light modes, providing a comfortable experience in different lighting conditions.
+- Guide Page: A dedicated page that explains the rules of the game, helping new users get started quickly.
+
+### <div style="color:#f22c3d; font-size: 1.4rem; ">Deployment Link</div>
+
+The application is deployed on Vercel and can be accessed using the following link:
+
+[Wordle Game](https://wordle-game-hazel.vercel.app/)
+
+
+### Running the Application
+
+#### To run the application, follow these steps:
+
+1. Clone the repository and navigate to the project folder.
+
+    ```bash
+    git clone git@github.com:oulmdev/OpenDevEd-Wordle.git
+    ```
+    ```bash
+    cd OpenDevEd-Wordle
+    ```
+    ```bash
+    git checkout wordle-mohamed-oulmouden
+    ```
+    ```bash
+    cd wordle-mohamed-oulmouden
+    ```
+2. Install the dependencies.
+
+   ```bash
+   npm install
+   ```
+3. Run the application.
+
+   ```bash
+   npm start
+   ```
+4. Open [http://localhost:3000](http://localhost:3000) to view the application in your browser.
+
+#### Or you can run the application using Docker:
+
+   ```bash
+   docker-compose up --build
+   ```
+
+### Additional Features
+- Responsive UI: The design is optimized for both desktop and mobile devices.
+- Theme Support: Switch between dark and light modes easily.
+- User-Friendly Guide: Learn how to play with the included guide page.
+- Drag-and-Drop: Easily move letters around the board to form words.
+
+
+### Mobile View
+
+https://github.com/user-attachments/assets/a1618ec2-cdac-4f10-9932-67c08a272593
+
+### Desktop View
+https://github.com/user-attachments/assets/1fbce234-66e7-43c0-ade9-18ee2a82df7f