diff --git a/.gitignore b/.gitignore
new file mode 100644
index 000000000..6967e2a83
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,29 @@
+# Dependencies
+node_modules/
+ 
+# Build outputs
+dist/
+build/
+ 
+# Environment variables
+.env
+.env.local
+.env.production
+ 
+# IDE files
+.vscode/
+.idea/
+ 
+# OS files
+.DS_Store
+Thumbs.db
+ 
+# Logs
+*.log
+npm-debug.log*
+ 
+# Package manager files
+package-lock.json
+yarn.lock
+pnpm-lock.yaml
+EOF
\ No newline at end of file
diff --git a/backend/.env.example b/backend/.env.example
new file mode 100644
index 000000000..82cddd46c
--- /dev/null
+++ b/backend/.env.example
@@ -0,0 +1,8 @@
+# Backend port
+PORT=5000
+
+# MongoDB connection string
+MONGO_URI=mongodb://127.0.0.1:27017/vi-notes
+
+# Secret key used to create login tokens
+JWT_SECRET=change-this-secret-key
diff --git a/backend/.gitignore b/backend/.gitignore
new file mode 100644
index 000000000..b3eb616a3
--- /dev/null
+++ b/backend/.gitignore
@@ -0,0 +1,3 @@
+node_modules/
+.env
+dist/
\ No newline at end of file
diff --git a/backend/package.json b/backend/package.json
new file mode 100644
index 000000000..6109f00d2
--- /dev/null
+++ b/backend/package.json
@@ -0,0 +1,32 @@
+{
+  "name": "backend",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "dev": "tsx watch src/server.ts"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "type": "module",
+  "dependencies": {
+    "bcryptjs": "^3.0.3",
+    "cors": "^2.8.6",
+    "dotenv": "^17.4.2",
+    "express": "^5.2.1",
+    "jsonwebtoken": "^9.0.3",
+    "mongoose": "^9.6.2",
+    "zod": "^4.4.3"
+  },
+  "devDependencies": {
+    "@types/bcryptjs": "^2.4.6",
+    "@types/cors": "^2.8.19",
+    "@types/express": "^5.0.6",
+    "@types/jsonwebtoken": "^9.0.10",
+    "@types/node": "^25.6.2",
+    "tsx": "^4.21.0",
+    "typescript": "^6.0.3"
+  }
+}
diff --git a/backend/src/config/database.ts b/backend/src/config/database.ts
new file mode 100644
index 000000000..d17beb7a0
--- /dev/null
+++ b/backend/src/config/database.ts
@@ -0,0 +1,32 @@
+import mongoose from "mongoose";
+
+// Gets environment variables or crashes if missing
+const getEnv = (key: string): string => {
+  const value = process.env[key];
+  if (!value) {
+    console.error(`Missing required environment variable: ${key}`);
+    console.error(
+      "Please check your .env file and ensure all required variables are set.",
+    );
+    process.exit(1);
+  }
+  return value;
+};
+
+// This function connects our backend to MongoDB.
+const connectDB = async () => {
+  try {
+    // Get MongoDB connection string from environment
+    const MONGO_URI = getEnv("MONGO_URI");
+
+    // Actually connect to MongoDB
+    await mongoose.connect(MONGO_URI);
+    console.log("MongoDB connected");
+  } catch (error) {
+    // If database connection fails, stop the backend.
+    console.error("MongoDB connection failed:", error);
+    process.exit(1);
+  }
+};
+
+export default connectDB;
diff --git a/backend/src/controllers/authController.ts b/backend/src/controllers/authController.ts
new file mode 100644
index 000000000..4d908eccd
--- /dev/null
+++ b/backend/src/controllers/authController.ts
@@ -0,0 +1,116 @@
+import { Request, Response } from "express";
+import bcrypt from "bcryptjs";
+import jwt from "jsonwebtoken";
+import User from "../models/User.js";
+import { registerSchema, loginSchema } from "../validation/authValidation.js";
+import { z } from "zod";
+
+// Simple helper to get required environment variables safely.
+const getEnv = (key: string): string => {
+  const value = process.env[key];
+  if (!value) {
+    console.error(`Missing required environment variable: ${key}`);
+    process.exit(1);
+  }
+  return value;
+};
+
+// This function handles new user registration.
+export const register = async (req: Request, res: Response) => {
+  // First we check if name, email, and password are valid.
+  const result = registerSchema.safeParse(req.body);
+  if (!result.success) {
+    res.status(400).json({ errors: z.treeifyError(result.error) });
+    return;
+  }
+
+  // After validation, we can safely use these values.
+  const { name, email, password } = result.data;
+
+  // Do not allow two accounts with the same email.
+  const exists = await User.findOne({ email });
+  if (exists) {
+    res.status(409).json({ error: "Email already registered" });
+    return;
+  }
+
+  // Hash the password so the real password is not stored in MongoDB.
+  const hashedPassword = await bcrypt.hash(password, 10);
+
+  // Save the new user in the database.
+  const user = await User.create({ name, email, password: hashedPassword });
+
+  // Create a token so the frontend knows the user is logged in.
+  const token = jwt.sign({ id: user._id }, getEnv("JWT_SECRET"), {
+    expiresIn: "7d",
+  });
+
+  // Send back user details without sending the password.
+  res.status(201).json({ token, user: { id: user._id, name, email } });
+};
+
+// This function handles login for an existing user.
+export const login = async (req: Request, res: Response) => {
+  // First we check if email and password are valid.
+  const result = loginSchema.safeParse(req.body);
+  if (!result.success) {
+    res.status(400).json({ errors: z.treeifyError(result.error) });
+    return;
+  }
+
+  const { email, password } = result.data;
+
+  // Find the account that uses this email.
+  const user = await User.findOne({ email });
+  if (!user) {
+    res.status(401).json({ message: "Invalid credentials" });
+    return;
+  }
+
+  // Compare the typed password with the hashed password in the database.
+  const match = await bcrypt.compare(password, user.password);
+  if (!match) {
+    res.status(401).json({ message: "Invalid credentials" });
+    return;
+  }
+
+  // If password is correct, create a new login token.
+  const token = jwt.sign({ id: user._id }, getEnv("JWT_SECRET"), {
+    expiresIn: "7d",
+  });
+
+  // Send back the token and basic user details.
+  res.json({ token, user: { id: user._id, name: user.name, email } });
+};
+
+// This function returns the current user from a valid JWT token.
+export const me = async (req: Request, res: Response) => {
+  try {
+    // The user ID is attached to the request by the authenticateToken middleware.
+    const userId = req.user?.id;
+
+    if (!userId) {
+      res.status(401).json({ error: "User not found" });
+      return;
+    }
+
+    // Find the user in the database.
+    const user = await User.findById(userId).select("-password");
+
+    if (!user) {
+      res.status(401).json({ error: "User not found" });
+      return;
+    }
+
+    // Return user details without the password.
+    res.json({
+      user: {
+        id: user._id,
+        name: user.name,
+        email: user.email,
+      },
+    });
+  } catch (error) {
+    res.status(500).json({ error: "Server error" });
+  }
+};
diff --git a/backend/src/middleware/auth.ts b/backend/src/middleware/auth.ts
new file mode 100644
index 000000000..4e0bfa549
--- /dev/null
+++ b/backend/src/middleware/auth.ts
@@ -0,0 +1,45 @@
+import { Request, Response, NextFunction } from "express";
+import jwt from "jsonwebtoken";
+
+// Simple helper to get required environment variables safely.
+const getEnv = (key: string): string => {
+  const value = process.env[key];
+  if (!value) {
+    console.error(`Missing required environment variable: ${key}`);
+    process.exit(1);
+  }
+  return value;
+};
+
+// This adds the user's ID to the request when a valid JWT is provided.
+export const authenticateToken = (req: Request, res: Response, next: NextFunction) => {
+  // Get the token from the Authorization header.
+  const authHeader = req.headers["authorization"];
+  const token = authHeader && authHeader.split(" ")[1]; // Bearer <token>
+
+  if (!token) {
+    res.status(401).json({ error: "Access token required" });
+    return;
+  }
+
+  // Verify the token with our secret key.
+  jwt.verify(token, getEnv("JWT_SECRET"), (err, decoded) => {
+    if (err) {
+      res.status(401).json({ error: "Invalid or expired token" });
+      return;
+    }
+
+    // Add the user's ID to the request for use in protected routes.
+    req.user = { id: (decoded as any).id };
+    next();
+  });
+};
+
+// Extend the Request type to include user information.
+declare global {
+  namespace Express {
+    interface Request {
+      user?: { id: string };
+    }
+  }
+}
diff --git a/backend/src/models/User.ts b/backend/src/models/User.ts
new file mode 100644
index 000000000..fcdcb84f9
--- /dev/null
+++ b/backend/src/models/User.ts
@@ -0,0 +1,24 @@
+import mongoose, { Document, Schema } from "mongoose";
+
+// This tells TypeScript what a user should contain.
+export interface IUser extends Document {
+  name: string;
+  email: string;
+  password: string;
+}
+
+// This tells MongoDB what fields to store for every user.
+const UserSchema: Schema = new Schema(
+  {
+    name: { type: String, required: true },
+    email: { type: String, required: true, unique: true },
+    password: { type: String, required: true },
+  },
+  {
+    // This adds createdAt and updatedAt automatically.
+    timestamps: true,
+  },
+);
+
+// This User model is used in controllers to create and find users.
+export default mongoose.model<IUser>("User", UserSchema);
diff --git a/backend/src/routes/authRoutes.ts b/backend/src/routes/authRoutes.ts
new file mode 100644
index 000000000..0a02762f6
--- /dev/null
+++ b/backend/src/routes/authRoutes.ts
@@ -0,0 +1,18 @@
+import { Router } from "express";
+import { register, login, me } from "../controllers/authController.js";
+import { authenticateToken } from "../middleware/auth.js";
+
+// This file connects auth URLs to their controller functions.
+const router = Router();
+
+// When frontend calls POST /api/auth/register, run the register function.
+router.post("/register", register);
+
+// When frontend calls POST /api/auth/login, run the login function.
+router.post("/login", login);
+
+// When frontend calls GET /api/auth/me, verify JWT and return current user.
+router.get("/me", authenticateToken, me);
+
+// server.ts uses this router under /api/auth.
+export default router;
diff --git a/backend/src/server.ts b/backend/src/server.ts
new file mode 100644
index 000000000..f9d75f295
--- /dev/null
+++ b/backend/src/server.ts
@@ -0,0 +1,35 @@
+import express from "express";
+import cors from "cors";
+import dotenv from "dotenv";
+import connectDB from "./config/database.js";
+import authRoutes from "./routes/authRoutes.js";
+
+// This loads values like MONGO_URI and JWT_SECRET from the .env file.
+dotenv.config();
+
+// This creates the Express backend app.
+const app = express();
+
+// cors allows the frontend to call this backend.
+app.use(cors());
+
+// This lets the backend read JSON data sent from forms.
+app.use(express.json());
+
+const PORT = process.env.PORT || 5000;
+
+// This route is just used to check if the backend is running.
+app.get("/", (req, res) => {
+  res.json({ message: "Vi-Notes API running" });
+});
+
+// All login and register routes start with /api/auth.
+app.use("/api/auth", authRoutes);
+
+// Connect to MongoDB before the server starts accepting requests.
+connectDB();
+
+// This starts the backend server.
+app.listen(PORT, () => {
+  console.log(`Server is running on port ${PORT}`);
+});
diff --git a/backend/src/validation/authValidation.ts b/backend/src/validation/authValidation.ts
new file mode 100644
index 000000000..e85f071f1
--- /dev/null
+++ b/backend/src/validation/authValidation.ts
@@ -0,0 +1,18 @@
+import { z } from "zod";
+
+// These are the backend rules for creating a new account.
+export const registerSchema = z.object({
+  name: z.string().min(2, "Name must be atleast 2 characters long"),
+  email: z.email("Invalid email address"),
+  password: z.string().min(6, "Password must be at least 6 characters long"),
+});
+
+// These are the backend rules for logging in.
+export const loginSchema = z.object({
+  email: z.email("Invalid email address"),
+  password: z.string().min(1, "Password is required"),
+});
+
+// These types are useful if we need the same shape in other backend files.
+export type RegisterInput = z.infer<typeof registerSchema>;
+export type LoginInput = z.infer<typeof loginSchema>;
diff --git a/backend/tsconfig.json b/backend/tsconfig.json
new file mode 100644
index 000000000..3bd9541fc
--- /dev/null
+++ b/backend/tsconfig.json
@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    /* Base Options */
+    "target": "ES2023", // Node 24 supports almost all ES2023 features natively
+    "module": "NodeNext", // Required for modern ESM in Node
+    "moduleResolution": "NodeNext", // Ensures imports work correctly in Node
+    "lib": ["ES2023"], // No "DOM" here because backend doesn't have a browser window
+
+    /* Build Settings */
+    "outDir": "./dist", // Where the compiled JS goes
+    "rootDir": "./src", // Where your TS source code lives
+    "noEmit": false, // MUST be false for backend so we can actually build it
+
+    /* Strictness & Safety */
+    "strict": true, // Enables all strict type-checking options
+    "noImplicitAny": true, // Prevents accidental "any" types
+    "esModuleInterop": true, // Allows you to import CommonJS packages (like bcryptjs) easily
+    "skipLibCheck": true, // Speeds up compilation by skipping type checks of node_modules
+
+    /* Cleanliness */
+    "removeComments": true, // Keeps the production JS files small
+    "sourceMap": true // Helps you debug the TS code even after it's compiled to JS
+  },
+  "include": ["src/**/*"],
+  "exclude": ["node_modules", "dist"]
+}
diff --git a/frontend/.env.example b/frontend/.env.example
new file mode 100644
index 000000000..4e7b888e8
--- /dev/null
+++ b/frontend/.env.example
@@ -0,0 +1,2 @@
+# Backend API URL used by the React app
+VITE_API_URL=http://localhost:5000
diff --git a/frontend/.gitignore b/frontend/.gitignore
new file mode 100644
index 000000000..bff37cddc
--- /dev/null
+++ b/frontend/.gitignore
@@ -0,0 +1,27 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+.env
+.env.*
+!.env.example
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/frontend/README.md b/frontend/README.md
new file mode 100644
index 000000000..7dbf7ebf3
--- /dev/null
+++ b/frontend/README.md
@@ -0,0 +1,73 @@
+# React + TypeScript + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Oxc](https://oxc.rs)
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/)
+
+## React Compiler
+
+The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation).
+
+## Expanding the ESLint configuration
+
+If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
+
+```js
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      // Other configs...
+
+      // Remove tseslint.configs.recommended and replace with this
+      tseslint.configs.recommendedTypeChecked,
+      // Alternatively, use this for stricter rules
+      tseslint.configs.strictTypeChecked,
+      // Optionally, add this for stylistic rules
+      tseslint.configs.stylisticTypeChecked,
+
+      // Other configs...
+    ],
+    languageOptions: {
+      parserOptions: {
+        project: ['./tsconfig.node.json', './tsconfig.app.json'],
+        tsconfigRootDir: import.meta.dirname,
+      },
+      // other options...
+    },
+  },
+])
+```
+
+You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
+
+```js
+// eslint.config.js
+import reactX from 'eslint-plugin-react-x'
+import reactDom from 'eslint-plugin-react-dom'
+
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      // Other configs...
+      // Enable lint rules for React
+      reactX.configs['recommended-typescript'],
+      // Enable lint rules for React DOM
+      reactDom.configs.recommended,
+    ],
+    languageOptions: {
+      parserOptions: {
+        project: ['./tsconfig.node.json', './tsconfig.app.json'],
+        tsconfigRootDir: import.meta.dirname,
+      },
+      // other options...
+    },
+  },
+])
+```
diff --git a/frontend/eslint.config.js b/frontend/eslint.config.js
new file mode 100644
index 000000000..ef614d25c
--- /dev/null
+++ b/frontend/eslint.config.js
@@ -0,0 +1,22 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import tseslint from 'typescript-eslint'
+import { defineConfig, globalIgnores } from 'eslint/config'
+
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      js.configs.recommended,
+      tseslint.configs.recommended,
+      reactHooks.configs.flat.recommended,
+      reactRefresh.configs.vite,
+    ],
+    languageOptions: {
+      globals: globals.browser,
+    },
+  },
+])
diff --git a/frontend/index.html b/frontend/index.html
new file mode 100644
index 000000000..0fca6f043
--- /dev/null
+++ b/frontend/index.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>frontend</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
diff --git a/frontend/package.json b/frontend/package.json
new file mode 100644
index 000000000..a03e86625
--- /dev/null
+++ b/frontend/package.json
@@ -0,0 +1,35 @@
+{
+  "name": "frontend",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "lint": "eslint .",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@hookform/resolvers": "^5.2.2",
+    "axios": "^1.16.0",
+    "react": "^19.2.5",
+    "react-dom": "^19.2.5",
+    "react-hook-form": "^7.75.0",
+    "react-router-dom": "^7.15.0",
+    "zod": "^4.4.3"
+  },
+  "devDependencies": {
+    "@eslint/js": "^10.0.1",
+    "@types/node": "^24.12.2",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^6.0.1",
+    "eslint": "^10.2.1",
+    "eslint-plugin-react-hooks": "^7.1.1",
+    "eslint-plugin-react-refresh": "^0.5.2",
+    "globals": "^17.5.0",
+    "typescript": "~6.0.2",
+    "typescript-eslint": "^8.58.2",
+    "vite": "^8.0.10"
+  }
+}
diff --git a/frontend/public/favicon.svg b/frontend/public/favicon.svg
new file mode 100644
index 000000000..6893eb132
--- /dev/null
+++ b/frontend/public/favicon.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="46" fill="none" viewBox="0 0 48 46"><path fill="#863bff" d="M25.946 44.938c-.664.845-2.021.375-2.021-.698V33.937a2.26 2.26 0 0 0-2.262-2.262H10.287c-.92 0-1.456-1.04-.92-1.788l7.48-10.471c1.07-1.497 0-3.578-1.842-3.578H1.237c-.92 0-1.456-1.04-.92-1.788L10.013.474c.214-.297.556-.474.92-.474h28.894c.92 0 1.456 1.04.92 1.788l-7.48 10.471c-1.07 1.498 0 3.579 1.842 3.579h11.377c.943 0 1.473 1.088.89 1.83L25.947 44.94z" style="fill:#863bff;fill:color(display-p3 .5252 .23 1);fill-opacity:1"/><mask id="a" width="48" height="46" x="0" y="0" maskUnits="userSpaceOnUse" style="mask-type:alpha"><path fill="#000" d="M25.842 44.938c-.664.844-2.021.375-2.021-.698V33.937a2.26 2.26 0 0 0-2.262-2.262H10.183c-.92 0-1.456-1.04-.92-1.788l7.48-10.471c1.07-1.498 0-3.579-1.842-3.579H1.133c-.92 0-1.456-1.04-.92-1.787L9.91.473c.214-.297.556-.474.92-.474h28.894c.92 0 1.456 1.04.92 1.788l-7.48 10.471c-1.07 1.498 0 3.578 1.842 3.578h11.377c.943 0 1.473 1.088.89 1.832L25.843 44.94z" style="fill:#000;fill-opacity:1"/></mask><g mask="url(#a)"><g filter="url(#b)"><ellipse cx="5.508" cy="14.704" fill="#ede6ff" rx="5.508" ry="14.704" style="fill:#ede6ff;fill:color(display-p3 .9275 .9033 1);fill-opacity:1" transform="matrix(.00324 1 1 -.00324 -4.47 31.516)"/></g><g filter="url(#c)"><ellipse cx="10.399" cy="29.851" fill="#ede6ff" rx="10.399" ry="29.851" style="fill:#ede6ff;fill:color(display-p3 .9275 .9033 1);fill-opacity:1" transform="matrix(.00324 1 1 -.00324 -39.328 7.883)"/></g><g filter="url(#d)"><ellipse cx="5.508" cy="30.487" fill="#7e14ff" rx="5.508" ry="30.487" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(89.814 -25.913 -14.639)scale(1 -1)"/></g><g filter="url(#e)"><ellipse cx="5.508" cy="30.599" fill="#7e14ff" rx="5.508" ry="30.599" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(89.814 -32.644 -3.334)scale(1 -1)"/></g><g filter="url(#f)"><ellipse cx="5.508" cy="30.599" fill="#7e14ff" rx="5.508" ry="30.599" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="matrix(.00324 1 1 -.00324 -34.34 30.47)"/></g><g filter="url(#g)"><ellipse cx="14.072" cy="22.078" fill="#ede6ff" rx="14.072" ry="22.078" style="fill:#ede6ff;fill:color(display-p3 .9275 .9033 1);fill-opacity:1" transform="rotate(93.35 24.506 48.493)scale(-1 1)"/></g><g filter="url(#h)"><ellipse cx="3.47" cy="21.501" fill="#7e14ff" rx="3.47" ry="21.501" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(89.009 28.708 47.59)scale(-1 1)"/></g><g filter="url(#i)"><ellipse cx="3.47" cy="21.501" fill="#7e14ff" rx="3.47" ry="21.501" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(89.009 28.708 47.59)scale(-1 1)"/></g><g filter="url(#j)"><ellipse cx=".387" cy="8.972" fill="#7e14ff" rx="4.407" ry="29.108" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(39.51 .387 8.972)"/></g><g filter="url(#k)"><ellipse cx="47.523" cy="-6.092" fill="#7e14ff" rx="4.407" ry="29.108" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(37.892 47.523 -6.092)"/></g><g filter="url(#l)"><ellipse cx="41.412" cy="6.333" fill="#47bfff" rx="5.971" ry="9.665" style="fill:#47bfff;fill:color(display-p3 .2799 .748 1);fill-opacity:1" transform="rotate(37.892 41.412 6.333)"/></g><g filter="url(#m)"><ellipse cx="-1.879" cy="38.332" fill="#7e14ff" rx="4.407" ry="29.108" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(37.892 -1.88 38.332)"/></g><g filter="url(#n)"><ellipse cx="-1.879" cy="38.332" fill="#7e14ff" rx="4.407" ry="29.108" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(37.892 -1.88 38.332)"/></g><g filter="url(#o)"><ellipse cx="35.651" cy="29.907" fill="#7e14ff" rx="4.407" ry="29.108" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(37.892 35.651 29.907)"/></g><g filter="url(#p)"><ellipse cx="38.418" cy="32.4" fill="#47bfff" rx="5.971" ry="15.297" style="fill:#47bfff;fill:color(display-p3 .2799 .748 1);fill-opacity:1" transform="rotate(37.892 38.418 32.4)"/></g></g><defs><filter id="b" width="60.045" height="41.654" x="-19.77" y="16.149" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="7.659"/></filter><filter id="c" width="90.34" height="51.437" x="-54.613" y="-7.533" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="7.659"/></filter><filter id="d" width="79.355" height="29.4" x="-49.64" y="2.03" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="e" width="79.579" height="29.4" x="-45.045" y="20.029" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="f" width="79.579" height="29.4" x="-43.513" y="21.178" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="g" width="74.749" height="58.852" x="15.756" y="-17.901" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="7.659"/></filter><filter id="h" width="61.377" height="25.362" x="23.548" y="2.284" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="i" width="61.377" height="25.362" x="23.548" y="2.284" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="j" width="56.045" height="63.649" x="-27.636" y="-22.853" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="k" width="54.814" height="64.646" x="20.116" y="-38.415" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="l" width="33.541" height="35.313" x="24.641" y="-11.323" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="m" width="54.814" height="64.646" x="-29.286" y="6.009" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="n" width="54.814" height="64.646" x="-29.286" y="6.009" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="o" width="54.814" height="64.646" x="8.244" y="-2.416" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="p" width="39.409" height="43.623" x="18.713" y="10.588" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter></defs></svg>
\ No newline at end of file
diff --git a/frontend/public/icons.svg b/frontend/public/icons.svg
new file mode 100644
index 000000000..e9522193d
--- /dev/null
+++ b/frontend/public/icons.svg
@@ -0,0 +1,24 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+  <symbol id="bluesky-icon" viewBox="0 0 16 17">
+    <g clip-path="url(#bluesky-clip)"><path fill="#08060d" d="M7.75 7.735c-.693-1.348-2.58-3.86-4.334-5.097-1.68-1.187-2.32-.981-2.74-.79C.188 2.065.1 2.812.1 3.251s.241 3.602.398 4.13c.52 1.744 2.367 2.333 4.07 2.145-2.495.37-4.71 1.278-1.805 4.512 3.196 3.309 4.38-.71 4.987-2.746.608 2.036 1.307 5.91 4.93 2.746 2.72-2.746.747-4.143-1.747-4.512 1.702.189 3.55-.4 4.07-2.145.156-.528.397-3.691.397-4.13s-.088-1.186-.575-1.406c-.42-.19-1.06-.395-2.741.79-1.755 1.24-3.64 3.752-4.334 5.099"/></g>
+    <defs><clipPath id="bluesky-clip"><path fill="#fff" d="M.1.85h15.3v15.3H.1z"/></clipPath></defs>
+  </symbol>
+  <symbol id="discord-icon" viewBox="0 0 20 19">
+    <path fill="#08060d" d="M16.224 3.768a14.5 14.5 0 0 0-3.67-1.153c-.158.286-.343.67-.47.976a13.5 13.5 0 0 0-4.067 0c-.128-.306-.317-.69-.476-.976A14.4 14.4 0 0 0 3.868 3.77C1.546 7.28.916 10.703 1.231 14.077a14.7 14.7 0 0 0 4.5 2.306q.545-.748.965-1.587a9.5 9.5 0 0 1-1.518-.74q.191-.14.372-.293c2.927 1.369 6.107 1.369 8.999 0q.183.152.372.294-.723.437-1.52.74.418.838.963 1.588a14.6 14.6 0 0 0 4.504-2.308c.37-3.911-.63-7.302-2.644-10.309m-9.13 8.234c-.878 0-1.599-.82-1.599-1.82 0-.998.705-1.82 1.6-1.82.894 0 1.614.82 1.599 1.82.001 1-.705 1.82-1.6 1.82m5.91 0c-.878 0-1.599-.82-1.599-1.82 0-.998.705-1.82 1.6-1.82.893 0 1.614.82 1.599 1.82 0 1-.706 1.82-1.6 1.82"/>
+  </symbol>
+  <symbol id="documentation-icon" viewBox="0 0 21 20">
+    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="m15.5 13.333 1.533 1.322c.645.555.967.833.967 1.178s-.322.623-.967 1.179L15.5 18.333m-3.333-5-1.534 1.322c-.644.555-.966.833-.966 1.178s.322.623.966 1.179l1.534 1.321"/>
+    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M17.167 10.836v-4.32c0-1.41 0-2.117-.224-2.68-.359-.906-1.118-1.621-2.08-1.96-.599-.21-1.349-.21-2.848-.21-2.623 0-3.935 0-4.983.369-1.684.591-3.013 1.842-3.641 3.428C3 6.449 3 7.684 3 10.154v2.122c0 2.558 0 3.838.706 4.726q.306.383.713.671c.76.536 1.79.64 3.581.66"/>
+    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M3 10a2.78 2.78 0 0 1 2.778-2.778c.555 0 1.209.097 1.748-.047.48-.129.854-.503.982-.982.145-.54.048-1.194.048-1.749a2.78 2.78 0 0 1 2.777-2.777"/>
+  </symbol>
+  <symbol id="github-icon" viewBox="0 0 19 19">
+    <path fill="#08060d" fill-rule="evenodd" d="M9.356 1.85C5.05 1.85 1.57 5.356 1.57 9.694a7.84 7.84 0 0 0 5.324 7.44c.387.079.528-.168.528-.376 0-.182-.013-.805-.013-1.454-2.165.467-2.616-.935-2.616-.935-.349-.91-.864-1.143-.864-1.143-.71-.48.051-.48.051-.48.787.051 1.2.805 1.2.805.695 1.194 1.817.857 2.268.649.064-.507.27-.857.49-1.052-1.728-.182-3.545-.857-3.545-3.87 0-.857.31-1.558.8-2.104-.078-.195-.349-1 .077-2.078 0 0 .657-.208 2.14.805a7.5 7.5 0 0 1 1.946-.26c.657 0 1.328.092 1.946.26 1.483-1.013 2.14-.805 2.14-.805.426 1.078.155 1.883.078 2.078.502.546.799 1.247.799 2.104 0 3.013-1.818 3.675-3.558 3.87.284.247.528.714.528 1.454 0 1.052-.012 1.896-.012 2.156 0 .208.142.455.528.377a7.84 7.84 0 0 0 5.324-7.441c.013-4.338-3.48-7.844-7.773-7.844" clip-rule="evenodd"/>
+  </symbol>
+  <symbol id="social-icon" viewBox="0 0 20 20">
+    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M12.5 6.667a4.167 4.167 0 1 0-8.334 0 4.167 4.167 0 0 0 8.334 0"/>
+    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M2.5 16.667a5.833 5.833 0 0 1 8.75-5.053m3.837.474.513 1.035c.07.144.257.282.414.309l.93.155c.596.1.736.536.307.965l-.723.73a.64.64 0 0 0-.152.531l.207.903c.164.715-.213.991-.84.618l-.872-.52a.63.63 0 0 0-.577 0l-.872.52c-.624.373-1.003.094-.84-.618l.207-.903a.64.64 0 0 0-.152-.532l-.723-.729c-.426-.43-.289-.864.306-.964l.93-.156a.64.64 0 0 0 .412-.31l.513-1.034c.28-.562.735-.562 1.012 0"/>
+  </symbol>
+  <symbol id="x-icon" viewBox="0 0 19 19">
+    <path fill="#08060d" fill-rule="evenodd" d="M1.893 1.98c.052.072 1.245 1.769 2.653 3.77l2.892 4.114c.183.261.333.48.333.486s-.068.089-.152.183l-.522.593-.765.867-3.597 4.087c-.375.426-.734.834-.798.905a1 1 0 0 0-.118.148c0 .01.236.017.664.017h.663l.729-.83c.4-.457.796-.906.879-.999a692 692 0 0 0 1.794-2.038c.034-.037.301-.34.594-.675l.551-.624.345-.392a7 7 0 0 1 .34-.374c.006 0 .93 1.306 2.052 2.903l2.084 2.965.045.063h2.275c1.87 0 2.273-.003 2.266-.021-.008-.02-1.098-1.572-3.894-5.547-2.013-2.862-2.28-3.246-2.273-3.266.008-.019.282-.332 2.085-2.38l2-2.274 1.567-1.782c.022-.028-.016-.03-.65-.03h-.674l-.3.342a871 871 0 0 1-1.782 2.025c-.067.075-.405.458-.75.852a100 100 0 0 1-.803.91c-.148.172-.299.344-.99 1.127-.304.343-.32.358-.345.327-.015-.019-.904-1.282-1.976-2.808L6.365 1.85H1.8zm1.782.91 8.078 11.294c.772 1.08 1.413 1.973 1.425 1.984.016.017.241.02 1.05.017l1.03-.004-2.694-3.766L7.796 5.75 5.722 2.852l-1.039-.004-1.039-.004z" clip-rule="evenodd"/>
+  </symbol>
+</svg>
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
new file mode 100644
index 000000000..9bd182cc2
--- /dev/null
+++ b/frontend/src/App.tsx
@@ -0,0 +1,33 @@
+import { Suspense, lazy } from "react";
+import { Navigate, Route, Routes } from "react-router-dom";
+import ProtectedRoute from "./components/ProtectedRoute";
+
+// These pages are loaded only when they are needed.
+const Login = lazy(() => import("./pages/LoginPage"));
+const Register = lazy(() => import("./pages/RegisterPage"));
+const EditorPage = lazy(() => import("./pages/EditorPage"));
+
+const App = () => {
+  return (
+    // This shows a small loading message while a page is loading.
+    <Suspense fallback={<div className="app-loading">Loading...</div>}>
+      <Routes>
+        {/* When someone opens the home page, send them to the editor. */}
+        <Route path="/" element={<Navigate to="/editor" replace />} />
+        <Route path="/login" element={<Login />} />
+        <Route path="/register" element={<Register />} />
+        {/* The editor is protected, so only logged-in users can open it. */}
+        <Route
+          path="/editor"
+          element={
+            <ProtectedRoute>
+              <EditorPage />
+            </ProtectedRoute>
+          }
+        />
+      </Routes>
+    </Suspense>
+  );
+};
+
+export default App;
diff --git a/frontend/src/api/authApi.ts b/frontend/src/api/authApi.ts
new file mode 100644
index 000000000..4c4c073f6
--- /dev/null
+++ b/frontend/src/api/authApi.ts
@@ -0,0 +1,22 @@
+import axios from "axios";
+
+// This is the backend URL. If .env is missing, it uses localhost.
+const API = import.meta.env.VITE_API_URL || "http://localhost:5000";
+
+// Axios is like a messenger that sends data to our server
+// This sends new user details to the backend register route.
+export const registerAPI = (name: string, email: string, password: string) =>
+  axios.post(`${API}/api/auth/register`, { name, email, password });
+
+// This sends login details to the backend login route.
+export const loginAPI = (email: string, password: string) =>
+  axios.post(`${API}/api/auth/login`, { email, password });
+
+// This gets the current user info using the stored token.
+export const meAPI = (token: string) =>
+  axios.get(`${API}/api/auth/me`, createAuthHeader(token));
+
+// This can be used later when an API route needs the user's token.
+export const createAuthHeader = (token: string) => ({
+  headers: { Authorization: `Bearer ${token}` },
+});
diff --git a/frontend/src/auth/AuthContext.ts b/frontend/src/auth/AuthContext.ts
new file mode 100644
index 000000000..2b5c0b888
--- /dev/null
+++ b/frontend/src/auth/AuthContext.ts
@@ -0,0 +1,17 @@
+import { createContext } from "react";
+
+// This is the user information we keep after login.
+export type User = { id: string; name: string; email: string };
+
+// This tells TypeScript what values our auth system will share.
+export type AuthContextType = {
+  user: User | null;
+  token: string | null;
+  loading: boolean;
+  register: (name: string, email: string, password: string) => Promise<void>;
+  login: (email: string, password: string) => Promise<void>;
+  logout: () => void;
+};
+
+// This is where React stores the login data for the app.
+export const AuthContext = createContext<AuthContextType | null>(null);
diff --git a/frontend/src/auth/AuthProvider.tsx b/frontend/src/auth/AuthProvider.tsx
new file mode 100644
index 000000000..6a34a4d4a
--- /dev/null
+++ b/frontend/src/auth/AuthProvider.tsx
@@ -0,0 +1,108 @@
+import { useState, useEffect } from "react";
+import { AuthContext } from "./AuthContext";
+import type { User } from "./AuthContext";
+import { registerAPI, loginAPI, meAPI } from "../api/authApi";
+
+// This component keeps all login information in one place.
+export const AuthProvider = ({ children }: { children: React.ReactNode }) => {
+  // First we check localStorage so the user stays logged in after refresh.
+  const [user, setUser] = useState<User | null>(() => {
+    const savedUser = localStorage.getItem("vi-user");
+    return savedUser ? JSON.parse(savedUser) : null;
+  });
+
+  // The token proves that the user has logged in.
+  const [token, setToken] = useState<string | null>(() => {
+    return localStorage.getItem("vi-token");
+  });
+
+  // This helps us show loading text while login or register is running.
+  const [loading, setLoading] = useState(false);
+
+  // This helps us show loading while validating the stored token on app mount.
+  const [validating, setValidating] = useState(true);
+
+  // This validates the stored token when the app loads.
+  useEffect(() => {
+    const validateToken = async () => {
+      const storedToken = localStorage.getItem("vi-token");
+
+      if (!storedToken) {
+        setValidating(false);
+        return;
+      }
+
+      try {
+        const { data } = await meAPI(storedToken);
+        setUser(data.user);
+        setToken(storedToken);
+      } catch {
+        // Token is invalid or expired, clear stored data
+        localStorage.removeItem("vi-token");
+        localStorage.removeItem("vi-user");
+        setUser(null);
+        setToken(null);
+      } finally {
+        setValidating(false);
+      }
+    };
+
+    validateToken();
+  }, []);
+
+  // This creates a new account by calling the backend.
+  const register = async (name: string, email: string, password: string) => {
+    setLoading(true);
+    try {
+      const { data } = await registerAPI(name, email, password);
+      setUser(data.user);
+      setToken(data.token);
+
+      // Save the user and token so refresh does not log them out.
+      localStorage.setItem("vi-user", JSON.stringify(data.user));
+      localStorage.setItem("vi-token", data.token);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  // This logs in an existing user by checking email and password.
+  const login = async (email: string, password: string) => {
+    setLoading(true);
+    try {
+      const { data } = await loginAPI(email, password);
+      setUser(data.user);
+      setToken(data.token);
+
+      // Store login details in the browser for the next page refresh.
+      localStorage.setItem("vi-user", JSON.stringify(data.user));
+      localStorage.setItem("vi-token", data.token);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  // This removes login data when the user clicks logout.
+  const logout = () => {
+    setToken(null);
+    setUser(null);
+    localStorage.removeItem("vi-token");
+    localStorage.removeItem("vi-user");
+  };
+
+  // All pages inside this provider can use user, token, login, register, and logout.
+  return (
+    <AuthContext.Provider
+      value={{
+        user,
+        token,
+        loading: loading || validating,
+        register,
+        login,
+        logout,
+      }}
+    >
+      {children}
+    </AuthContext.Provider>
+  );
+};
diff --git a/frontend/src/auth/useAuth.ts b/frontend/src/auth/useAuth.ts
new file mode 100644
index 000000000..c1b539386
--- /dev/null
+++ b/frontend/src/auth/useAuth.ts
@@ -0,0 +1,11 @@
+import { useContext } from "react";
+import { AuthContext } from "./AuthContext";
+
+// This small hook lets any component get the current login data.
+export const useAuth = () => {
+  const ctx = useContext(AuthContext);
+
+  // If this error happens, it means the component is outside AuthProvider.
+  if (!ctx) throw new Error("useAuth must be used inside AuthProvider");
+  return ctx;
+};
diff --git a/frontend/src/components/Navbar.tsx b/frontend/src/components/Navbar.tsx
new file mode 100644
index 000000000..4998937d6
--- /dev/null
+++ b/frontend/src/components/Navbar.tsx
@@ -0,0 +1,24 @@
+import { useAuth } from "../auth/useAuth";
+
+// This top bar shows the app name, current user, and logout button.
+const Navbar = () => {
+  const { user, logout } = useAuth();
+
+  return (
+    <nav className="navbar">
+      <div className="navbar-brand">
+        <span className="navbar-logo">Vi</span>
+        <h1>Vi-Notes</h1>
+      </div>
+      <div className="navbar-actions">
+        <span className="welcome-text">Writing as {user?.name}</span>
+        {/* Clicking this clears the saved login token. */}
+        <button className="logout-btn" onClick={logout}>
+          Logout
+        </button>
+      </div>
+    </nav>
+  );
+};
+
+export default Navbar;
diff --git a/frontend/src/components/ProtectedRoute.tsx b/frontend/src/components/ProtectedRoute.tsx
new file mode 100644
index 000000000..f2382a004
--- /dev/null
+++ b/frontend/src/components/ProtectedRoute.tsx
@@ -0,0 +1,22 @@
+import { Navigate } from "react-router-dom";
+import { useAuth } from "../auth/useAuth";
+
+// This component is used for pages that need login.
+const ProtectedRoute = ({ children }: { children: React.ReactNode }) => {
+  const { user, loading } = useAuth();
+
+  // Show loading while validating the token.
+  if (loading) {
+    return <div>Loading...</div>;
+  }
+
+  // If there is no user (token validation failed), redirect to login.
+  if (!user) {
+    return <Navigate to="/login" />;
+  }
+
+  // If the user exists, show the protected page.
+  return <>{children}</>;
+};
+
+export default ProtectedRoute;
diff --git a/frontend/src/editor/TextEditor.tsx b/frontend/src/editor/TextEditor.tsx
new file mode 100644
index 000000000..e1a45ae64
--- /dev/null
+++ b/frontend/src/editor/TextEditor.tsx
@@ -0,0 +1,30 @@
+import React from "react";
+import type { EditorProps } from "./editorTypes";
+
+// This is the simple text editor where the user writes their content.
+const Editor = React.memo(function Editor({
+  content,
+  onTextChange,
+  onKeyDown,
+  onKeyUp,
+  onPaste,
+}: EditorProps) {
+  return (
+    <section className="writing-surface">
+      {/* The textarea is controlled by React, so the page always knows the latest text. */}
+      <textarea
+        className="editor-textarea"
+        value={content}
+        onChange={(event) => onTextChange(event.target.value)}
+        onKeyDown={onKeyDown}
+        onKeyUp={onKeyUp}
+        onPaste={onPaste}
+        placeholder="Start writing your note..."
+        spellCheck={true}
+        aria-label="Writing editor"
+      />
+    </section>
+  );
+});
+
+export default Editor;
diff --git a/frontend/src/editor/editorTypes.ts b/frontend/src/editor/editorTypes.ts
new file mode 100644
index 000000000..b4b1cf6e5
--- /dev/null
+++ b/frontend/src/editor/editorTypes.ts
@@ -0,0 +1,8 @@
+// These are the values the TextEditor component needs from the editor page.
+export interface EditorProps {
+  content: string;
+  onTextChange: (value: string) => void;
+  onKeyDown: (e: React.KeyboardEvent<HTMLTextAreaElement>) => void;
+  onKeyUp: (e: React.KeyboardEvent<HTMLTextAreaElement>) => void;
+  onPaste: () => void;
+}
diff --git a/frontend/src/main.tsx b/frontend/src/main.tsx
new file mode 100644
index 000000000..b2daa5d4a
--- /dev/null
+++ b/frontend/src/main.tsx
@@ -0,0 +1,19 @@
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import { BrowserRouter } from "react-router-dom";
+import { AuthProvider } from "./auth/AuthProvider";
+import "./styles/main.css";
+import App from "./App.tsx";
+
+// This is the first React file that runs in the browser.
+createRoot(document.getElementById("root")!).render(
+  <StrictMode>
+    {/* BrowserRouter lets us move between pages like /login and /editor. */}
+    <BrowserRouter>
+      {/* AuthProvider gives login details to the whole app. */}
+      <AuthProvider>
+        <App />
+      </AuthProvider>
+    </BrowserRouter>
+  </StrictMode>,
+);
diff --git a/frontend/src/pages/EditorPage.tsx b/frontend/src/pages/EditorPage.tsx
new file mode 100644
index 000000000..7f343e836
--- /dev/null
+++ b/frontend/src/pages/EditorPage.tsx
@@ -0,0 +1,72 @@
+import { useEffect, useMemo, useState } from "react";
+import { useAuth } from "../auth/useAuth";
+import Navbar from "../components/Navbar";
+import TextEditor from "../editor/TextEditor";
+
+// This is the main writing page after the user logs in.
+const EditorPage = () => {
+  const { user } = useAuth();
+
+  // Load this user's saved writing from localStorage.
+  const [content, setContent] = useState(() => {
+    if (user?.id) {
+      return localStorage.getItem(`vi-content-${user.id}`) || "";
+    }
+    return "";
+  });
+
+  // Save the writing every time the text changes.
+  useEffect(() => {
+    const userId = user?.id;
+    if (userId) {
+      const timeoutId = setTimeout(() => {
+        localStorage.setItem(`vi-content-${userId}`, content);
+      }, 1000); // Wait 1 second after user stops typing
+
+      return () => clearTimeout(timeoutId); // Cleanup on re-render
+    }
+  }, [content, user?.id]);
+
+  // Count writing details so the user can see basic writing info.
+  const writingStats = useMemo(() => {
+    const text = content.replace(/\r\n/g, "\n");
+
+    return {
+      wordCount: text.trim().split(/\s+/).filter(Boolean).length,
+      lineCount: text.length === 0 ? 0 : text.split("\n").length,
+      // Here characters means only typed letters/numbers/symbols, not spaces.
+      characterCount: text.replace(/\s/g, "").length,
+    };
+  }, [content]);
+
+  return (
+    <div className="editor-page">
+      <Navbar />
+      <main className="editor-shell">
+        {/* This small line shows word count and save status. */}
+        <div className="editor-meta" aria-label="Writing details">
+          <span>
+            {writingStats.wordCount}{" "}
+            {writingStats.wordCount === 1 ? "word" : "words"} |{" "}
+            {writingStats.lineCount}{" "}
+            {writingStats.lineCount === 1 ? "line" : "lines"} |{" "}
+            {writingStats.characterCount}{" "}
+            {writingStats.characterCount === 1 ? "character" : "characters"}
+          </span>
+          <span>Saved locally for {user?.name}</span>
+        </div>
+
+        {/* The actual typing area is in this component. */}
+        <TextEditor
+          content={content}
+          onTextChange={setContent}
+          onKeyDown={() => {}}
+          onKeyUp={() => {}}
+          onPaste={() => {}}
+        />
+      </main>
+    </div>
+  );
+};
+
+export default EditorPage;
diff --git a/frontend/src/pages/LoginPage.tsx b/frontend/src/pages/LoginPage.tsx
new file mode 100644
index 000000000..568e5c0c5
--- /dev/null
+++ b/frontend/src/pages/LoginPage.tsx
@@ -0,0 +1,120 @@
+import axios from "axios";
+import { useState } from "react";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useNavigate, Link } from "react-router-dom";
+import { useAuth } from "../auth/useAuth";
+import { loginSchema, type LoginInput } from "../validation/authValidation";
+
+// This page lets an existing user sign in.
+const Login = () => {
+  const { login, loading } = useAuth();
+  const navigate = useNavigate();
+  const [submitError, setSubmitError] = useState("");
+
+  // React Hook Form handles the input values and validation errors.
+  const {
+    register,
+    handleSubmit,
+    formState: { errors, isSubmitting },
+  } = useForm<LoginInput>({
+    resolver: zodResolver(loginSchema),
+  });
+
+  // This runs after the user submits valid email and password fields.
+  const onSubmit = async (data: LoginInput) => {
+    setSubmitError("");
+    try {
+      await login(data.email, data.password);
+      navigate("/editor");
+    } catch (error) {
+      // If the backend rejects the login, show the message on the page.
+      if (axios.isAxiosError(error)) {
+        setSubmitError(
+          error.response?.data?.message ||
+            error.response?.data?.error ||
+            "Could not sign in. Please check your details.",
+        );
+        return;
+      }
+
+      setSubmitError("Something went wrong. Please try again.");
+    }
+  };
+
+  return (
+    <main className="auth-shell">
+      {/* This is the login card shown in the center of the page. */}
+      <section className="auth-panel" aria-labelledby="login-title">
+        <div className="brand-lockup">
+          <div className="brand-logo">Vi</div>
+          <div>
+            <h1 className="brand-title">Vi-Notes</h1>
+            <p className="brand-tagline">Authenticity Verification Platform</p>
+          </div>
+        </div>
+
+        <div className="auth-card">
+          <h2 id="login-title" className="auth-title">
+            Welcome back
+          </h2>
+          <p className="auth-subtitle">Sign in to continue writing.</p>
+
+          <form onSubmit={handleSubmit(onSubmit)} className="auth-form">
+            {/* This message appears only when the backend login fails. */}
+            {submitError && <p className="form-status-error">{submitError}</p>}
+
+            <div className="form-group">
+              <label className="form-label">Email address</label>
+              <input
+                {...register("email")}
+                type="email"
+                className="form-input"
+                placeholder="you@example.com"
+              />
+              {/* This appears when the email does not match our validation rule. */}
+              {errors.email && (
+                <p className="error-text">{errors.email.message}</p>
+              )}
+            </div>
+
+            <div className="form-group">
+              <label className="form-label">Password</label>
+              <input
+                {...register("password")}
+                type="password"
+                className="form-input"
+                placeholder="Enter your password"
+              />
+              {/* This appears when the password field is empty. */}
+              {errors.password && (
+                <p className="error-text">{errors.password.message}</p>
+              )}
+            </div>
+
+            <button
+              type="submit"
+              disabled={isSubmitting || loading}
+              className="btn btn-primary"
+            >
+              {isSubmitting || loading ? (
+                <>
+                  <div className="spinner"></div>
+                  Signing in...
+                </>
+              ) : (
+                "Sign in"
+              )}
+            </button>
+          </form>
+
+          <p className="auth-link">
+            Don't have an account? <Link to="/register">Sign up</Link>
+          </p>
+        </div>
+      </section>
+    </main>
+  );
+};
+
+export default Login;
diff --git a/frontend/src/pages/RegisterPage.tsx b/frontend/src/pages/RegisterPage.tsx
new file mode 100644
index 000000000..a3c187d21
--- /dev/null
+++ b/frontend/src/pages/RegisterPage.tsx
@@ -0,0 +1,140 @@
+import axios from "axios";
+import { useState } from "react";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useNavigate, Link } from "react-router-dom";
+import { useAuth } from "../auth/useAuth";
+import {
+  registerSchema,
+  type RegisterInput,
+} from "../validation/authValidation";
+
+// This page lets a new user create an account.
+const Register = () => {
+  const { register: registerUser, loading } = useAuth();
+  const navigate = useNavigate();
+  const [submitError, setSubmitError] = useState("");
+
+  // React Hook Form connects the inputs with the register validation rules.
+  const {
+    register,
+    handleSubmit,
+    formState: { errors, isSubmitting },
+  } = useForm<RegisterInput>({
+    resolver: zodResolver(registerSchema),
+  });
+
+  // This runs after the form fields pass validation.
+  const onSubmit = async (data: RegisterInput) => {
+    setSubmitError("");
+    try {
+      await registerUser(data.name, data.email, data.password);
+      navigate("/editor");
+    } catch (error) {
+      // If the email is already used or the backend fails, show it here.
+      if (axios.isAxiosError(error)) {
+        setSubmitError(
+          error.response?.data?.message ||
+            error.response?.data?.error ||
+            "Could not create your account. Please try again.",
+        );
+        return;
+      }
+
+      setSubmitError("Something went wrong. Please try again.");
+    }
+  };
+
+  return (
+    <main className="auth-shell">
+      {/* This is the register card shown in the center of the page. */}
+      <section className="auth-panel" aria-labelledby="register-title">
+        <div className="brand-lockup">
+          <div className="brand-logo">Vi</div>
+          <div>
+            <h1 className="brand-title">Vi-Notes</h1>
+            <p className="brand-tagline">
+              Authenticity Verification Platform
+            </p>
+          </div>
+        </div>
+
+        <div className="auth-card">
+          <h2 id="register-title" className="auth-title">
+            Create your account
+          </h2>
+          <p className="auth-subtitle">
+            Start with a simple email and password.
+          </p>
+
+          <form onSubmit={handleSubmit(onSubmit)} className="auth-form">
+            {/* This message appears only when account creation fails. */}
+            {submitError && <p className="form-status-error">{submitError}</p>}
+
+            <div className="form-group">
+              <label className="form-label">Full name</label>
+              <input
+                {...register("name")}
+                className="form-input"
+                placeholder="Full Name"
+              />
+              {/* This appears when the name is too short. */}
+              {errors.name && (
+                <p className="error-text">{errors.name.message}</p>
+              )}
+            </div>
+
+            <div className="form-group">
+              <label className="form-label">Email address</label>
+              <input
+                {...register("email")}
+                type="email"
+                className="form-input"
+                placeholder="you@example.com"
+              />
+              {/* This appears when the email is not valid. */}
+              {errors.email && (
+                <p className="error-text">{errors.email.message}</p>
+              )}
+            </div>
+
+            <div className="form-group">
+              <label className="form-label">Password</label>
+              <input
+                {...register("password")}
+                type="password"
+                className="form-input"
+                placeholder="At least 6 characters"
+              />
+              {/* This appears when the password is too short. */}
+              {errors.password && (
+                <p className="error-text">{errors.password.message}</p>
+              )}
+            </div>
+
+            <button
+              type="submit"
+              disabled={isSubmitting || loading}
+              className="btn btn-primary"
+            >
+              {isSubmitting || loading ? (
+                <>
+                  <div className="spinner"></div>
+                  Creating account...
+                </>
+              ) : (
+                "Create account"
+              )}
+            </button>
+          </form>
+
+          <p className="auth-link">
+            Already have an account? <Link to="/login">Sign in</Link>
+          </p>
+        </div>
+      </section>
+    </main>
+  );
+};
+
+export default Register;
diff --git a/frontend/src/styles/main.css b/frontend/src/styles/main.css
new file mode 100644
index 000000000..3081fd292
--- /dev/null
+++ b/frontend/src/styles/main.css
@@ -0,0 +1,391 @@
+/* Main colors and reusable values for the whole app */
+:root {
+  --bg: #f7f4ee;
+  --surface: #fffdf8;
+  --surface-soft: #fbf8f1;
+  --text: #28231d;
+  --muted: #756d63;
+  --subtle: #a79d91;
+  --border: #e5ddd1;
+  --primary: #2f6f64;
+  --primary-hover: #275b52;
+  --danger: #a9443f;
+  --danger-bg: #fff1ef;
+  --focus: rgb(47 111 100 / 0.18);
+  --shadow: 0 22px 60px rgb(62 51 38 / 0.1);
+  --radius: 8px;
+}
+
+/* Basic reset so spacing is easier to control */
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+/* Common page styles */
+html {
+  min-height: 100%;
+}
+
+body {
+  min-height: 100vh;
+  background:
+    radial-gradient(circle at top left, rgb(255 255 255 / 0.85), transparent 34rem),
+    var(--bg);
+  color: var(--text);
+  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  line-height: 1.5;
+}
+
+button,
+input,
+textarea {
+  font: inherit;
+}
+
+a {
+  color: var(--primary);
+}
+
+.app-loading {
+  min-height: 100vh;
+  display: grid;
+  place-items: center;
+  color: var(--muted);
+}
+
+/* Common button styles */
+.btn {
+  width: 100%;
+  min-height: 46px;
+  border: 0;
+  border-radius: var(--radius);
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  font-weight: 700;
+  transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
+}
+
+.btn-primary {
+  background: var(--primary);
+  color: #fffdf8;
+  box-shadow: 0 10px 20px rgb(47 111 100 / 0.16);
+}
+
+.btn-primary:hover:not(:disabled) {
+  background: var(--primary-hover);
+  transform: translateY(-1px);
+}
+
+.btn-primary:disabled {
+  cursor: not-allowed;
+  opacity: 0.65;
+}
+
+/* Login and register page styles */
+.auth-shell {
+  min-height: 100vh;
+  display: grid;
+  place-items: center;
+  padding: 2rem 1rem;
+}
+
+.auth-panel {
+  width: min(100%, 420px);
+}
+
+.brand-lockup {
+  display: flex;
+  align-items: center;
+  gap: 0.9rem;
+  margin-bottom: 1.5rem;
+}
+
+.brand-logo,
+.navbar-logo {
+  width: 42px;
+  height: 42px;
+  border-radius: var(--radius);
+  display: inline-grid;
+  place-items: center;
+  background: var(--text);
+  color: var(--surface);
+  font-size: 1rem;
+  font-weight: 800;
+}
+
+.brand-title {
+  font-size: 1.7rem;
+  line-height: 1.1;
+  color: var(--text);
+}
+
+.brand-tagline {
+  margin-top: 0.25rem;
+  color: var(--muted);
+  font-size: 0.95rem;
+}
+
+.auth-card {
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  box-shadow: var(--shadow);
+  padding: 2rem;
+}
+
+.auth-title {
+  font-size: 1.45rem;
+  line-height: 1.2;
+  color: var(--text);
+}
+
+.auth-subtitle {
+  margin-top: 0.4rem;
+  margin-bottom: 1.5rem;
+  color: var(--muted);
+  font-size: 0.95rem;
+}
+
+.auth-form {
+  display: grid;
+  gap: 1rem;
+}
+
+.form-group {
+  display: grid;
+  gap: 0.45rem;
+}
+
+.form-label {
+  color: var(--text);
+  font-size: 0.9rem;
+  font-weight: 700;
+}
+
+.form-input {
+  width: 100%;
+  min-height: 46px;
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  background: #fffefa;
+  color: var(--text);
+  padding: 0.75rem 0.9rem;
+  transition: border-color 0.2s ease, box-shadow 0.2s ease;
+}
+
+.form-input:focus {
+  border-color: var(--primary);
+  box-shadow: 0 0 0 4px var(--focus);
+  outline: none;
+}
+
+.form-input::placeholder {
+  color: var(--subtle);
+}
+
+.error-text {
+  color: var(--danger);
+  font-size: 0.86rem;
+}
+
+.form-status-error {
+  border: 1px solid rgb(169 68 63 / 0.22);
+  border-radius: var(--radius);
+  background: var(--danger-bg);
+  color: var(--danger);
+  padding: 0.75rem 0.9rem;
+  font-size: 0.9rem;
+}
+
+.auth-link {
+  margin-top: 1.35rem;
+  color: var(--muted);
+  font-size: 0.92rem;
+  text-align: center;
+}
+
+.auth-link a {
+  font-weight: 800;
+  text-decoration: none;
+}
+
+.auth-link a:hover {
+  text-decoration: underline;
+}
+
+/* Small loading spinner used inside submit buttons */
+.spinner {
+  width: 18px;
+  height: 18px;
+  border: 2px solid rgb(255 255 255 / 0.38);
+  border-top-color: #fff;
+  border-radius: 50%;
+  animation: spin 0.8s linear infinite;
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+/* Top navbar styles */
+.navbar {
+  min-height: 72px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+  padding: 1rem clamp(1rem, 5vw, 3rem);
+  background: rgb(255 253 248 / 0.82);
+  border-bottom: 1px solid var(--border);
+  backdrop-filter: blur(12px);
+}
+
+.navbar-brand {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+}
+
+.navbar-logo {
+  width: 34px;
+  height: 34px;
+  font-size: 0.86rem;
+}
+
+.navbar-brand h1 {
+  font-size: 1.15rem;
+  color: var(--text);
+}
+
+.navbar-actions {
+  display: flex;
+  align-items: center;
+  gap: 0.85rem;
+}
+
+.welcome-text {
+  color: var(--muted);
+  font-size: 0.92rem;
+}
+
+.logout-btn {
+  min-height: 38px;
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  background: transparent;
+  color: var(--text);
+  cursor: pointer;
+  font-weight: 700;
+  padding: 0.45rem 0.8rem;
+  transition: background 0.2s ease, border-color 0.2s ease;
+}
+
+.logout-btn:hover {
+  background: var(--surface-soft);
+  border-color: var(--subtle);
+}
+
+/* Editor page styles */
+.editor-page {
+  min-height: 100vh;
+  background: var(--bg);
+  display: flex;
+  flex-direction: column;
+}
+
+.editor-shell {
+  width: min(100%, 820px);
+  flex: 1;
+  margin: 0 auto;
+  padding: clamp(1.25rem, 5vw, 3rem) 1rem 4rem;
+}
+
+.editor-meta {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+  margin-bottom: 1rem;
+  color: var(--muted);
+  font-size: 0.88rem;
+}
+
+.writing-surface {
+  min-height: calc(100vh - 190px);
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  box-shadow: 0 12px 32px rgb(62 51 38 / 0.08);
+  padding: clamp(1rem, 4vw, 2rem);
+  transition: border-color 0.2s ease, box-shadow 0.2s ease;
+}
+
+.writing-surface:focus-within {
+  border-color: var(--primary);
+  box-shadow: 0 0 0 4px var(--focus), 0 12px 32px rgb(62 51 38 / 0.08);
+}
+
+.editor-textarea {
+  width: 100%;
+  min-height: calc(100vh - 285px);
+  border: 0;
+  outline: 0;
+  resize: none;
+  background: transparent;
+  color: var(--text);
+  font-family: Georgia, "Times New Roman", serif;
+  font-size: 1.12rem;
+  line-height: 1.85;
+}
+
+.editor-textarea::placeholder {
+  color: var(--subtle);
+}
+
+/* Mobile styles for smaller screens */
+@media (max-width: 640px) {
+  .auth-shell {
+    place-items: start center;
+    padding-top: 1.25rem;
+  }
+
+  .brand-lockup {
+    align-items: flex-start;
+  }
+
+  .auth-card {
+    padding: 1.4rem;
+  }
+
+  .navbar {
+    align-items: flex-start;
+    flex-direction: column;
+  }
+
+  .navbar-actions {
+    width: 100%;
+    justify-content: space-between;
+  }
+
+  .welcome-text {
+    max-width: 65%;
+  }
+
+  .editor-meta {
+    align-items: flex-start;
+    flex-direction: column;
+    gap: 0.25rem;
+  }
+
+  .editor-textarea {
+    font-size: 1.04rem;
+    min-height: calc(100vh - 315px);
+  }
+}
diff --git a/frontend/src/validation/authValidation.ts b/frontend/src/validation/authValidation.ts
new file mode 100644
index 000000000..85d0a09e0
--- /dev/null
+++ b/frontend/src/validation/authValidation.ts
@@ -0,0 +1,18 @@
+import { z } from "zod";
+
+// These are the rules for the register form.
+export const registerSchema = z.object({
+  name: z.string().min(2, "Name must be atleast 2 characters long"),
+  email: z.email("Invalid email address"),
+  password: z.string().min(6, "Password must be at least 6 characters long"),
+});
+
+// These are the rules for the login form.
+export const loginSchema = z.object({
+  email: z.email("Invalid email address"),
+  password: z.string().min(1, "Password is required"),
+});
+
+// These types are used by the forms so the fields match the validation rules.
+export type RegisterInput = z.infer<typeof registerSchema>;
+export type LoginInput = z.infer<typeof loginSchema>;
diff --git a/frontend/tsconfig.app.json b/frontend/tsconfig.app.json
new file mode 100644
index 000000000..7f42e5f7c
--- /dev/null
+++ b/frontend/tsconfig.app.json
@@ -0,0 +1,25 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "target": "es2023",
+    "lib": ["ES2023", "DOM"],
+    "module": "esnext",
+    "types": ["vite/client"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src"]
+}
diff --git a/frontend/tsconfig.json b/frontend/tsconfig.json
new file mode 100644
index 000000000..1ffef600d
--- /dev/null
+++ b/frontend/tsconfig.json
@@ -0,0 +1,7 @@
+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ]
+}
diff --git a/frontend/tsconfig.node.json b/frontend/tsconfig.node.json
new file mode 100644
index 000000000..d3c52ea64
--- /dev/null
+++ b/frontend/tsconfig.node.json
@@ -0,0 +1,24 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "target": "es2023",
+    "lib": ["ES2023"],
+    "module": "esnext",
+    "types": ["node"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["vite.config.ts"]
+}
diff --git a/frontend/vite.config.ts b/frontend/vite.config.ts
new file mode 100644
index 000000000..8b0f57b91
--- /dev/null
+++ b/frontend/vite.config.ts
@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [react()],
+})
diff --git a/package.json b/package.json
new file mode 100644
index 000000000..b9a87e321
--- /dev/null
+++ b/package.json
@@ -0,0 +1,13 @@
+{
+  "name": "vi-notes",
+  "private": true,
+  "version": "1.0.0",
+  "scripts": {
+    "dev": "concurrently \"npm run dev --prefix backend\" \"npm run dev --prefix frontend\"",
+    "dev:backend": "npm run dev --prefix backend",
+    "dev:frontend": "npm run dev --prefix frontend"
+  },
+  "devDependencies": {
+    "concurrently": "^9.0.0"
+  }
+}