diff --git a/PRA/PRA01Demo.webm b/PRA/PRA01Demo.webm
new file mode 100644
index 000000000..f2798e6f7
Binary files /dev/null and b/PRA/PRA01Demo.webm differ
diff --git a/PRA/PRA01Filter.png b/PRA/PRA01Filter.png
new file mode 100644
index 000000000..e22c48b81
Binary files /dev/null and b/PRA/PRA01Filter.png differ
diff --git a/PRA/PRA01OnHover.png b/PRA/PRA01OnHover.png
new file mode 100644
index 000000000..55dc99eaf
Binary files /dev/null and b/PRA/PRA01OnHover.png differ
diff --git a/README.md b/README.md
new file mode 100644
index 000000000..84a9b6169
--- /dev/null
+++ b/README.md
@@ -0,0 +1,167 @@
+# PRA#01-React Components Frontend Development
+
+## Overview
+
+This document serves as both a guide and a log for the PRA#01 React frontend development task.
+Images and a video demo can be found in the [PRA](/PRA) folder
+
+---
+
+## PR Submission Checklist
+
+### **Tasks Completed**:
+
+ **Common**
+
+- [x] Postman mock server is set up with correct endpoint.
+
+- [x] Axios function is implemented in a decoupled manner.
+
+- [x] User JSON structure includes varied data types.
+
+- [x] User component renders correctly with avatar.
+
+- [x] Difficulty levels and filtering are functional.
+
+- [x] Synonyms rendering is implemented and error-free.
+
+ **Optional**
+
+- [x] CSS Enhancements: transient effect on hover
+
+- [ ] Animation Libraries
+
+- [ ] Enhanced Card Features
+
+---
+
+## Estimated Time for Tasks
+
+### Common Part
+
+| Task | Estimated Time | Actual Time | Impediments and errors |
+| --------------------------------------------- | -------------- | ------------------------------ | ---------------------------------------------------------------------------------------- |
+| Set up Postman mock server | 1 hour | 2:30h | mock server JSON and the data data-api fetched had different structures |
+| Implement axios function for data fetching | 1 hour | 1:15 (and back to mock server) | Needed to install font roboto, emotion and material ui. |
+| Create user JSON structure | 1 hour | 10 min | |
+| Develop user component with avatar | 2 hours | 4 hours | Potsman example didn't have the URL. Error rendering due to useEffect() and find() |
+| Add difficulty levels and implement filtering | 2 hours | 1:30 hours | |
+| **Total** | **7 hours** | **9:25 hours** | |
+
+### Optional Part
+
+| Task | Estimated Time | Actual Time | Impediments and errors |
+| ------------------------------------------- | -------------- | ----------- | ---------------------- |
+| CSS Enhancements: transient effect on hover | 1:30 hours | 30 min | |
+| Animation Libraries | 1 hour | | |
+| Enhanced Card Features | 1 hour | | |
+| **Total** | **3:30 hours** | 30 min | |
+
+---
+
+## Error Documentation and Solution
+
+### Error: `TypeError: Cannot read properties of undefined (reading 'map')`
+
+**Corresponding task:**
+
+**Description:** This error occurs when trying to use the `.map()` function on a variable that is either `undefined` or `null`. In JavaScript, `map()` is a method available only on arrays, and attempting to call it on something that is not an array (or is undefined) will result in this error.
+
+**Error Trace:**
+
+- **Component:** `WordList`
+- **File:** `Cards.jsx`
+- **Line:** 40 (in `WordList`)
+- **Stack Trace:**
+ - `WordList (Cards.jsx:40:18)`
+ - `App`
+
+**Possible Causes:**
+
+- The variable passed to `.map()` is `undefined` or `null`.
+- The variable might not have been initialized or fetched correctly before calling `.map()`.
+
+**Solution:**
+The error was resolved by modifying the `data-api.js` file. The issue was in how the data was being returned from the API call.Original code in `data-api.js`:
+
+```javascript
+export const fetchWords = async () => { try { const response = await axios.get(`${BASE_URL}/words`);
+return response.data.words; // This was causing the issue
+} catch (error) {
+ console.error("Error fetching words:", error);
+ throw error;
+ } };
+```
+
+Updated code in `api.js`:
+
+```javascript
+export const fetchWords = async () => { try { const response = await axios.get(`${BASE_URL}/words`);
+return response.data; // This fixed the issue
+} catch (error) { console.error("Error fetching words:", error);
+throw error; } };
+```
+
+**Explanation:**
+The API was returning the array of words directly in the `response.data`, not nested under a `words` property. By changing `return response.data.words;` to `return response.data;`, we correctly access the array of words, allowing the `.map()` function to work as expected in the `WordList` component.
+
+---
+
+## **Undefined Errors During Initial Render: useEffect() and find()**
+
+### **Initial Rendering:**
+
+- The component is mounted with an initial empty state (`users = []`).
+- The code tries to access `user.name` when `user` is `undefined`, causing an error.
+
+### **Execution of `useEffect`:**
+
+- `useEffect` runs **after** the initial render. React ensures the DOM is updated before running the effect.
+- The `fetchUsers()` function is called inside `useEffect` to fetch the data.
+
+### **State Update:**
+
+- When the data is received, `setUsers(data)` updates the state, triggering a re-render of the component.
+
+### **Rendering with Data:**
+
+- The component is re-rendered with the correct data. `users.find()` now finds the correct user and renders their name.
+
+---
+
+## **Main Issue**
+
+- The error occurs because `useEffect` does **not execute immediately** after the component renders; it runs after the initial render. This can lead to unexpected behavior and errors if not properly handled.
+
+---
+
+## **Solution**
+
+To solve this error, implement a conditional check before rendering the content that depends on the data:
+
+`return ( <> {user ?
{user.name}
:
Loading...
} );`
+
+This solution prevents the error on the first render by showing a loading message while the data is still being fetched.
+
+---
+
+## **Best Practices**
+
+1. **React Hooks Usage:** Ensure that React Hooks are always called at the top level of the component function. Do not place them inside conditions, loops, or nested functions, as React relies on the order of hook execution to manage state properly.
+2. **Dependencies in `useEffect`:** Identify all dependencies used inside the `useEffect` hook and ensure they are included in the dependency array. This guarantees that the effect is re-executed when relevant values change.
+
+### **Alternative Approach Using Loading State:**
+
+`const [isLoading, setIsLoading] = useState(true); useEffect(() => { const fetchData = async () => { try { const data = await fetchUsers(); setUsers(data); } finally { setIsLoading(false); } }; fetchData(); }, []); return ( <> {isLoading ?
+
+
+);
+
+
+}
\ No newline at end of file
diff --git a/frontend/pronunciationAppFront/src/Users.jsx b/frontend/pronunciationAppFront/src/Users.jsx
new file mode 100644
index 000000000..74e27d117
--- /dev/null
+++ b/frontend/pronunciationAppFront/src/Users.jsx
@@ -0,0 +1,96 @@
+import { useState, useEffect } from "react";
+
+import { fetchUsers } from "./data-api";
+
+import {
+ Card,
+ CardHeader,
+ Avatar,
+ CardContent,
+ Typography,
+ Chip,
+ Box
+} from '@mui/material';
+
+export default function Users() {
+ const [users, setUsers] = useState([]);
+
+ useEffect(() => {
+ const getUsers = async () => {
+ try {
+ const data = await fetchUsers();
+ setUsers(data);
+ } catch (error) {
+ console.error("Failed to fetch users:", error);
+ }
+ };
+
+ getUsers();
+ }, []);
+
+ const user = users.find((user) => (user.id === "1"));
+
+ const getInitials = (name) => {
+ return name.split(' ').map(part => part[0]).join('').toUpperCase();
+ };
+
+ return (
+
+ {user ? (
+
+
+ {getInitials(user.name)}
+
+ }
+ title={
+ <>
+
+ {user.name}
+
+
+ }
+ subheader={
+ <>
+
+ {user.age} years old
+
+
+
+ }
+ />
+
+
+
+ Email:{" "}
+ {user.email}
+
+
+ Member since:{" "}
+ {user.joinDate}
+
+
+
+
+ ) : (
+
+ Loading user data...
+
+ )}
+
+);
+}
\ No newline at end of file
diff --git a/frontend/pronunciationAppFront/src/assets/hero-image.png b/frontend/pronunciationAppFront/src/assets/hero-image.png
new file mode 100644
index 000000000..142e2916b
Binary files /dev/null and b/frontend/pronunciationAppFront/src/assets/hero-image.png differ
diff --git a/frontend/pronunciationAppFront/src/assets/profile.webp b/frontend/pronunciationAppFront/src/assets/profile.webp
new file mode 100644
index 000000000..cd88adb3b
Binary files /dev/null and b/frontend/pronunciationAppFront/src/assets/profile.webp differ
diff --git a/frontend/pronunciationAppFront/src/assets/react.svg b/frontend/pronunciationAppFront/src/assets/react.svg
deleted file mode 100644
index 6c87de9bb..000000000
--- a/frontend/pronunciationAppFront/src/assets/react.svg
+++ /dev/null
@@ -1 +0,0 @@
-
\ No newline at end of file
diff --git a/frontend/pronunciationAppFront/src/data-api.js b/frontend/pronunciationAppFront/src/data-api.js
new file mode 100644
index 000000000..889230160
--- /dev/null
+++ b/frontend/pronunciationAppFront/src/data-api.js
@@ -0,0 +1,25 @@
+// api.js
+import axios from "axios";
+
+const BASE_URL = "https://8eeb858c-019e-4bd3-8287-f53ccc9400a7.mock.pstmn.io";
+
+
+export const fetchWords = async () => {
+ try {
+ const response = await axios.get(`${BASE_URL}/words`);
+ return response.data;
+ } catch (error) {
+ console.error("Error fetching words:", error);
+ throw error;
+ }
+};
+
+export const fetchUsers = async () => {
+ try {
+ const response = await axios.get(`${BASE_URL}/users`);
+ return response.data;
+ } catch (error) {
+ console.error("Error fetching users:", error);
+ throw error;
+ }
+};
diff --git a/frontend/pronunciationAppFront/src/index.css b/frontend/pronunciationAppFront/src/index.css
index 6119ad9a8..413a99385 100644
--- a/frontend/pronunciationAppFront/src/index.css
+++ b/frontend/pronunciationAppFront/src/index.css
@@ -5,7 +5,6 @@
color-scheme: light dark;
color: rgba(255, 255, 255, 0.87);
- background-color: #242424;
font-synthesis: none;
text-rendering: optimizeLegibility;
@@ -13,56 +12,19 @@
-moz-osx-font-smoothing: grayscale;
}
-a {
- font-weight: 500;
- color: #646cff;
- text-decoration: inherit;
-}
-a:hover {
- color: #535bf2;
-}
-
body {
- margin: 0;
- display: flex;
- place-items: center;
- min-width: 320px;
- min-height: 100vh;
+ background: linear-gradient(to bottom, #4b6cb7, #182848);
+ color: #F0F4F8; /* Soft light gray text */
+ line-height: 1.6;
+ letter-spacing: 0.5px;
}
+
+
h1 {
font-size: 3.2em;
line-height: 1.1;
}
-button {
- border-radius: 8px;
- border: 1px solid transparent;
- padding: 0.6em 1.2em;
- font-size: 1em;
- font-weight: 500;
- font-family: inherit;
- background-color: #1a1a1a;
- cursor: pointer;
- transition: border-color 0.25s;
-}
-button:hover {
- border-color: #646cff;
-}
-button:focus,
-button:focus-visible {
- outline: 4px auto -webkit-focus-ring-color;
-}
-@media (prefers-color-scheme: light) {
- :root {
- color: #213547;
- background-color: #ffffff;
- }
- a:hover {
- color: #747bff;
- }
- button {
- background-color: #f9f9f9;
- }
-}
+
diff --git a/frontend/pronunciationAppFront/src/main.jsx b/frontend/pronunciationAppFront/src/main.jsx
index b9a1a6dea..4ec53d92f 100644
--- a/frontend/pronunciationAppFront/src/main.jsx
+++ b/frontend/pronunciationAppFront/src/main.jsx
@@ -2,6 +2,10 @@ import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import './index.css'
import App from './App.jsx'
+import "@fontsource/roboto/300.css";
+import "@fontsource/roboto/400.css";
+import "@fontsource/roboto/500.css";
+import "@fontsource/roboto/700.css";
createRoot(document.getElementById('root')).render(
diff --git a/frontend/resources/CreateReactviteProject.md b/frontend/resources/create-React-vite/createReactviteProject.md
similarity index 100%
rename from frontend/resources/CreateReactviteProject.md
rename to frontend/resources/create-React-vite/createReactviteProject.md
diff --git a/frontend/resources/pronunciationAppFront-v0.0-project-structure.png b/frontend/resources/create-React-vite/pronunciationAppFront-v0.0-project-structure.png
similarity index 100%
rename from frontend/resources/pronunciationAppFront-v0.0-project-structure.png
rename to frontend/resources/create-React-vite/pronunciationAppFront-v0.0-project-structure.png
diff --git a/frontend/resources/pronunciationAppFront-v0.0-run-dev.png b/frontend/resources/create-React-vite/pronunciationAppFront-v0.0-run-dev.png
similarity index 100%
rename from frontend/resources/pronunciationAppFront-v0.0-run-dev.png
rename to frontend/resources/create-React-vite/pronunciationAppFront-v0.0-run-dev.png
diff --git a/frontend/resources/create-React-vite/pronunciationAppFront-v0.0-web-1.png b/frontend/resources/create-React-vite/pronunciationAppFront-v0.0-web-1.png
new file mode 100644
index 000000000..653a20fa5
Binary files /dev/null and b/frontend/resources/create-React-vite/pronunciationAppFront-v0.0-web-1.png differ
diff --git a/frontend/resources/pronunciationAppFront-v0.0-web.png b/frontend/resources/create-React-vite/pronunciationAppFront-v0.0-web.png
similarity index 100%
rename from frontend/resources/pronunciationAppFront-v0.0-web.png
rename to frontend/resources/create-React-vite/pronunciationAppFront-v0.0-web.png
diff --git a/frontend/resources/data-JSON/words.json b/frontend/resources/data-JSON/words.json
new file mode 100644
index 000000000..863968d84
--- /dev/null
+++ b/frontend/resources/data-JSON/words.json
@@ -0,0 +1,54 @@
+{
+ "words": [
+ {
+ "id": "8b9248a4e0b64bbccf82e7723a3734279bf9bbc4",
+ "word": "benevolent",
+ "pronunciation": "/bɪˈnɛvələnt/"
+ },
+ {
+ "id": "3a7bd3e2a07e8c7e9b6e0d2c1f4a5b8d9c0e3f2",
+ "word": "serendipity",
+ "pronunciation": "/ˌserənˈdɪpɪti/"
+ },
+ {
+ "id": "5c9d7f3e1a2b4d6e8g0h9i7j6k5l4m3n2o1p",
+ "word": "ephemeral",
+ "pronunciation": "/ɪˈfɛmərəl/"
+ },
+ {
+ "id": "2f4e6d8c0b2a4d6e8f0a2c4e6g8i0k2m4o6q",
+ "word": "ubiquitous",
+ "pronunciation": "/juːˈbɪkwɪtəs/"
+ },
+ {
+ "id": "7h9j1l3n5p7r9t1v3x5z7b9d1f3h5j7l9n",
+ "word": "mellifluous",
+ "pronunciation": "/məˈlɪfluəs/"
+ },
+ {
+ "id": "1a3c5e7g9i1k3m5o7q9s1u3w5y7a9c1e3",
+ "word": "eloquent",
+ "pronunciation": "/ˈɛləkwənt/"
+ },
+ {
+ "id": "4b6d8f0h2j4l6n8p0r2t4v6x8z0b2d4f6",
+ "word": "quintessential",
+ "pronunciation": "/ˌkwɪntɪˈsenʃəl/"
+ },
+ {
+ "id": "9k1m3o5q7s9u1w3y5a7c9e1g3i5k7m9o",
+ "word": "ethereal",
+ "pronunciation": "/ɪˈθɪəriəl/"
+ },
+ {
+ "id": "2p4r6t8v0x2z4b6d8f0h2j4l6n8p0r2t",
+ "word": "surreptitious",
+ "pronunciation": "/ˌsʌrəpˈtɪʃəs/"
+ },
+ {
+ "id": "5u7w9y1a3c5e7g9i1k3m5o7q9s1u3w5",
+ "word": "labyrinthine",
+ "pronunciation": "/ˌlæbəˈrɪnθaɪn/"
+ }
+ ]
+}
diff --git a/frontend/resources/material-ui/CSS-Box-Model.png b/frontend/resources/material-ui/CSS-Box-Model.png
new file mode 100644
index 000000000..d55e46211
Binary files /dev/null and b/frontend/resources/material-ui/CSS-Box-Model.png differ
diff --git a/frontend/resources/material-ui/boxing-containers.md b/frontend/resources/material-ui/boxing-containers.md
new file mode 100644
index 000000000..39ae6f92e
--- /dev/null
+++ b/frontend/resources/material-ui/boxing-containers.md
@@ -0,0 +1,159 @@
+# CSS basics: box and containers
+
+> `CSS (Cascading Style Sheets)` is a fundamental technology for web design, and understanding the `box model and containers` is key for layout and styling.
+
+## CSS Box Model
+
+The CSS box model is the foundation of layout in CSS. It treats every HTML element as a box with four components[1][4]:
+
+1. `Content`: The actual text, images, or other media within the element.
+2. `Padding`: Transparent space around the content.
+3. `Border`: A line surrounding the padding and content.
+4. `Margin`: Transparent space outside the border.
+
+These components work together to determine the total size and spacing of elements on a webpage. For example:
+
+```css
+div {
+ width: 350px;
+ height: 150px;
+ padding: 25px;
+ border: 5px solid black;
+ margin: 10px;
+}
+```
+
+In this case, the total width of the element would be 410px (350px content + 50px padding + 10px border) and the height would be 210px (150px content + 50px padding + 10px border)[4].
+
+## CSS Containers
+
+Containers in CSS are elements used to group and structure content within a webpage[9]. They help control the placement and styling of elements, creating organized and responsive layouts. Common container elements include:
+
+- `
`: A generic container for flow content.
+- ``: A thematic grouping of content.
+- ``: A self-contained composition.
+
+Containers are often styled using CSS classes:
+
+```css
+.container {
+ max-width: 1200px;
+ margin: 0 auto;
+ padding: 20px;
+}
+```
+
+This creates a centered container with a maximum width and some padding[9].
+
+## Advanced Container Concepts
+
+1. Flexbox: A one-dimensional layout model for flexible container elements.
+2. Grid: A two-dimensional layout system for more complex designs.
+3. Container Queries: A newer feature allowing styles to be applied based on the container's size rather than the viewport[6].
+
+Understanding these concepts allows developers to create responsive, well-structured layouts that adapt to various screen sizes and devices, enhancing the overall user experience of websites.
+
+Citations:
+[1] https://www.w3schools.com/css/css_boxmodel.asp
+[2] https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_box_model
+[3] https://www.smashingmagazine.com/2021/05/complete-guide-css-container-queries/
+[4] https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Box_model
+[5] https://www.youtube.com/watch?v=nSst4-WbEZk
+[6] https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_containment/Container_queries
+[7] https://www.programiz.com/css/box-model
+[8] https://en.wikipedia.org/wiki/Internet_Explorer_box_model_bug
+[9] https://www.javatpoint.com/css-container
+[10] https://www.simplilearn.com/tutorials/css-tutorial/css-box-model
+[11] https://www.geeksforgeeks.org/css-box-model/
+
+## Example
+
+```js
+import React, { useState, useEffect } from 'react';
+import axios from 'axios';
+import {
+ Box,
+ Card,
+ CardContent,
+ Typography,
+ Container,
+ Grid
+} from '@mui/material';
+
+
+export default function WordList() {
+
+ // business logic to fetch data: words
+
+ return (
+
+
+
+ Word List
+
+
+ {words.map((word) => (
+
+
+
+
+ {word.word}
+
+
+ Pronunciation: {word.pronunciation}
+
+
+
+
+ ))}
+
+
+
+ );
+}
+```
+
+This table provides a balanced view of the advantages and potential drawbacks of using these Material-UI components in React applications.: explaining the pros and cons of using `Container`, `Box`, and `Grid` components in React with Material-UI:
+
+| Pros | Cons |
+| --------------------------------------- | ------------------------------------------------------ |
+| Responsive design out of the box | Learning curve for new developers |
+| Consistent spacing and layout | Potential over-reliance on MUI components |
+| Improved code organization | Extra abstraction layer |
+| Better performance optimization | Increased bundle size |
+| Adherence to Material Design principles | Less flexibility for highly custom designs |
+| Enhanced accessibility | Potential performance impact with nested grids |
+| Scalable structure | Possible verbosity in component structure |
+| Cross-browser compatibility | Dependency on external library (MUI) |
+| Easy theming and customization | Version compatibility issues during updates |
+| Reduced development time | Potential for unnecessary complexity in simple layouts |
+
+### Box vs Container Comparison
+
+| Aspect | Box | Container |
+| --------------------- | ------------------------------------- | ------------------------------------------ |
+| Definition | Individual element rendering model | Structural element for grouping content |
+| Primary Purpose | Define element dimensions and spacing | Organize and layout multiple elements |
+| CSS Properties | `margin`, `padding`, `border` | `max-width`, `display`, `flex`, `grid` |
+| Scope | Single HTML element | Multiple elements or child components |
+| Responsiveness | Element-specific sizing | Layout-wide adaptability |
+| Nesting Capability | Limited | High (can contain multiple boxes/elements) |
+| Layout Behavior | Static individual element | Dynamic content arrangement |
+| Typical HTML Elements | Every HTML tag | `
`, ``, `` |
+| Flexibility | Fixed to element properties | Adaptable to different layout strategies |
+| Performance Impact | Minimal | Can affect overall page rendering |
+
+## Key Takeaways
+
+- Boxes are about individual element rendering
+- Containers are about structural organization
+
+### Links
+
+- [Container Component](https://mui.com/material-ui/react-container/)
+
+- [Box Component](https://mui.com/material-ui/react-box/)
+
+- [Container Component](https://mui.com/material-ui/react-container/)
+
+- [Grid version 2](https://mui.com/material-ui/react-grid2/)
diff --git a/frontend/resources/material-ui/material-ui-install.md b/frontend/resources/material-ui/material-ui-install.md
new file mode 100644
index 000000000..4d588e785
--- /dev/null
+++ b/frontend/resources/material-ui/material-ui-install.md
@@ -0,0 +1,61 @@
+# Material React UI
+
+To install Material-UI (now known as MUI) for React using npm, follow these steps:
+
+1. Open your terminal and navigate to your React project directory.
+
+2. Run the following command to install MUI and its peer dependencies:
+
+```bash
+npm install @mui/material @emotion/react @emotion/styled
+```
+
+3. If you want to use icons, install the icons package:
+
+```bash
+npm install @mui/icons-material
+```
+
+4. For optimal font loading, install Roboto font:
+
+```bash
+npm install @fontsource/roboto
+```
+
+After installation, you can import and use MUI components in your React application. Here's a basic example of how to use a MUI component:
+
+```jsx
+import React from 'react';
+import Button from '@mui/material/Button';
+
+function App() {
+ return (
+
+ );
+}
+
+export default App;
+```
+
+Remember to import the Roboto font in your main `index.js` or `App.js` file:
+
+```jsx
+import '@fontsource/roboto/300.css';
+import '@fontsource/roboto/400.css';
+import '@fontsource/roboto/500.css';
+import '@fontsource/roboto/700.css';
+```
+
+This setup will allow you to use MUI components and styles in your React application[1][2][3].
+
+Citations:
+[1] https://v3.mui.com/getting-started/installation/
+[2] https://v5-0-6.mui.com/getting-started/installation/
+[3] https://mui.com/material-ui/getting-started/installation/
+[4] https://v4.mui.com/getting-started/installation/
+[5] https://www.educative.io/answers/how-to-install-material-ui-v5
+[6] https://www.npmjs.com/package/@mui/material
+[7] https://v4.mui.com/es/getting-started/installation/
+[8] https://www.npmjs.com/package/@material-ui/core
diff --git a/frontend/resources/pronunciationAppFront-v0.1-flow-data-1.png b/frontend/resources/pronunciationAppFront-v0.1-flow-data-1.png
new file mode 100644
index 000000000..34e15a47d
Binary files /dev/null and b/frontend/resources/pronunciationAppFront-v0.1-flow-data-1.png differ
diff --git a/frontend/resources/pronunciationAppFront-v0.1-flow-data-2.png b/frontend/resources/pronunciationAppFront-v0.1-flow-data-2.png
new file mode 100644
index 000000000..bbeee187a
Binary files /dev/null and b/frontend/resources/pronunciationAppFront-v0.1-flow-data-2.png differ
diff --git a/frontend/resources/pronunciationAppFront-v0.1-flow-data-3.png b/frontend/resources/pronunciationAppFront-v0.1-flow-data-3.png
new file mode 100644
index 000000000..b39d8202e
Binary files /dev/null and b/frontend/resources/pronunciationAppFront-v0.1-flow-data-3.png differ
diff --git a/frontend/resources/pronunciationAppFront-v0.1-flow-data-4.png b/frontend/resources/pronunciationAppFront-v0.1-flow-data-4.png
new file mode 100644
index 000000000..762e1c320
Binary files /dev/null and b/frontend/resources/pronunciationAppFront-v0.1-flow-data-4.png differ
diff --git a/frontend/resources/pronunciationAppFront-v0.1-render-1-cards.png b/frontend/resources/pronunciationAppFront-v0.1-render-1-cards.png
new file mode 100644
index 000000000..a9395cef5
Binary files /dev/null and b/frontend/resources/pronunciationAppFront-v0.1-render-1-cards.png differ
diff --git a/frontend/resources/pronunciationAppFront-v0.1-render-2-cards.png b/frontend/resources/pronunciationAppFront-v0.1-render-2-cards.png
new file mode 100644
index 000000000..4a0bf0ac0
Binary files /dev/null and b/frontend/resources/pronunciationAppFront-v0.1-render-2-cards.png differ
diff --git a/frontend/resources/pronunciationAppFront-v0.1-render-3-cards.png b/frontend/resources/pronunciationAppFront-v0.1-render-3-cards.png
new file mode 100644
index 000000000..15fe15340
Binary files /dev/null and b/frontend/resources/pronunciationAppFront-v0.1-render-3-cards.png differ
diff --git a/frontend/resources/pronunciationAppFront-v0.1-render-4-data.png b/frontend/resources/pronunciationAppFront-v0.1-render-4-data.png
new file mode 100644
index 000000000..729ae1ed4
Binary files /dev/null and b/frontend/resources/pronunciationAppFront-v0.1-render-4-data.png differ
diff --git a/frontend/resources/pronunciatonApp-v0.1.md b/frontend/resources/pronunciatonApp-v0.1.md
new file mode 100644
index 000000000..6743517d0
--- /dev/null
+++ b/frontend/resources/pronunciatonApp-v0.1.md
@@ -0,0 +1,284 @@
+# PronunciationApp v0.1
+
+## Reference Lab
+
+- [Lab#RE06-1: healthyFood Restaurant – albertprofe wiki](https://albertprofe.dev/reactjs/rjslab6-1.html): with AWS workflow CD/CI deploy
+- [Lab#RE01-1: API Rest Axios – albertprofe wiki](https://albertprofe.dev/reactjs/rjslab1.html): with Axios
+
+## Postman Mock Data Server
+
+> A **Postman mock server is a simulated API endpoint that mimics the behavior of a real server** without the need for a fully implemented backend. It allows developers to test and prototype APIs by returning predefined responses to requests.
+
+```js
+const BASE_URL = 'https://a387bb02-2aa0-41a6-b8f7-9cc5247b9d5f.mock.pstmn.io';
+```
+
+`Mock servers` are created from Postman collections, which contain saved examples of requests and responses. When a request is sent to the mock server, it matches the incoming request to the closest saved example and returns the corresponding response.
+
+- [Configure and use a Postman mock server | Postman Docs](https://learning.postman.com/docs/designing-and-developing-your-api/mocking-data/setting-up-mock/)
+
+These servers can be public or private, with private servers requiring an API key for access. They're useful for API development, testing, and simulating various scenarios without relying on a live backend.
+
+`Mock servers` can also simulate network delays and generate dynamic responses using variables and templates, enhancing the realism of API testing. They're particularly valuable in the early stages of API development, allowing frontend and backend teams to work concurrently without waiting for a fully functional API.
+
+### Fake data words
+
+```json
+{ "words" : [ { "id": "8b9248a4e0b64bbccf82e7723a3734279bf9bbc4", "word": "benevolent", "pronunciation": "/bɪˈnɛvələnt/" }, { "id": "3a7bd3e2a07e8c7e9b6e0d2c1f4a5b8d9c0e3f2", "word": "serendipity", "pronunciation": "/ˌserənˈdɪpɪti/" }, { "id": "5c9d7f3e1a2b4d6e8g0h9i7j6k5l4m3n2o1p", "word": "ephemeral", "pronunciation": "/ɪˈfɛmərəl/" }, { "id": "2f4e6d8c0b2a4d6e8f0a2c4e6g8i0k2m4o6q", "word": "ubiquitous", "pronunciation": "/juːˈbɪkwɪtəs/" }, { "id": "7h9j1l3n5p7r9t1v3x5z7b9d1f3h5j7l9n", "word": "mellifluous", "pronunciation": "/məˈlɪfluəs/" }, { "id": "1a3c5e7g9i1k3m5o7q9s1u3w5y7a9c1e3", "word": "eloquent", "pronunciation": "/ˈɛləkwənt/" }, { "id": "4b6d8f0h2j4l6n8p0r2t4v6x8z0b2d4f6", "word": "quintessential", "pronunciation": "/ˌkwɪntɪˈsenʃəl/" }, { "id": "9k1m3o5q7s9u1w3y5a7c9e1g3i5k7m9o", "word": "ethereal", "pronunciation": "/ɪˈθɪəriəl/" }, { "id": "2p4r6t8v0x2z4b6d8f0h2j4l6n8p0r2t", "word": "surreptitious", "pronunciation": "/ˌsʌrəpˈtɪʃəs/" }, { "id": "5u7w9y1a3c5e7g9i1k3m5o7q9s1u3w5", "word": "labyrinthine", "pronunciation": "/ˌlæbəˈrɪnθaɪn/" } ]}
+```
+
+## Project
+
+### Tech stack
+
+Draft-sandbox coupled code using:
+
+- `Material UI`,
+
+- `Postam` Mock Data Server API endpoint,
+
+- `Axios` for data fetching,
+
+- `Hooks` for state management
+
+- and rendering the words
+
+ - from the provided API endpoint using `map` js function
+
+This code combines the Material UI components with Axios for data fetching. It uses the `useState` and `useEffect` hooks to manage the state and side effects. The `fetchWords` function makes a GET request to the provided API endpoint to retrieve the word data. The component then renders the fetched words in a responsive grid of Material UI cards.
+
+Remember to install the necessary dependencies:
+
+```bash
+npm install @mui/material @emotion/react @emotion/styled axios
+```
+
+This setup provides a clean, modern look with Material UI components and efficiently fetches data from the API using Axios.
+
+### Flow
+
+> This flow simulate API interactions without a real backend.
+
+The mock server returns predefined data, which Axios fetches in the useEffect hook. The fetched data is then stored in state using useState. Finally, the component maps over the state data, rendering each word as a card in the UI, creating a seamless development experience before the actual API is ready.
+
+The flow from a Postman mock server to rendering in React involves these steps:
+
+1. **Postman mock server**: Simulates an API endpoint, providing predefined responses to requests.
+
+2. **Axios**: Makes an HTTP GET request to the mock server URL.
+
+3. **useEffect**: Triggers the Axios request when the component mounts.
+
+4. **useState**: Stores the fetched data in the component's state.
+
+5. **words.map()**: Iterates over the array of words stored in state.
+
+6. **Render**: Displays each word as a Material UI Card component in the UI.
+
+### Code sandbox
+
+Coupled `fetchWords` and `WordList()`
+
+```js
+import React, { useState, useEffect } from 'react';
+import axios from 'axios';
+import {
+ Box,
+ Card,
+ CardContent,
+ Typography,
+ Container,
+ Grid
+} from '@mui/material';
+
+const BASE_URL = 'https://a387bb02-2aa0-41a6-b8f7-9cc5247b9d5f.mock.pstmn.io';
+
+const fetchWords = async () => {
+ try {
+ const response = await axios.get(`${BASE_URL}/words`);
+ return response.data.words;
+ } catch (error) {
+ console.error('Error fetching words:', error);
+ throw error;
+ }
+};
+
+export default function WordList() {
+ const [words, setWords] = useState([]);
+
+ useEffect(() => {
+ const getWords = async () => {
+ try {
+ const data = await fetchWords();
+ setWords(data);
+ } catch (error) {
+ console.error('Failed to fetch words:', error);
+ }
+ };
+
+ getWords();
+ }, []);
+
+ return (
+
+
+
+ Word List
+
+
+ {words.map((word) => (
+
+
+
+
+ {word.word}
+
+
+ Pronunciation: {word.pronunciation}
+
+
+
+
+ ))}
+
+
+
+ );
+}
+```
+
+### Code sandbox without MUI
+
+`./pronunciationAppFront/src/Cards.jsx`
+
+```jsx
+import { useState, useEffect } from "react";
+import { fetchWords } from "./data-api";
+
+export default function WordList() {
+ const [words, setWords] = useState([]);
+
+ useEffect(() => {
+ const getWords = async () => {
+ try {
+ const data = await fetchWords();
+ setWords(data);
+ } catch (error) {
+ console.error("Failed to fetch words:", error);
+ }
+ };
+
+ getWords();
+ }, []);
+
+ return (
+ <>
+
+