diff --git a/package.json b/package.json
new file mode 100644
index 0000000..5a4d4bf
--- /dev/null
+++ b/package.json
@@ -0,0 +1,19 @@
+{
+  "name": "user-profile-dashboard",
+  "version": "1.0.0",
+  "private": true,
+  "dependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-router-dom": "^6.14.1"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject"
+  },
+  "devDependencies": {
+    "react-scripts": "5.0.1"
+  }
+}
diff --git a/src/App.jsx b/src/App.jsx
new file mode 100644
index 0000000..52fb051
--- /dev/null
+++ b/src/App.jsx
@@ -0,0 +1,20 @@
+import React from 'react';
+import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
+import UserProfileDashboard from './components/UserProfileDashboard';
+import { AuthProvider } from './contexts/AuthContext';
+
+function App() {
+  return (
+    <AuthProvider>
+      <Router>
+        <Routes>
+          <Route path="/" element={<UserProfileDashboard />} />
+          <Route path="/settings" element={<div>Settings Page</div>} />
+          <Route path="/messages" element={<div>Messages Page</div>} />
+        </Routes>
+      </Router>
+    </AuthProvider>
+  );
+}
+
+export default App;
diff --git a/src/api/userApi.js b/src/api/userApi.js
new file mode 100644
index 0000000..34f5415
--- /dev/null
+++ b/src/api/userApi.js
@@ -0,0 +1,13 @@
+export async function fetchUserData(userId, token) {
+  const response = await fetch(`https://api.example.com/users/${userId}`, {
+    headers: {
+      Authorization: `Bearer ${token}`
+    }
+  });
+
+  if (!response.ok) {
+    throw new Error('API error');
+  }
+
+  return await response.json();
+}
diff --git a/src/components/.DS_Store b/src/components/.DS_Store
new file mode 100644
index 0000000..5008ddf
Binary files /dev/null and b/src/components/.DS_Store differ
diff --git a/src/components/UserInfo.jsx b/src/components/UserInfo.jsx
new file mode 100644
index 0000000..cdf4c80
--- /dev/null
+++ b/src/components/UserInfo.jsx
@@ -0,0 +1,11 @@
+import React from 'react';
+
+export default function UserInfo({ info }) {
+  return (
+    <section>
+      <h2>User Information</h2>
+      <p>Email: {info.email}</p>
+      <p>Location: {info.location}</p>
+    </section>
+  );
+}
diff --git a/src/components/UserProfileDashboard.jsx b/src/components/UserProfileDashboard.jsx
new file mode 100644
index 0000000..0fd9057
--- /dev/null
+++ b/src/components/UserProfileDashboard.jsx
@@ -0,0 +1,49 @@
+import React, { useContext, useEffect, useState } from 'react';
+import { AuthContext } from '../contexts/AuthContext';
+import { fetchUserData } from '../api/userApi';
+import UserInfo from './UserInfo';
+import UserStats from './UserStats';
+import { Link } from 'react-router-dom';
+
+export default function UserProfileDashboard() {
+  const { userId, token } = useContext(AuthContext);
+  const [userData, setUserData] = useState(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+
+  useEffect(() => {
+    if (!userId || !token) {
+      setError('User not authenticated');
+      setLoading(false);
+      return;
+    }
+
+    fetchUserData(userId, token)
+      .then(data => {
+        setUserData(data);
+        setLoading(false);
+      })
+      .catch(err => {
+        setError('Failed to fetch user data');
+        setLoading(false);
+      });
+  }, [userId, token]);
+
+  if (loading) return <div>Loading user data...</div>;
+  if (error) return <div>Error: {error}</div>;
+
+  return (
+    <div className="user-profile-dashboard">
+      <h1>Welcome, {userData.name}</h1>
+      <UserInfo info={userData.info} />
+      <UserStats stats={userData.stats} />
+
+      <nav>
+        <ul>
+          <li><Link to="/settings">Settings</Link></li>
+          <li><Link to="/messages">Messages</Link></li>
+        </ul>
+      </nav>
+    </div>
+  );
+}
diff --git a/src/components/UserStats.jsx b/src/components/UserStats.jsx
new file mode 100644
index 0000000..9709bc7
--- /dev/null
+++ b/src/components/UserStats.jsx
@@ -0,0 +1,14 @@
+import React from 'react';
+
+export default function UserStats({ stats }) {
+  return (
+    <section>
+      <h2>User Stats</h2>
+      <ul>
+        <li>Posts: {stats.posts}</li>
+        <li>Followers: {stats.followers}</li>
+        <li>Following: {stats.following}</li>
+      </ul>
+    </section>
+  );
+}
diff --git a/src/contexts/AuthContext.jsx b/src/contexts/AuthContext.jsx
new file mode 100644
index 0000000..0c9e7df
--- /dev/null
+++ b/src/contexts/AuthContext.jsx
@@ -0,0 +1,17 @@
+import React, { createContext, useState } from 'react';
+
+export const AuthContext = createContext({
+  userId: null,
+  token: null,
+});
+
+export function AuthProvider({ children }) {
+  const [userId, setUserId] = useState('12345');
+  const [token, setToken] = useState(null); // TODO: Provide a valid token after user login
+
+  return (
+    <AuthContext.Provider value={{ userId, token }}>
+      {children}
+    </AuthContext.Provider>
+  );
+}