Сделали многоуровневые списки

db.json

@@ -2,24 +2,54 @@
 	"products": [
 		{
 			"id": 1,
-            "name":"Кросовки Red & White 2025",
+			"name": "Sneakers Red & White 2025",
 			"brand": "NIKE",
 			"price": 38.0,
-            "imageUrl":"./assets/images/sneakers-image.jpg"
+			"imageUrl": "./src/assets/images/sneakers-image.jpg"
 		},
 		{
 			"id": 2,
-            "name":"Кросовки белые 2024",
+			"name": "Sneakers Red & White 2025",
 			"brand": "NIKE",
-            "price":40.0,
+			"price": 38.0,
-            "imageUrl":"./assets/images/sneakers-image.jpg"
+			"imageUrl": "./src/assets/images/sneakers-image.jpg"
 		},
 		{
 			"id": 3,
 			"name": "Sneakers Red & White 2025",
 			"brand": "NIKE",
-            "price":46.0,
+			"price": 38.0,
-            "imageUrl":"./assets/images/sneakers-image.jpg"
+			"imageUrl": "./src/assets/images/sneakers-image.jpg"
+		}
+	],
+    "articles": [
+        {
+            "id": 1,
+            "title": "Статья 1",
+            "author": "Иванов Иван Иванович",
+            "createDate": "2020-01-15",
+            "content": "Основной текст статьи"
+        }
+    ],
+    "projects": [
+        {
+            "id":1,
+            "name": "Project 1",
+            "status": "work",
+            "description": "Very important!",
+            "tasks": [
+                {
+                    "id":1,
+                    "title":"Task 1",
+                    "description": "Описание задачи"
+                },
+                {
+                    "id":2,
+                    "title":"Task 2",
+                    "description": "Описание задачи 2"
                 }
             ]
         }
+    ]
+    
+}

package.json

@@ -4,8 +4,8 @@
 	"version": "0.0.0",
 	"type": "module",
 	"scripts": {
-    "server": "json-server --watch db.json --port 8000",
 		"dev": "vite",
+		"server": "json-server --watch db.json --port 8000",
 		"build": "vite build",
 		"lint": "eslint .",
 		"preview": "vite preview"

src/App.jsx

@@ -1,68 +1,6 @@
 import styles from './App.module.scss'
-import SneakersImage from './assets/images/sneakers-image.jpg'
 import { FaRegUser } from 'react-icons/fa'
-import React from 'react'
+import React, { useState, useEffect } from 'react'
-
-function EffectComponent() {
-    const [size, setSize] = React.useState(100);
-    const boxRef = React.useRef(null);
-    
-    React.useEffect(() => {
-        const box = boxRef.current
-        if (box) {
-            const { width, height } = box.getBoundingClientRect()
-            console.log('[useEffect] Размеры (EffectComponent):', { width, height })
-        }
-    }, [size]);
-    
-    return (
-    <div style={{ marginBottom: '30px' }}>
-      <h3>useEffect</h3>
-      <div
-        ref={boxRef}
-        style={{
-          width: size,
-          height: size,
-          backgroundColor: 'lightblue',
-          transition: 'all 1.3s',
-        }}
-      />
-      <button onClick={() => setSize(prev => prev + 20)}>Увеличить</button>
-    </div>
-  )
-}
-
-function LayoutEffectComponent() {
-  const [size, setSize] = React.useState(100)
-  const boxRef = React.useRef(null)
-
-  React.useLayoutEffect(() => {
-    const box = boxRef.current
-    if (box) {
-      const { width, height } = box.getBoundingClientRect()
-      console.log('[useLayoutEffect] Размеры (LayoutEffectComponent):', {
-        width,
-        height,
-      })
-    }
-  }, [size])
-
-  return (
-    <div>
-      <h3>useLayoutEffect</h3>
-      <div
-        ref={boxRef}
-        style={{
-          width: size,
-          height: size,
-          backgroundColor: 'lightgreen',
-          transition: 'all 1.3s',
-        }}
-      />
-      <button onClick={() => setSize(prev => prev + 20)}>Увеличить</button>
-    </div>
-  )
-}
 
 function Header() {
 	const handleChange = event => {
@@ -76,29 +14,128 @@ function Header() {
 				<h2>Store</h2>
 				<input type='text	' placeholder='Search...' onChange={handleChange} />
 			</div>
-			<div>
+            <UserMenu isLoggedin={true} userName="Bob" role="user" />
-				<FaRegUser size={24} color='#3258e3' />
-				<button>Profile</button>
-			</div>
 		</header>
 	)
 }
 
-function ToolTip() {
+function UserMenu({ userName }) {
-    const ref = React.useRef(null);
+    const [loggedin,setLoggedin] = useState(false);
-    const [height,setHeight] = React.useState(0);
+    const [role, setRole] = useState('user');
     
-    React.useLayoutEffect(()=>{
+    
-        if (ref.current) {
+    if (loggedin) {
-            const rect = ref.current.getBoundingClientRect();
+        return (
-            setHeight(rect.height);
+            <div className="user-menu">
+                <nav>
+                    <a href="/settings">Настройки</a>
+                    {role === "admin" && <a href="/admin">Панель администратора</a>}
+                    <div>
+				        <FaRegUser size={24} color='#3258e3' />
+				        <button>Profile</button>
+				        <button onClick={() => setLoggedin(false)}>Exit</button>
+			        </div>
+                </nav>
+            </div>
+        );
     }
-    },[])
+    return (
-    
+        <div className="login-form">
-    return <div ref={ref} style={{height: '40px'}}>Высота: {height}</div>
+            <button onClick={() => setLoggedin(true)}>Войти</button>
+        </div>
+    );
 }
 
-function Product({ name, brand, price, url }) {
+function ArticleViewer({ articleId }) {
+    const [article,setArticle] = useState(null);
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState(null);
+    
+    useEffect(() => {
+        const fetchArticle = async () => {
+            try {
+                setLoading(true);
+                setError(null);
+                const responce = await fetch(`http://localhost:8000/articles/${articleId}`)
+                
+                if(!responce.ok) {
+                    throw new Error('Не удалось загрузить статью');
+                }
+                
+                const data = await responce.json();
+                setArticle(data);
+            } catch(err) {
+                setError(err.message);
+            } finally {
+                setLoading(false);
+            }
+        }
+        fetchArticle();
+    },[articleId]);
+    
+    if (loading) {
+        return (
+            <div className={styles.loading}>
+                <div className="spinner"></div>
+                <p>Загружаем статью ...</p>
+            </div>
+        );
+    }
+    if (error) {
+        return (
+            <div className={styles.error}>
+                <h3>Ошибка загрузки</h3>
+                <p>{error}</p>
+                <button onClick={()=>window.location.reload()}>Попробовать еще</button>
+            </div>
+        );
+    }
+    if (!article) {
+        return (
+            <div className={styles.empty}>
+                <p>Статья не найдена</p>
+            </div>
+        );
+    }
+    return (
+        <div className={styles.article}>
+            <h1>{article.title}</h1>
+            <div className="article-meta">
+                <span>Автор: {article.author}</span>
+                <span>Дата: {new Date(article.createDate).toLocaleDateString()}</span>
+            </div>
+            <div className="article-body">{article.content}</div>
+        </div>
+    );
+}
+
+function ProjectDashboard({ projects }) {
+    return (
+        <div className={styles.dashboard}>
+            <h1>Панель управления проектами</h1>
+            {projects.map(project => (
+                <div key={project.id} className={styles.project}>
+                    <h2>{project.name}</h2>
+                    <span className={styles.project_status}>{project.status}</span>
+                    <p className={styles.project_description}>{project.description}</p>
+                    
+                    {project.tasks.length >0 && (
+                    <div className={styles.tasks}>
+                        {project.tasks.map(task => (
+                            <div className={styles.task_card} key={task.id}>
+                            <h4>{task.title}</h4>
+                            <p>{task.description}</p>
+                            </div>
+                        ))}
+                    </div>
+                    )}
+                </div>
+            ))}
+        </div>
+    )
+}
+
+function Product({ name, brand, price, imageUrl }) {
 	const [isLiked, setIsLiked] = React.useState(false)
 
 	const toggleLike = () => {
@@ -111,8 +148,7 @@ function Product({ name, brand, price, url }) {
 
 	return (
 		<div className={styles.product}>
-			<img src={SneakersImage} alt='' />
+			<img src={imageUrl} alt='' />
-			<ToolTip />
 			<div className={styles.content}>
 				<div className={styles.title}>
 					<h4>{name}</h4>
@@ -143,60 +179,65 @@ function Product({ name, brand, price, url }) {
 	)
 }
 
-function MyComponent({ children }) {
-    return <div className="wrapper">{children}</div>;
-}
-
-function RowList({ children }) {
-    return (
-        <div className="rowList">
-            {children.map(child => (
-                <div className="row">{child}</div>
-            ))}
-            <p>{React.Children.count(children)}</p>
-        </div>
-    );
-}
-
 function App() {
-    const [products,setProducts] = React.useState([]);
+	const [products, setProducts] = React.useState([])
 
 	const getProducts = async () => {
-        const responce = await fetch('http://localhost:8000/products');
+		const response = await fetch('http://localhost:8000/products')
-        const data = await responce.json();
+		const data = await response.json()
-        setProducts(data);
+		setProducts(data)
 	}
+
 	React.useEffect(() => {
-        getProducts();
+		getProducts()
-    },[]);
+	}, [])
-    console.log({...products});
+    
 	return (
 		<>
 			<div className={styles.container}>
 				<Header />
 			</div>
 			<div className={styles.container}>
+			    {products.length > 0 ? (
                         <ul className={styles.list}>
                             {products.map(product => (
-                        <li>
+                                <li key={product.id}>
                                     <Product {...product} />
                                 </li>
                             ))}
                         </ul>
-            <MyComponent>
+                    ) : (
-                <h4>Заголовок</h4>
+                        <h3>Список товаров пуст</h3>
-                <p>Привет!</p>
+                    )
-            </MyComponent>
+                }
-            <ol>
-            <RowList>
-                <li>первый</li>
-                <li>второй</li>
-                <li>третий</li>
-            </RowList>
-            </ol>
 			</div>
 		</>
 	)
 }
 
-export default App
+function App2() {
+	const [projects, setProjects] = React.useState([])
+
+	const getProjects = async () => {
+		const response = await fetch('http://localhost:8000/projects')
+		const data = await response.json()
+		setProjects(data)
+	}
+
+	React.useEffect(() => {
+		getProjects()
+	}, [])
+
+    return (
+        <>
+			<div className={styles.container}>
+				<Header />
+			</div>
+			<div className={styles.container}>
+                <ProjectDashboard projects={projects} />
+            </div>
+        </>
+    )
+}
+
+export default App2

src/App.module.scss

@@ -11,6 +11,13 @@
 	border-bottom-left-radius: 10px;
 	border-bottom-right-radius: 10px;
     
+    nav {
+    	display: flex;
+	    justify-content: space-around;
+        flex-direction: row;
+	    align-items: center;
+    }
+    
 	div {
 		&:first-child {
 			display: flex;
@@ -61,6 +68,14 @@
 .container {
 	max-width: 1220px;
 	margin: 0 auto;
+    .article {
+        text-align: center;
+        background-color: lightgray;
+    }
+    .error {
+        text-align: center;
+        background-color: lightcoral;
+    }
 }
 
 .list {