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

db.json

@@ -0,0 +1,55 @@
+{
+	"products": [
+		{
+			"id": 1,
+			"name": "Sneakers Red & White 2025",
+			"brand": "NIKE",
+			"price": 38.0,
+			"imageUrl": "./src/assets/images/sneakers-image.jpg"
+		},
+		{
+			"id": 2,
+			"name": "Sneakers Red & White 2025",
+			"brand": "NIKE",
+			"price": 38.0,
+			"imageUrl": "./src/assets/images/sneakers-image.jpg"
+		},
+		{
+			"id": 3,
+			"name": "Sneakers Red & White 2025",
+			"brand": "NIKE",
+			"price": 38.0,
+			"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

@@ -5,6 +5,7 @@
 	"type": "module",
 	"scripts": {
 		"dev": "vite",
+		"server": "json-server --watch db.json --port 8000",
 		"build": "vite build",
 		"lint": "eslint .",
 		"preview": "vite preview"

src/App.jsx

@@ -1,7 +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 Header() {
 	const handleChange = event => {
@@ -15,15 +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 Product() {
+function UserMenu({ userName }) {
+    const [loggedin,setLoggedin] = useState(false);
+    const [role, setRole] = useState('user');
+    
+    
+    if (loggedin) {
+        return (
+            <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">
+            <button onClick={() => setLoggedin(true)}>Войти</button>
+        </div>
+    );
+}
+
+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 = () => {
@@ -36,10 +148,10 @@ function Product() {
 
 	return (
 		<div className={styles.product}>
-			<img src={SneakersImage} alt='' />
+			<img src={imageUrl} alt='' />
 			<div className={styles.content}>
 				<div className={styles.title}>
-					<h4>Sneakers Red & White 2025</h4>
+					<h4>{name}</h4>
 					<div className={styles.actions}>
 						<button
 							className={styles.likeButton}
@@ -60,34 +172,72 @@ function Product() {
 						<button onClick={handleAddClick}>+</button>
 					</div>
 				</div>
-				<p className={styles.description}>NIKE</p>
+				<p className={styles.description}>{brand}</p>
-				<p className={styles.price}>$38.00</p>
+				<p className={styles.price}>${price}</p>
 			</div>
 		</div>
 	)
 }
 
 function App() {
+	const [products, setProducts] = React.useState([])
+
+	const getProducts = async () => {
+		const response = await fetch('http://localhost:8000/products')
+		const data = await response.json()
+		setProducts(data)
+	}
+
+	React.useEffect(() => {
+		getProducts()
+	}, [])
+    
 	return (
 		<>
 			<div className={styles.container}>
 				<Header />
 			</div>
 			<div className={styles.container}>
+			    {products.length > 0 ? (
                         <ul className={styles.list}>
-					<li>
+                            {products.map(product => (
-						<Product />
+                                <li key={product.id}>
-					</li>
+                                    <Product {...product} />
-					<li>
-						<Product />
-					</li>
-					<li>
-						<Product />
                                 </li>
+                            ))}
                         </ul>
+                    ) : (
+                        <h3>Список товаров пуст</h3>
+                    )
+                }
 			</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 {