+
+
+);
+
+
+}
\ No newline at end of file
diff --git a/frontend/pronunciationAppFront/src/User.jsx b/frontend/pronunciationAppFront/src/User.jsx
new file mode 100644
index 000000000..fa6e1dafb
--- /dev/null
+++ b/frontend/pronunciationAppFront/src/User.jsx
@@ -0,0 +1,75 @@
+import { useEffect, useState } from "react";
+import { fetchUserData } from "./data-api";
+import Card from "@mui/material/Card";
+import Box from "@mui/material/Box";
+import Avatar from "@mui/material/Avatar";
+import CardContent from "@mui/material/CardContent";
+import Typography from "@mui/material/Typography";
+import { stringAvatar } from "./utils";
+
+export default function User() {
+ const [user, setUser] = useState(null);
+ const [error, setError] = useState(null);
+
+ useEffect(function () {
+ fetchUserData()
+ .then(function (data) {
+ setUser(data);
+ })
+ .catch(function (error) {
+ setError("Error obteniendo usuario");
+ console.error(error);
+ });
+ }, []);
+
+ if (!user && !error) {
+ return
Loading...
;
+ }
+
+ return (
+ <>
+ {error !== null ? (
+
{error}
+ ) : (
+
+
+
+
+
+ {user.name}
+
+
+ {user.email}
+
+
+ Age: {user.age}
+
+
+ Member since: {new Date(user.joinDate).toLocaleDateString()}
+
+
+
+
+ )}
+
+ );
+}
diff --git a/frontend/pronunciationAppFront/src/WordSynonyms.jsx b/frontend/pronunciationAppFront/src/WordSynonyms.jsx
new file mode 100644
index 000000000..4bb395e42
--- /dev/null
+++ b/frontend/pronunciationAppFront/src/WordSynonyms.jsx
@@ -0,0 +1,50 @@
+/* eslint-disable react/prop-types */
+import { Box, IconButton, Typography } from "@mui/material";
+import SkipPreviousIcon from "@mui/icons-material/SkipPrevious";
+import SkipNextIcon from "@mui/icons-material/SkipNext";
+import { useState } from "react";
+
+export function WordSynonyms({ synonyms }) {
+ const [index, setIndex] = useState(0);
+
+ function handlePrevious() {
+ if (index > 0) {
+ setIndex(index - 1);
+ }
+ }
+
+ function handleNext() {
+ if (index < synonyms.length - 1) {
+ setIndex(index + 1);
+ }
+ }
+ return (
+
+
+ Synonyms
+
+
+ 0 ? 'visible' : 'hidden' }} onClick={handlePrevious} aria-label="previous">
+
+
+
+ {synonyms[index]}
+
+
+
+
+
+
+ );
+}
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/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..14c2dce55
--- /dev/null
+++ b/frontend/pronunciationAppFront/src/data-api.js
@@ -0,0 +1,25 @@
+// api.js
+import axios from "axios";
+
+// const BASE_URL = "https://1f196337-d694-4b64-9b0e-ef471d8cd805.mock.pstmn.io";
+const BASE_URL = "http://localhost:3000"
+
+export 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 const fetchUserData = async () => {
+ try {
+ const response = await axios.get(`${BASE_URL}/user`);
+ return response.data;
+ } catch (error) {
+ console.error("Error fetching user:", error);
+ throw error;
+ }
+};
\ No newline at end of file
diff --git a/frontend/pronunciationAppFront/src/index.css b/frontend/pronunciationAppFront/src/index.css
index 6119ad9a8..fbfbcdf4f 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,18 @@
-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: radial-gradient(ellipse at center, #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/pronunciationAppFront/src/utils.js b/frontend/pronunciationAppFront/src/utils.js
new file mode 100644
index 000000000..b7e038a78
--- /dev/null
+++ b/frontend/pronunciationAppFront/src/utils.js
@@ -0,0 +1,30 @@
+function stringToColor(string) {
+ let hash = 0;
+ let i;
+
+ for (i = 0; i < string.length; i += 1) {
+ hash = string.charCodeAt(i) + ((hash << 5) - hash);
+ }
+
+ let color = "#";
+
+ for (i = 0; i < 3; i += 1) {
+ const value = (hash >> (i * 8)) & 0xff;
+ color += `00${value.toString(16)}`.slice(-2);
+ }
+
+ return color;
+}
+
+export function stringAvatar(name) {
+ return {
+ sx: {
+ bgcolor: stringToColor(name),
+ },
+ children: `${name.split(" ")[0][0]}${name.split(" ")[1][0]}`,
+ };
+}
+
+export function filterByLevel(words, level) {
+ return words.filter(w => Number(w.level) === level)
+}
\ No newline at end of file
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/css/css-cheesheat-1.png b/frontend/resources/css/css-cheesheat-1.png
new file mode 100644
index 000000000..92aaa4546
Binary files /dev/null and b/frontend/resources/css/css-cheesheat-1.png differ
diff --git a/frontend/resources/css/css-cheesheat-2.png b/frontend/resources/css/css-cheesheat-2.png
new file mode 100644
index 000000000..e7562b5b3
Binary files /dev/null and b/frontend/resources/css/css-cheesheat-2.png differ
diff --git a/frontend/resources/css/css-cheesheat-3.png b/frontend/resources/css/css-cheesheat-3.png
new file mode 100644
index 000000000..8026011f9
Binary files /dev/null and b/frontend/resources/css/css-cheesheat-3.png differ
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/pronunciationAppFront-v0.1-render-5-data-inline.png b/frontend/resources/pronunciationAppFront-v0.1-render-5-data-inline.png
new file mode 100644
index 000000000..69f04de7f
Binary files /dev/null and b/frontend/resources/pronunciationAppFront-v0.1-render-5-data-inline.png differ
diff --git a/frontend/resources/pronunciatonApp-v0.1.md b/frontend/resources/pronunciatonApp-v0.1.md
new file mode 100644
index 000000000..47dbc951a
--- /dev/null
+++ b/frontend/resources/pronunciatonApp-v0.1.md
@@ -0,0 +1,283 @@
+# PronunciationApp Frontend 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 (
+ <>
+
+