Создана страница OtherProfile, создан CSS к странице OtherProfile

src/OtherProfile.js

@@ -1,19 +1,51 @@
-import React, { useState, useEffect } from 'react';
+import React, {useState, useEffect} from 'react';
-import { useParams } from 'react-router-dom';
+import './css/OtherProfile.css';
+import {useParams, useNavigate} from 'react-router-dom';
 import axios from 'axios';
 import Header from './Header';
 
 const OtherProfile = () => {
-    const { id } = useParams();
+    const {id} = useParams('');
     const [user, setUser] = useState(null);
+    const [avatar, setAvatar] = useState('');
     const [error, setError] = useState('');
+    const navigate = useNavigate();
+    const [user_description, setUserDescription] = useState('');
+
+    useEffect(() => {
+        const checkSession = async () => {
+            try {
+                const response = await axios.get('/api/users/' + id);
+                setUser(response.data.display_name);
+                setAvatar(response.data.avatar_url);
+                if (response.data.user_description === '') {
+                    setUserDescription('Описание отсутствует')
+                } else {
+                    setUserDescription(response.data.user_description);
+                }
+            } catch (err) {
+                setError('Вы не авторизованы');
+                setTimeout(() => {
+                    navigate('/login');
+                }, 1500);
+            }
+        };
+        checkSession();
+    }, []);
 
     return (
-        <><Header />
+        <><Header/>
-		<div className="">
+            <div className="profile-page user-info">
-      		
+                {error && <div className="error">{error}</div>}
-    	</div></>
+                <div className="profile-info">
-	);
+                    <div className="name-with-avatar">
+                        <div className="user-name">{user}</div>
+                        <img className="profile-avatar" src={avatar}/>
+                    </div>
+                    <div className="user-description">{user_description}</div>
+                </div>
+            </div>
+        </>
+    );
 }
-
 export default OtherProfile;

src/css/OtherProfile.css

@@ -0,0 +1,47 @@
+.profile-info {
+    margin: 0 0 0.5rem 0;
+}
+
+.name-with-avatar {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    flex-wrap: wrap;
+}
+
+.user-name {
+    margin: 0;
+    font-size: 5rem;
+    font-weight: 600;
+    color: #CAD1D8;
+    flex: 1 1 auto;
+    word-break: break-word;
+    overflow-wrap: break-word;
+}
+
+.profile-avatar {
+    width: 120px;
+    height: 120px;
+    border-radius: 50%;
+    object-fit: cover;
+    border: 4px solid #CAD1D8;
+    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
+    margin-left: 1rem;
+}
+
+.user-description {
+    padding: 1rem 1.5rem;
+    border: 3px solid #4A5568;
+    border-radius: 12px;
+    background-color: #2D3748;
+    font-size: 1.2rem;
+    font-weight: 450;
+    color: #CAD1D8;
+    text-align: start;
+    word-break: break-word;
+    word-wrap: break-word;
+    overflow-wrap: break-word;
+    max-width: 100%;
+    hyphens: auto;
+    margin-top: 1rem;
+}

src/setupProxy.js

@@ -12,7 +12,7 @@ module.exports = function(app) {
     app.use(
         '/static/avatars',
         createProxyMiddleware({
-            target: 'http://back.fool-stack.ru',
+            target: 'https://back.fool-stack.ru',
             changeOrigin: true,
         })
     );