Develop a full-stack, interactive web application named `MySpaceBlastFromPast` that exhaustively emulates the core visual and functional experience of **MySpace as it appeared specifically between 2005 and 2007**, replicating its default aesthetics (light blue body background #EBF2F9, specific link colors, blocky layouts) and iconic features.

The entire project must be structured as a **PNPM monorepo**, containing exactly two distinct packages:
1. `frontend/`: A React 18.x application using TypeScript 5.x (TSX) and Vite 5.x.
2. `backend/`: A Node.js 20.x Express 4.x API using TypeScript.

**I. `backend/` Specifications:**

1. **Technology:** Node.js 20.x, Express 4.x, TypeScript, `ts-node` for development, `nodemon`.
2. **Data Storage:** Implement a purely **in-memory JSON object database**. All data (users, profiles, friends, posts, comments, messages) must be stored in simple JavaScript arrays of objects or nested JSON structures, initialized with a small set of mock data (at least 3 users with full profiles) on server startup. There must be NO external database dependency (e.g., SQLite, PostgreSQL, MongoDB).
3. **API Endpoints:** Develop a RESTful API with the following essential endpoints:
* `POST /api/auth/login`: Authenticate a user, returning a mock JWT (just a base64 encoded string, no verification needed) or simple session ID.
* `POST /api/auth/signup`: Register a new user.
* `GET /api/users/:username`: Retrieve a specific user's public profile data (blurbs, mood, friends, music, custom CSS, blog posts, comments).
* `GET /api/users/:username/friends`: Retrieve the full list of a user's friends.
* `PUT /api/users/:username/profile`: Update the authenticated user's profile information (blurbs, mood, music URL, custom CSS). Requires authentication.
* `PUT /api/users/:username/top-friends`: Update the authenticated user's Top 8 friends list (exact 8 IDs). Requires authentication.
* `POST /api/users/:username/comments`: Post a new comment on a user's profile. Requires authentication.
* `GET /api/users/:username/comments`: Retrieve all comments for a user's profile.
* `POST /api/users/:username/friend-request`: Send a friend request (simple mock implementation, no acceptance flow needed, just add to a pending list). Requires authentication.
* `GET /api/messages`: Retrieve messages for the authenticated user.
* `POST /api/messages`: Send a message from the authenticated user.
* `GET /api/blog/:username`: Retrieve blog posts for a user.
* `POST /api/blog`: Create a new blog post for the authenticated user.
4. **Authentication:** Implement a basic token-based authentication (mock JWT stored in `localStorage` on the frontend, checked by backend middleware) for all protected routes.
5. **Error Handling:** Implement basic error handling middleware for 404 Not Found and 500 Internal Server Error, returning JSON responses.
6. **CORS:** Configure CORS middleware to allow requests from the `frontend/` origin (default Vite development port `http://localhost:5173`).
7. **Project Structure (`backend/`):**
* `src/`:
* `controllers/`: Request handlers for API routes.
* `services/`: Business logic, interacting with the in-memory data store.
* `middleware/`: Authentication and error handling.
* `data/`: `db.ts` containing the in-memory JSON data structure and initial mock data.
* `routes/`: Express router definitions.
* `types/`: TypeScript interfaces for data models.
* `app.ts`: Express application setup.
* `server.ts`: Entry point to start the server.

**II. `frontend/` Specifications:**

1. **Technology:** React 18.x, TypeScript 5.x (TSX), Vite 5.x, React Router DOM 6.x.
2. **Styling:**
* Use **Styled Components 6.x** for all component-level styling.
* Replicate the *exact* MySpace 2005-2007 default visual aesthetic: light blue body background (`#EBF2F9`), standard MySpace header/footer layout, default link colors, and the characteristic blocky, often centered content areas with thin borders.
* Implement **dynamic custom CSS injection** for user profiles: the `ProfilePage` component must accept a raw CSS string from the `backend/`'s user data and inject it into a `<style>` tag *scoped specifically to the profile content area*, allowing users to override backgrounds, fonts, and colors of their profile. This must be the *only* mechanism for profile customization.
3. **Core Pages/Routes:**
* `/`: General "Home" page with a mock news feed/updates section.
* `/login`: User login form.
* `/signup`: User registration form.
* `/profile/:username`: Dynamic user profile page.
* `/friends/:username`: User's friends list page.
* `/edit-profile`: Authenticated user's profile editing page.
* `/messages`: Simple inbox/outbox for private messages.
* `/blog/:username`: User's blog page.
* `/music/:username`: User's music player page.
4. **Essential Components & Functionalities (for 2005-2007 MySpace emulation):**
* **Global Navigation:** Replicate the iconic MySpace top navigation bar (Home, Profile, Friends, Mail, Blog, etc.) and footer links.
* **Profile Page (`/profile/:username`):**
* **User Header:** Display username, profile photo (mock image), last online status (mock text).
* **"Blurbs" Section:** Display "About Me," "Who I'd Like To Meet," "Interests" as editable text areas for the *authenticated user* viewing *their own* profile. Otherwise, read-only.
* **"MySpace URL":** Display `myspace.com/:username` link.
* **"Mood":** Display current mood (mock text).
* **Top 8 Friends:** A section displaying exactly 8 user avatars/names (from backend data) linked to their profiles. The authenticated user *must* be able to reorder their own Top 8 using drag-and-drop or simple reordering buttons.
* **Comments Section:** Display comments fetched from the backend. Authenticated users *must* be able to post new comments, which persist via API. Each comment includes commenter's name, profile picture, and timestamp.
* **Blog Section:** Display recent blog posts from the user.
* **Music Player:** Embed a single HTML `<audio>` element with visible play/pause/stop controls, playing an MP3 URL fetched from the user's profile data.
* **Friends List Page (`/friends/:username`):** Display a paginated list of friends with profile pictures and names. An "Add Friend" button must appear on other users' profiles, triggering a mock friend request via API.
* **Login/Signup:** Implement functional forms. Upon successful login, store the mock JWT from the backend in `localStorage` and redirect to the authenticated user's own profile. Implement a "Logout" button.
* **Form Handling:** Use `useState` for form inputs. No external form libraries.
* **API Interaction:** Use `fetch` API or `axios` for all backend communication.
* **State Management:** Use React Context API for managing global authentication state (current user, token). `useState` and `useEffect` for local component state.
5. **Project Structure (`frontend/`):**
* `src/`:
* `assets/`: Images (e.g., default profile pic, MySpace logo), mock audio files.
* `components/`: Reusable UI components (e.g., `Button.tsx`, `FriendCard.tsx`, `CommentBox.tsx`, `MusicPlayer.tsx`, `TopFriends.tsx`, `MySpaceHeader.tsx`, `MySpaceFooter.tsx`).
* `pages/`: Top-level page components (e.g., `HomePage.tsx`, `ProfilePage.tsx`, `LoginPage.tsx`, `EditProfilePage.tsx`).
* `hooks/`: Custom React hooks (e.g., `useAuth.ts` for auth context, `useApi.ts` for API calls).
* `contexts/`: React Context API providers (e.g., `AuthContext.tsx`).
* `services/`: API interaction logic (e.g., `api.ts`, `authService.ts`, `userService.ts`, `postService.ts`).
* `styles/`: `GlobalStyles.ts` for Styled Components base styles, `theme.ts` (if applicable).
* `types/`: TypeScript interfaces for API responses and data models.
* `App.tsx`: Main application component, including Router setup.
* `main.tsx`: Entry point for Vite.

**III. Monorepo Setup & General Requirements:**

1. **PNPM:** Use `pnpm workspace` to manage `frontend/` and `backend/` as separate packages within a single repository.
2. **Dependencies:** Manage all package dependencies within their respective `package.json` files.
3. **Development Setup:** Provide clear `pnpm run dev:frontend` and `pnpm run dev:backend` scripts in the root `package.json` to concurrently start both the React dev server (defaulting to port 5173) and the Node.js API server (defaulting to port 3001).
4. **Code Quality:** All code (TSX, TS) must adhere to strict TypeScript type safety, using appropriate interfaces and types. Follow common React best practices (component composition, minimal prop drilling, hooks usage).
5. **Definition of "Full Emulator":** The emulator is considered "full" if it provides all specified pages and their core interactive functionalities (login, profile view, profile editing including Top 8 and custom CSS, comments, basic messaging view, music play/pause) with the visual fidelity of MySpace 2005-2007. Missing non-core features like bulletins, groups, or events are acceptable omissions for this "full" definition.
6. **No External Libraries/APIs:** Strictly no use of external social media APIs, complex UI kits, or database systems beyond what is explicitly stated (React, Styled Components, React Router, Vite, Node.js, Express, in-memory JSON data).

README.md

@@ -1,10 +1,13 @@
 ---
-title: Myspacetimemachine
-emoji: 📊
-colorFrom: red
-colorTo: blue
+title: MySpaceTimeMachine 🚀
+colorFrom: yellow
+colorTo: pink
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://deepsite.hf.co).

index.html

@@ -1,19 +1,223 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
+<!DOCTYPE html>
+<html lang="en" class="dark">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>MySpace Time Machine</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+    <script>
+        tailwind.config = {
+            darkMode: 'class',
+            theme: {
+                extend: {
+                    colors: {
+                        myspace: {
+                            light: '#EBF2F9',
+                            link: '#3B5998',
+                            accent: '#6699CC'
+                        }
+                    }
+                }
+            }
+        }
+    </script>
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            background-color: #111 !important;
+        }
+        .myspace-header {
+            background: linear-gradient(to bottom, #333, #222);
+            border-bottom: 1px solid #444;
+        }
+        .myspace-nav a:hover {
+            color: #6699CC !important;
+        }
+        .profile-box {
+            background-color: #222;
+            border: 1px solid #444;
+        }
+        .comment-box {
+            background-color: #1a1a1a;
+            border: 1px solid #333;
+        }
+    </style>
+</head>
+<body class="bg-gray-900 text-gray-200">
+    <!-- MySpace Header -->
+    <header class="myspace-header py-2 px-4 shadow-md">
+        <div class="container mx-auto flex justify-between items-center">
+            <div class="flex items-center space-x-4">
+                <h1 class="text-2xl font-bold text-myspace-accent">MySpace Time Machine</h1>
+                <nav class="hidden md:flex space-x-6 myspace-nav">
+                    <a href="#" class="text-gray-300 hover:text-myspace-accent">Home</a>
+                    <a href="#" class="text-gray-300 hover:text-myspace-accent">Browse</a>
+                    <a href="#" class="text-gray-300 hover:text-myspace-accent">Search</a>
+                    <a href="#" class="text-gray-300 hover:text-myspace-accent">Invite</a>
+                    <a href="#" class="text-gray-300 hover:text-myspace-accent">Mail</a>
+                </nav>
+            </div>
+            <div class="flex items-center space-x-4">
+                <a href="#" class="text-gray-300 hover:text-myspace-accent">Help</a>
+                <a href="#" class="text-gray-300 hover:text-myspace-accent">Sign Up</a>
+                <a href="#" class="text-gray-300 hover:text-myspace-accent">Login</a>
+            </div>
+        </div>
+    </header>
+
+    <!-- Main Content -->
+    <main class="container mx-auto py-6 px-4">
+        <div class="grid grid-cols-1 md:grid-cols-4 gap-6">
+            <!-- Left Column -->
+            <div class="md:col-span-1">
+                <div class="profile-box rounded p-4 mb-6">
+                    <div class="text-center mb-4">
+                        <img src="http://static.photos/people/200x200/42" alt="Profile" class="w-24 h-24 rounded-full mx-auto border-2 border-myspace-accent">
+                        <h2 class="text-xl font-bold mt-2">Username</h2>
+                        <p class="text-sm text-gray-400">Last Login: 5 minutes ago</p>
+                    </div>
+                    <div class="mb-4">
+                        <h3 class="font-bold text-myspace-accent mb-2">MySpace URL</h3>
+                        <p class="text-sm">myspace.com/username</p>
+                    </div>
+                    <div class="mb-4">
+                        <h3 class="font-bold text-myspace-accent mb-2">Mood</h3>
+                        <p class="text-sm">Happy 😊</p>
+                    </div>
+                </div>
+
+                <div class="profile-box rounded p-4 mb-6">
+                    <h3 class="font-bold text-myspace-accent mb-3">Top 8 Friends</h3>
+                    <div class="grid grid-cols-4 gap-2">
+                        <div class="text-center">
+                            <img src="http://static.photos/people/100x100/1" alt="Friend" class="w-12 h-12 rounded-full mx-auto border border-myspace-accent">
+                            <p class="text-xs mt-1">Friend1</p>
+                        </div>
+                        <div class="text-center">
+                            <img src="http://static.photos/people/100x100/2" alt="Friend" class="w-12 h-12 rounded-full mx-auto border border-myspace-accent">
+                            <p class="text-xs mt-1">Friend2</p>
+                        </div>
+                        <div class="text-center">
+                            <img src="http://static.photos/people/100x100/3" alt="Friend" class="w-12 h-12 rounded-full mx-auto border border-myspace-accent">
+                            <p class="text-xs mt-1">Friend3</p>
+                        </div>
+                        <div class="text-center">
+                            <img src="http://static.photos/people/100x100/4" alt="Friend" class="w-12 h-12 rounded-full mx-auto border border-myspace-accent">
+                            <p class="text-xs mt-1">Friend4</p>
+                        </div>
+                        <div class="text-center">
+                            <img src="http://static.photos/people/100x100/5" alt="Friend" class="w-12 h-12 rounded-full mx-auto border border-myspace-accent">
+                            <p class="text-xs mt-1">Friend5</p>
+                        </div>
+                        <div class="text-center">
+                            <img src="http://static.photos/people/100x100/6" alt="Friend" class="w-12 h-12 rounded-full mx-auto border border-myspace-accent">
+                            <p class="text-xs mt-1">Friend6</p>
+                        </div>
+                        <div class="text-center">
+                            <img src="http://static.photos/people/100x100/7" alt="Friend" class="w-12 h-12 rounded-full mx-auto border border-myspace-accent">
+                            <p class="text-xs mt-1">Friend7</p>
+                        </div>
+                        <div class="text-center">
+                            <img src="http://static.photos/people/100x100/8" alt="Friend" class="w-12 h-12 rounded-full mx-auto border border-myspace-accent">
+                            <p class="text-xs mt-1">Friend8</p>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="profile-box rounded p-4">
+                    <div class="flex justify-between items-center mb-2">
+                        <h3 class="font-bold text-myspace-accent">Music Player</h3>
+                        <i data-feather="music"></i>
+                    </div>
+                    <div class="flex justify-center mt-4">
+                        <audio controls class="w-full">
+                            <source src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3" type="audio/mpeg">
+                            Your browser does not support the audio element.
+                        </audio>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Right Column -->
+            <div class="md:col-span-3">
+                <div class="profile-box rounded p-6 mb-6">
+                    <h2 class="text-2xl font-bold text-myspace-accent mb-4">About Me</h2>
+                    <p class="mb-4">Hey there! Welcome to my MySpace profile. I'm a web developer who loves nostalgic websites from the 2000s. Add me as a friend and leave a comment!</p>
+                    
+                    <h2 class="text-2xl font-bold text-myspace-accent mt-6 mb-4">Who I'd Like To Meet</h2>
+                    <p>Other nostalgic internet lovers, web developers, and anyone who remembers the golden age of the internet!</p>
+                </div>
+
+                <div class="profile-box rounded p-6 mb-6">
+                    <div class="flex justify-between items-center mb-4">
+                        <h2 class="text-2xl font-bold text-myspace-accent">Comments (3)</h2>
+                        <button class="bg-myspace-accent hover:bg-blue-700 text-white px-3 py-1 rounded text-sm">Add Comment</button>
+                    </div>
+                    
+                    <div class="comment-box rounded p-4 mb-4">
+                        <div class="flex items-start">
+                            <img src="http://static.photos/people/50x50/10" alt="Commenter" class="w-10 h-10 rounded-full mr-3">
+                            <div>
+                                <div class="flex items-center">
+                                    <p class="font-bold text-myspace-accent">Friend1</p>
+                                    <span class="text-xs text-gray-400 ml-2">2 hours ago</span>
+                                </div>
+                                <p class="mt-1">Hey there! Love your profile! The dark theme looks awesome!</p>
+                            </div>
+                        </div>
+                    </div>
+                    
+                    <div class="comment-box rounded p-4 mb-4">
+                        <div class="flex items-start">
+                            <img src="http://static.photos/people/50x50/20" alt="Commenter" class="w-10 h-10 rounded-full mr-3">
+                            <div>
+                                <div class="flex items-center">
+                                    <p class="font-bold text-myspace-accent">Friend2</p>
+                                    <span class="text-xs text-gray-400 ml-2">5 hours ago</span>
+                                </div>
+                                <p class="mt-1">This takes me back! The music player is a nice touch.</p>
+                            </div>
+                        </div>
+                    </div>
+                    
+                    <div class="comment-box rounded p-4">
+                        <div class="flex items-start">
+                            <img src="http://static.photos/people/50x50/30" alt="Commenter" class="w-10 h-10 rounded-full mr-3">
+                            <div>
+                                <div class="flex items-center">
+                                    <p class="font-bold text-myspace-accent">Friend3</p>
+                                    <span class="text-xs text-gray-400 ml-2">1 day ago</span>
+                                </div>
+                                <p class="mt-1">Remember when we used to spend hours customizing our profiles? Those were the days!</p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </main>
+
+    <!-- MySpace Footer -->
+    <footer class="bg-gray-800 text-gray-400 py-4 px-4 text-sm mt-8">
+        <div class="container mx-auto">
+            <div class="flex flex-wrap justify-center space-x-4 mb-2">
+                <a href="#" class="hover:text-myspace-accent">About</a>
+                <a href="#" class="hover:text-myspace-accent">FAQ</a>
+                <a href="#" class="hover:text-myspace-accent">Terms</a>
+                <a href="#" class="hover:text-myspace-accent">Privacy</a>
+                <a href="#" class="hover:text-myspace-accent">Safety Tips</a>
+                <a href="#" class="hover:text-myspace-accent">Contact</a>
+            </div>
+            <div class="text-center">
+                <p>© 2023 MySpace Time Machine - Reliving the 2000s Internet</p>
+            </div>
+        </div>
+    </footer>
+
+    <script>
+        feather.replace();
+    </script>
+</body>
 </html>