project_context.txt

==============================
PROJECT STRUCTURE
==============================

./.env.example
./.eslintrc.cjs
./.gitignore
./ARCHITECTURE.md
./demo.gif
./demo.mov
./index.html
./package.json
./public/vite.svg
./README.md
./src/App.jsx
./src/app/router.jsx
./src/appwrite/config.js
./src/appwrite/databases.js
./src/assets/colors.json
./src/assets/fakeData.js
./src/assets/react.svg
./src/components/AddButton.jsx
./src/components/Color.jsx
./src/components/Controls.jsx
./src/components/DeleteButton.jsx
./src/components/NoteCard.jsx
./src/components/NotesBoard.jsx
./src/context/NotesContext.jsx
./src/icons/Plus.jsx
./src/icons/Spinner.jsx
./src/icons/Trash.jsx
./src/index.css
./src/main.jsx
./src/pages/LoginPage.jsx
./src/pages/NotesPage.jsx
./src/pages/NotFoundPage.jsx
./src/pages/SettingsPage.jsx
./src/services/notesService.js
./src/utils.js
./vite.config.js

==============================
FILE CONTENTS
==============================

============================================================
FILE: ./.env.example
============================================================
     1  VITE_ENDPOINT=https://cloud.appwrite.io/v1
     2  VITE_PROJECT_ID=
     3  VITE_DATABASE_ID=
     4  VITE_COLLECTION_NOTES_ID=

============================================================
FILE: ./.eslintrc.cjs
============================================================
     1  module.exports = {
     2    root: true,
     3    env: { browser: true, es2020: true },
     4    extends: [
     5      'eslint:recommended',
     6      'plugin:react/recommended',
     7      'plugin:react/jsx-runtime',
     8      'plugin:react-hooks/recommended',
     9    ],
    10    ignorePatterns: ['dist', '.eslintrc.cjs'],
    11    parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
    12    settings: { react: { version: '18.2' } },
    13    plugins: ['react-refresh'],
    14    rules: {
    15      'react-refresh/only-export-components': [
    16        'warn',
    17        { allowConstantExport: true },
    18      ],
    19    },
    20  }

============================================================
FILE: ./.gitignore
============================================================
     1  # Logs
     2  .env/
     3  .env
     4  logs
     5  *.log
     6  npm-debug.log*
     7  yarn-debug.log*
     8  yarn-error.log*
     9  pnpm-debug.log*
    10  lerna-debug.log*
    11  
    12  node_modules
    13  dist
    14  dist-ssr
    15  *.local
    16  
    17  # Editor directories and files
    18  .vscode/*
    19  !.vscode/extensions.json
    20  .idea
    21  .DS_Store
    22  *.suo
    23  *.ntvs*
    24  *.njsproj
    25  *.sln
    26  *.sw?
    27  .vercel
    28  .env*.local

============================================================
FILE: ./ARCHITECTURE.md
============================================================
     1  # Snappy Notes Architecture
     2  
     3  ## Stack
     4  
     5  - React 18
     6  - Vite
     7  - React Router
     8  - Appwrite
     9  - Plain CSS
    10  
    11  ## Routes
    12  
    13  - `/` redirects to `/notes`
    14  - `/notes` renders the notes workspace
    15  - `/login` is reserved for authentication
    16  - `/settings` is reserved for settings
    17  - Unknown URLs render the not-found page
    18  
    19  ## Responsibility boundaries
    20  
    21  ### Router
    22  
    23  `src/app/router.jsx` defines application routes.
    24  
    25  ### Pages
    26  
    27  Page components represent complete screens. Only the notes
    28  route mounts `NotesProvider`, so ordinary pages do not fetch notes.
    29  
    30  ### Notes context
    31  
    32  `NotesContext.jsx` owns:
    33  
    34  - Loaded notes
    35  - Selected note ID
    36  - Initial loading state
    37  - Initial load errors
    38  - Create, update, and delete actions
    39  
    40  ### Notes service
    41  
    42  `notesService.js` is the boundary between React and Appwrite.
    43  UI components do not import the Appwrite database directly.
    44  
    45  ### Notes board
    46  
    47  `NotesBoard.jsx` owns the board layout. The dark grid and scrolling
    48  belong to `.notes-board`, not to the root application element.

============================================================
FILE: ./index.html
============================================================
     1  <!doctype html>
     2  <html lang="en">
     3      <head>
     4          <meta charset="UTF-8" />
     5  
     6          <meta
     7              name="viewport"
     8              content="width=device-width, initial-scale=1.0"
     9          />
    10  
    11          <meta
    12              name="theme-color"
    13              content="#212228"
    14          />
    15  
    16          <title>Snappy Notes</title>
    17      </head>
    18  
    19      <body>
    20          <div id="root"></div>
    21          <script type="module" src="/src/main.jsx"></script>
    22      </body>
    23  </html>

============================================================
FILE: ./package.json
============================================================
     1  {
     2      "name": "snappy-notes",
     3      "private": true,
     4      "version": "0.0.0",
     5      "type": "module",
     6      "scripts": {
     7          "dev": "vite",
     8          "build": "vite build",
     9          "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
    10          "preview": "vite preview"
    11      },
    12      "dependencies": {
    13          "appwrite": "^15.0.0",
    14          "react": "^18.2.0",
    15          "react-dom": "^18.2.0",
    16          "react-router-dom": "^6.30.4"
    17      },
    18      "devDependencies": {
    19          "@types/react": "^18.2.15",
    20          "@types/react-dom": "^18.2.7",
    21          "@vitejs/plugin-react": "^4.0.3",
    22          "eslint": "^8.45.0",
    23          "eslint-plugin-react": "^7.32.2",
    24          "eslint-plugin-react-hooks": "^4.6.0",
    25          "eslint-plugin-react-refresh": "^0.4.3",
    26          "vite": "^4.4.5"
    27      }
    28  }

============================================================
FILE: ./README.md
============================================================
     1  # Sticky Notes React
     2  
     3  A modern, sticky notes application built with React, Vite, and Appwrite. Features a dynamic drag-and-drop interface, auto-saving capability, and real-time backend synchronization.
     4  
     5  ![Notes Screenshots](https://github.com/user-attachments/assets/aef7e95a-c900-43d8-879d-f23fbe40f60c)
     6  
     7  ## Features
     8  
     9  - **📝 Create & Edit Notes**: Easily add new sticky notes and edit their content seamlessly.
    10  - **💾 Auto-Saving**: Content changes are automatically saved to the Appwrite backend safely and securely.
    11  - **🖱️ Drag & Drop**: Organize your workspace by dragging notes anywhere on the screen. The position is persisted.
    12  - **🎨 Dynamic Colors**: Each note gets assigned coordinated header and body colors for a polished look.
    13  - **🗑️ Delete Notes**: intuitive controls to remove notes you no longer need.
    14  - **âš¡ Fast & Reactive**: Built with Vite for lightning-fast development and production performance.
    15  
    16  ## Tech Stack
    17  
    18  - **Frontend**: [React](https://react.dev/)
    19  - **Build Tool**: [Vite](https://vitejs.dev/)
    20  - **Backend**: [Appwrite](https://appwrite.io/) (Database & API)
    21  - **Icons**: Custom SVG Icons
    22  
    23  ## Getting Started
    24  
    25  Follow these steps to get the application running on your local machine.
    26  
    27  ### Prerequisites
    28  
    29  - [Node.js](https://nodejs.org/) (v16 or higher)
    30  - An [Appwrite](https://appwrite.io/) account and project
    31  
    32  ### Installation
    33  
    34  1.  **Clone the repository**
    35  
    36      ```bash
    37      git clone <repository-url>
    38      cd NotesWithBackend
    39      ```
    40  
    41  2.  **Install dependencies**
    42  
    43      ```bash
    44      npm install
    45      ```
    46  
    47  3.  **Environment Configuration**
    48      Create a `.env.local` file in the root directory. You can use `.env.example` as a reference. Add your Appwrite configuration keys:
    49  
    50      ```properties
    51      VITE_ENDPOINT="https://cloud.appwrite.io/v1"
    52      VITE_PROJECT_ID="your_project_id"
    53      VITE_DATABASE_ID="your_database_id"
    54      VITE_COLLECTION_NOTES_ID="your_collection_id"
    55      ```
    56  
    57  4.  **Run the application**
    58  
    59      ```bash
    60      npm run dev
    61      ```
    62  
    63      Open `http://localhost:5173` in your browser to view the app.
    64  
    65  ## Documentation
    66  
    67  For a detailed look at the project's architecture, data models, and directory structure, please refer to [ARCHITECTURE.md](./ARCHITECTURE.md).
    68  
    69  ## Project Structure
    70  
    71  - `src/appwrite`: Appwrite configuration and service setup.
    72  - `src/components`: Reusable UI components (NoteCard, Controls, etc.).
    73  - `src/context`: React Context for state management.
    74  - `src/pages`: Main application pages.
    75  - `src/utils.js`: Utility functions for logic like auto-grow and positioning.
    76  
    77  ## Contributing
    78  
    79  Contributions are welcome! Please feel free to submit a Pull Request.

============================================================
FILE: ./src/App.jsx
============================================================
     1  import { RouterProvider } from "react-router-dom";
     2  import router from "./app/router";
     3  
     4  function App() {
     5      return <RouterProvider router={router} />;
     6  }
     7  
     8  export default App;

============================================================
FILE: ./src/app/router.jsx
============================================================
     1  import {
     2      createBrowserRouter,
     3      Navigate,
     4  } from "react-router-dom";
     5  
     6  import NotesProvider from "../context/NotesContext";
     7  import NotesPage from "../pages/NotesPage";
     8  import LoginPage from "../pages/LoginPage";
     9  import SettingsPage from "../pages/SettingsPage";
    10  import NotFoundPage from "../pages/NotFoundPage";
    11  
    12  const router = createBrowserRouter([
    13      {
    14          path: "/",
    15          element: <Navigate to="/notes" replace />,
    16      },
    17      {
    18          path: "/notes",
    19          element: (
    20              <NotesProvider>
    21                  <NotesPage />
    22              </NotesProvider>
    23          ),
    24      },
    25      {
    26          path: "/login",
    27          element: <LoginPage />,
    28      },
    29      {
    30          path: "/settings",
    31          element: <SettingsPage />,
    32      },
    33      {
    34          path: "*",
    35          element: <NotFoundPage />,
    36      },
    37  ]);
    38  
    39  export default router;

============================================================
FILE: ./src/appwrite/config.js
============================================================
     1  import { Client, Databases, Account } from "appwrite";
     2  
     3  const client = new Client()
     4      .setEndpoint(import.meta.env.VITE_ENDPOINT)
     5      .setProject(import.meta.env.VITE_PROJECT_ID);
     6  
     7  const databases = new Databases(client);
     8  const account = new Account(client);
     9  
    10  export { client, databases, account };

============================================================
FILE: ./src/appwrite/databases.js
============================================================
     1  import { databases } from "./config";
     2  import { ID } from "appwrite";
     3  
     4  const collections = [
     5      {
     6          name: "notes",
     7          id: import.meta.env.VITE_COLLECTION_NOTES_ID,
     8      },
     9  ];
    10  
    11  const db = {};
    12  
    13  collections.forEach((collection) => {
    14      db[collection.name] = {
    15          create: async (payload, id = ID.unique()) => {
    16              return await databases.createDocument(
    17                  import.meta.env.VITE_DATABASE_ID,
    18                  collection.id,
    19                  id,
    20                  payload
    21              );
    22          },
    23          update: async (id, payload) => {
    24              console.log("Updating:", id);
    25              return await databases.updateDocument(
    26                  import.meta.env.VITE_DATABASE_ID,
    27                  collection.id,
    28                  id,
    29                  payload
    30              );
    31          },
    32          delete: async (id) => {
    33              return await databases.deleteDocument(
    34                  import.meta.env.VITE_DATABASE_ID,
    35                  collection.id,
    36                  id
    37              );
    38          },
    39          get: async (id) => {
    40              return await databases.getDocument(
    41                  import.meta.env.VITE_DATABASE_ID,
    42                  collection.id,
    43                  id
    44              );
    45          },
    46          list: async (queries) => {
    47              return await databases.listDocuments(
    48                  import.meta.env.VITE_DATABASE_ID,
    49                  collection.id,
    50                  queries
    51              );
    52          },
    53      };
    54  });
    55  
    56  export { db };

============================================================
FILE: ./src/assets/colors.json
============================================================
     1  [
     2      {
     3          "id":"color-yellow",
     4          "colorHeader":"#FFEFBE",
     5          "colorBody":"#FFF5DF",
     6          "colorText":"#18181A"
     7      },
     8      {
     9          "id":"color-green",
    10          "colorHeader":"#AFDA9F",
    11          "colorBody":"#BCDEAF",
    12          "colorText":"#18181A"
    13      },
    14      {
    15          "id":"color-blue",
    16          "colorHeader":"#9BD1DE",
    17          "colorBody":"#A6DCE9",
    18          "colorText":"#18181A"
    19      },
    20      {
    21          "id":"color-purple",
    22          "colorHeader":"#FED0FD",
    23          "colorBody":"#FEE5FD",
    24          "colorText":"#18181A"
    25      }
    26  ]

============================================================
FILE: ./src/assets/fakeData.js
============================================================
     1  export const fakeData = [
     2      {
     3          $id: 1,
     4          body: JSON.stringify(
     5              'Resources:\n- Book: "You Don\'t Know JS: Scope & Closures" by Kyle Simpson.\n\n- Online Course: "JavaScript Patterns" on Udemy.\n\n- Articles:\n"Understanding JavaScript Closures" on Medium.\n\n"Mastering JavaScript Modules" on Dev.to.'
     6          ),
     7          colors: JSON.stringify({
     8              id: "color-purple",
     9              colorHeader: "#FED0FD",
    10              colorBody: "#FEE5FD",
    11              colorText: "#18181A",
    12          }),
    13          position: JSON.stringify({ x: 505, y: 10 }),
    14      },
    15      {
    16          $id: 2,
    17          body: JSON.stringify(
    18              'Resources:\n- Book: "You Don\'t Know JS: Scope & Closures" by Kyle Simpson.\n\n- Online Course: "JavaScript Patterns" on Udemy.\n\n- Articles:\n"Understanding JavaScript Closures" on Medium.\n\n"Mastering JavaScript Modules" on Dev.to.'
    19          ),
    20          colors: JSON.stringify({
    21              id: "color-blue",
    22              colorHeader: "#9BD1DE",
    23              colorBody: "#A6DCE9",
    24              colorText: "#18181A",
    25          }),
    26          position: JSON.stringify({ x: 305, y: 110 }),
    27      },
    28      {
    29          $id: 3,
    30          body: JSON.stringify(
    31              'Resources:\n- Book: "You Don\'t Know JS: Scope & Closures" by Kyle Simpson.\n\n- Online Course: "JavaScript Patterns" on Udemy.\n\n- Articles:\n"Understanding JavaScript Closures" on Medium.\n\n"Mastering JavaScript Modules" on Dev.to.'
    32          ),
    33          colors: JSON.stringify({
    34              id: "color-yellow",
    35              colorHeader: "#FFEFBE",
    36              colorBody: "#FFF5DF",
    37              colorText: "#18181A",
    38          }),
    39          position: JSON.stringify({ x: 605, y: 500 }),
    40      },
    41  ];

============================================================
FILE: ./src/components/AddButton.jsx
============================================================
     1  import { useRef, useState } from "react";
     2  
     3  import Plus from "../icons/Plus";
     4  import colors from "../assets/colors.json";
     5  import { useNotes } from "../context/NotesContext";
     6  
     7  const AddButton = () => {
     8      const { createNote } = useNotes();
     9      const startingPosition = useRef(10);
    10      const [creating, setCreating] = useState(false);
    11  
    12      const addNote = async () => {
    13          if (creating) {
    14              return;
    15          }
    16  
    17          const payload = {
    18              body: JSON.stringify(""),
    19              position: JSON.stringify({
    20                  x: startingPosition.current,
    21                  y: startingPosition.current,
    22              }),
    23              colors: JSON.stringify(colors[0]),
    24          };
    25  
    26          setCreating(true);
    27  
    28          try {
    29              await createNote(payload);
    30              startingPosition.current += 10;
    31          } catch (error) {
    32              console.error("Failed to create note:", error);
    33              alert("The note could not be created.");
    34          } finally {
    35              setCreating(false);
    36          }
    37      };
    38  
    39      return (
    40          <button
    41              id="add-btn"
    42              type="button"
    43              aria-label="Add note"
    44              disabled={creating}
    45              onClick={addNote}
    46          >
    47              <Plus />
    48          </button>
    49      );
    50  };
    51  
    52  export default AddButton;

============================================================
FILE: ./src/components/Color.jsx
============================================================
     1  import { useState } from "react";
     2  
     3  import { useNotes } from "../context/NotesContext";
     4  
     5  const Color = ({ color }) => {
     6      const { selectedNoteId, updateNote } = useNotes();
     7      const [updating, setUpdating] = useState(false);
     8  
     9      const changeColor = async () => {
    10          if (!selectedNoteId) {
    11              alert("Select a note before changing its colour.");
    12              return;
    13          }
    14  
    15          if (updating) {
    16              return;
    17          }
    18  
    19          setUpdating(true);
    20  
    21          try {
    22              await updateNote(selectedNoteId, {
    23                  colors: JSON.stringify(color),
    24              });
    25          } catch (error) {
    26              console.error("Failed to update note colour:", error);
    27              alert("The note colour could not be changed.");
    28          } finally {
    29              setUpdating(false);
    30          }
    31      };
    32  
    33      return (
    34          <button
    35              type="button"
    36              className="color"
    37              aria-label={`Use ${color.id}`}
    38              title={color.id}
    39              disabled={updating}
    40              onClick={changeColor}
    41              style={{
    42                  backgroundColor: color.colorHeader,
    43              }}
    44          />
    45      );
    46  };
    47  
    48  export default Color;

============================================================
FILE: ./src/components/Controls.jsx
============================================================
     1  import AddButton from "./AddButton";
     2  import Color from "./Color";
     3  import colors from "../assets/colors.json";
     4  
     5  const Controls = () => {
     6      return (
     7          <aside id="controls" aria-label="Note controls">
     8              <AddButton />
     9  
    10              {colors.map((color) => (
    11                  <Color key={color.id} color={color} />
    12              ))}
    13          </aside>
    14      );
    15  };
    16  
    17  export default Controls;

============================================================
FILE: ./src/components/DeleteButton.jsx
============================================================
     1  import { useState } from "react";
     2  
     3  import Trash from "../icons/Trash";
     4  import { useNotes } from "../context/NotesContext";
     5  
     6  const DeleteButton = ({ noteId }) => {
     7      const { deleteNote } = useNotes();
     8      const [deleting, setDeleting] = useState(false);
     9  
    10      const handleDelete = async (event) => {
    11          event.stopPropagation();
    12  
    13          if (deleting) {
    14              return;
    15          }
    16  
    17          setDeleting(true);
    18  
    19          try {
    20              await deleteNote(noteId);
    21          } catch (error) {
    22              console.error("Failed to delete note:", error);
    23              alert("The note could not be deleted.");
    24              setDeleting(false);
    25          }
    26      };
    27  
    28      return (
    29          <button
    30              type="button"
    31              className="icon-button"
    32              aria-label="Delete note"
    33              disabled={deleting}
    34              onMouseDown={(event) => event.stopPropagation()}
    35              onClick={handleDelete}
    36          >
    37              <Trash />
    38          </button>
    39      );
    40  };
    41  
    42  export default DeleteButton;

============================================================
FILE: ./src/components/NoteCard.jsx
============================================================
     1  import {
     2      useEffect,
     3      useRef,
     4      useState,
     5  } from "react";
     6  
     7  import DeleteButton from "./DeleteButton";
     8  import Spinner from "../icons/Spinner";
     9  import {
    10      autoGrow,
    11      bodyParser,
    12      parseStoredJson,
    13      setNewOffset,
    14      setZIndex,
    15  } from "../utils";
    16  import { useNotes } from "../context/NotesContext";
    17  
    18  const DEFAULT_POSITION = {
    19      x: 10,
    20      y: 10,
    21  };
    22  
    23  const DEFAULT_COLORS = {
    24      colorHeader: "#FFEFBE",
    25      colorBody: "#FFF5DF",
    26      colorText: "#18181A",
    27  };
    28  
    29  const NoteCard = ({ note }) => {
    30      const { setSelectedNoteId, updateNote } = useNotes();
    31  
    32      const cardRef = useRef(null);
    33      const textAreaRef = useRef(null);
    34      const saveTimerRef = useRef(null);
    35      const mouseStartPosition = useRef({
    36          x: 0,
    37          y: 0,
    38      });
    39  
    40      const [saving, setSaving] = useState(false);
    41  
    42      const [position, setPosition] = useState(() =>
    43          parseStoredJson(note.position, DEFAULT_POSITION)
    44      );
    45  
    46      const colors = parseStoredJson(
    47          note.colors,
    48          DEFAULT_COLORS
    49      );
    50  
    51      const body = bodyParser(note.body);
    52  
    53      useEffect(() => {
    54          autoGrow(textAreaRef);
    55          setZIndex(cardRef.current);
    56  
    57          return () => {
    58              if (saveTimerRef.current) {
    59                  clearTimeout(saveTimerRef.current);
    60              }
    61          };
    62      }, []);
    63  
    64      const saveData = async (key, value) => {
    65          await updateNote(note.$id, {
    66              [key]: JSON.stringify(value),
    67          });
    68      };
    69  
    70      const handleMouseMove = (event) => {
    71          event.preventDefault();
    72  
    73          const mouseMovement = {
    74              x: mouseStartPosition.current.x - event.clientX,
    75              y: mouseStartPosition.current.y - event.clientY,
    76          };
    77  
    78          mouseStartPosition.current = {
    79              x: event.clientX,
    80              y: event.clientY,
    81          };
    82  
    83          const nextPosition = setNewOffset(
    84              cardRef.current,
    85              mouseMovement
    86          );
    87  
    88          setPosition(nextPosition);
    89      };
    90  
    91      const handleMouseUp = () => {
    92          document.removeEventListener(
    93              "mousemove",
    94              handleMouseMove
    95          );
    96  
    97          document.removeEventListener(
    98              "mouseup",
    99              handleMouseUp
   100          );
   101  
   102          const nextPosition = setNewOffset(cardRef.current);
   103  
   104          void saveData("position", nextPosition).catch((error) => {
   105              console.error("Failed to save note position:", error);
   106          });
   107      };
   108  
   109      const handleMouseDown = (event) => {
   110          if (event.button !== 0) {
   111              return;
   112          }
   113  
   114          mouseStartPosition.current = {
   115              x: event.clientX,
   116              y: event.clientY,
   117          };
   118  
   119          setSelectedNoteId(note.$id);
   120          setZIndex(cardRef.current);
   121  
   122          document.addEventListener(
   123              "mousemove",
   124              handleMouseMove
   125          );
   126  
   127          document.addEventListener(
   128              "mouseup",
   129              handleMouseUp
   130          );
   131      };
   132  
   133      const handleInput = () => {
   134          autoGrow(textAreaRef);
   135          setSaving(true);
   136  
   137          if (saveTimerRef.current) {
   138              clearTimeout(saveTimerRef.current);
   139          }
   140  
   141          saveTimerRef.current = setTimeout(
   142              async () => {
   143                  try {
   144                      await saveData(
   145                          "body",
   146                          textAreaRef.current.value
   147                      );
   148                  } catch (error) {
   149                      console.error(
   150                          "Failed to save note body:",
   151                          error
   152                      );
   153                  } finally {
   154                      setSaving(false);
   155                  }
   156              },
   157              1200
   158          );
   159      };
   160  
   161      return (
   162          <article
   163              ref={cardRef}
   164              className="card"
   165              style={{
   166                  left: `${position.x}px`,
   167                  top: `${position.y}px`,
   168                  backgroundColor: colors.colorBody,
   169              }}
   170          >
   171              <header
   172                  className="card-header"
   173                  onMouseDown={handleMouseDown}
   174                  style={{
   175                      backgroundColor: colors.colorHeader,
   176                  }}
   177              >
   178                  <DeleteButton noteId={note.$id} />
   179  
   180                  {saving && (
   181                      <div className="card-saving">
   182                          <Spinner color={colors.colorText} />
   183                          <span style={{ color: colors.colorText }}>
   184                              Saving...
   185                          </span>
   186                      </div>
   187                  )}
   188              </header>
   189  
   190              <div className="card-body">
   191                  <textarea
   192                      ref={textAreaRef}
   193                      defaultValue={body}
   194                      aria-label="Note body"
   195                      onFocus={() => {
   196                          setZIndex(cardRef.current);
   197                          setSelectedNoteId(note.$id);
   198                      }}
   199                      onInput={handleInput}
   200                      style={{
   201                          color: colors.colorText,
   202                      }}
   203                  />
   204              </div>
   205          </article>
   206      );
   207  };
   208  
   209  export default NoteCard;

============================================================
FILE: ./src/components/NotesBoard.jsx
============================================================
     1  import { Link } from "react-router-dom";
     2  
     3  import Controls from "./Controls";
     4  import NoteCard from "./NoteCard";
     5  import { useNotes } from "../context/NotesContext";
     6  
     7  const NotesBoard = () => {
     8      const { notes } = useNotes();
     9  
    10      return (
    11          <main className="notes-board">
    12              <nav className="board-navigation">
    13                  <Link to="/notes">Notes</Link>
    14                  <Link to="/settings">Settings</Link>
    15              </nav>
    16  
    17              {notes.length === 0 && (
    18                  <div className="empty-board-message">
    19                      <strong>No notes yet</strong>
    20                      <span>Use the plus button to create one.</span>
    21                  </div>
    22              )}
    23  
    24              {notes.map((note) => (
    25                  <NoteCard key={note.$id} note={note} />
    26              ))}
    27  
    28              <Controls />
    29          </main>
    30      );
    31  };
    32  
    33  export default NotesBoard;

============================================================
FILE: ./src/context/NotesContext.jsx
============================================================
     1  import {
     2      createContext,
     3      useCallback,
     4      useContext,
     5      useEffect,
     6      useMemo,
     7      useState,
     8  } from "react";
     9  
    10  import Spinner from "../icons/Spinner";
    11  import { notesService } from "../services/notesService";
    12  
    13  export const NotesContext = createContext(null);
    14  
    15  export const useNotes = () => {
    16      const context = useContext(NotesContext);
    17  
    18      if (!context) {
    19          throw new Error("useNotes must be used inside NotesProvider");
    20      }
    21  
    22      return context;
    23  };
    24  
    25  const NotesProvider = ({ children }) => {
    26      const [notes, setNotes] = useState([]);
    27      const [selectedNoteId, setSelectedNoteId] = useState(null);
    28      const [loading, setLoading] = useState(true);
    29      const [loadError, setLoadError] = useState(null);
    30  
    31      const loadNotes = useCallback(async () => {
    32          setLoading(true);
    33          setLoadError(null);
    34  
    35          try {
    36              const loadedNotes = await notesService.list();
    37              setNotes(loadedNotes);
    38          } catch (error) {
    39              console.error("Failed to load notes:", error);
    40              setLoadError(error);
    41          } finally {
    42              setLoading(false);
    43          }
    44      }, []);
    45  
    46      useEffect(() => {
    47          void loadNotes();
    48      }, [loadNotes]);
    49  
    50      const createNote = useCallback(async (payload) => {
    51          const createdNote = await notesService.create(payload);
    52  
    53          setNotes((currentNotes) => [
    54              createdNote,
    55              ...currentNotes,
    56          ]);
    57  
    58          return createdNote;
    59      }, []);
    60  
    61      const updateNote = useCallback(async (id, payload) => {
    62          const updatedNote = await notesService.update(id, payload);
    63  
    64          setNotes((currentNotes) =>
    65              currentNotes.map((note) =>
    66                  note.$id === id
    67                      ? { ...note, ...updatedNote }
    68                      : note
    69              )
    70          );
    71  
    72          return updatedNote;
    73      }, []);
    74  
    75      const deleteNote = useCallback(async (id) => {
    76          await notesService.remove(id);
    77  
    78          setNotes((currentNotes) =>
    79              currentNotes.filter((note) => note.$id !== id)
    80          );
    81  
    82          setSelectedNoteId((currentId) =>
    83              currentId === id ? null : currentId
    84          );
    85      }, []);
    86  
    87      const contextValue = useMemo(
    88          () => ({
    89              notes,
    90              selectedNoteId,
    91              setSelectedNoteId,
    92              createNote,
    93              updateNote,
    94              deleteNote,
    95              reloadNotes: loadNotes,
    96          }),
    97          [
    98              notes,
    99              selectedNoteId,
   100              createNote,
   101              updateNote,
   102              deleteNote,
   103              loadNotes,
   104          ]
   105      );
   106  
   107      if (loading) {
   108          return (
   109              <div className="page-state">
   110                  <Spinner size="64" />
   111                  <p>Loading notes...</p>
   112              </div>
   113          );
   114      }
   115  
   116      if (loadError) {
   117          return (
   118              <div className="page-state">
   119                  <h1>Could not load notes</h1>
   120                  <p>{loadError.message || "The notes request failed."}</p>
   121  
   122                  <button
   123                      type="button"
   124                      className="primary-button"
   125                      onClick={loadNotes}
   126                  >
   127                      Try again
   128                  </button>
   129              </div>
   130          );
   131      }
   132  
   133      return (
   134          <NotesContext.Provider value={contextValue}>
   135              {children}
   136          </NotesContext.Provider>
   137      );
   138  };
   139  
   140  export default NotesProvider;

============================================================
FILE: ./src/icons/Plus.jsx
============================================================
     1  import React from "react";
     2  
     3  const Plus = ({ size = "24", color = "#FFFFFF" }) => {
     4      return (
     5          <svg
     6              xmlns="http://www.w3.org/2000/svg"
     7              viewBox="0 0 24 24"
     8              width={size}
     9              height={size}
    10              stroke={color}
    11              fill="none"
    12              strokeWidth="2.5"
    13          >
    14              <path strokeLinecap="round" d="M18 12H6M12 6v12"></path>
    15          </svg>
    16      );
    17  };
    18  
    19  export default Plus;

============================================================
FILE: ./src/icons/Spinner.jsx
============================================================
     1  import React from "react";
     2  
     3  const Spinner = ({ color = "#fff", size = "20" }) => {
     4      return (
     5          <svg
     6              className="spinner"
     7              xmlns="http://www.w3.org/2000/svg"
     8              viewBox="0 0 24 24"
     9              width={size}
    10              height={size}
    11              stroke={color}
    12              fill="none"
    13              strokeWidth="1.5"
    14          >
    15              <path
    16                  strokeLinecap="round"
    17                  strokeLinejoin="round"
    18                  d="M12 20c-4.416 0-8-3.584-8-8s4.448-7.112 4.448-7.112m0 0v3.616m0-3.616h-4M12 4c4.416 0 8 3.552 8 8 0 5.336-4.448 8-4.448 8m0 0h4m-4 0v-3.552"
    19              ></path>
    20          </svg>
    21      );
    22  };
    23  
    24  export default Spinner;

============================================================
FILE: ./src/icons/Trash.jsx
============================================================
     1  import React from "react";
     2  
     3  const Trash = ({ size = "24" }) => {
     4      return (
     5          <svg
     6              xmlns="http://www.w3.org/2000/svg"
     7              viewBox="0 0 24 24"
     8              width={size}
     9              height={size}
    10              stroke="#000000"
    11              fill="none"
    12              strokeWidth="1.5"
    13          >
    14              <path d="m6 8 .668 8.681c.148 1.924.222 2.885.84 3.423.068.06.14.115.217.165.685.449 1.63.26 3.522-.118.36-.072.54-.108.721-.111h.064c.182.003.361.039.72.11 1.892.379 2.838.568 3.523.12.076-.05.15-.106.218-.166.617-.538.691-1.5.84-3.423L18 8"></path>
    15              <path
    16                  strokeLinecap="round"
    17                  d="m10.151 12.5.245 3.492M13.849 12.5l-.245 3.492M4 8s4.851 1 8 1 8-1 8-1M8 5l.447-.894A2 2 0 0 1 10.237 3h3.527a2 2 0 0 1 1.789 1.106L16 5"
    18              ></path>
    19          </svg>
    20      );
    21  };
    22  
    23  export default Trash;

============================================================
FILE: ./src/index.css
============================================================
     1  :root {
     2      font-family:
     3          Inter,
     4          system-ui,
     5          -apple-system,
     6          BlinkMacSystemFont,
     7          "Segoe UI",
     8          sans-serif;
     9  
    10      color: #18181a;
    11      background: #f3f4f6;
    12      font-synthesis: none;
    13      text-rendering: optimizeLegibility;
    14      -webkit-font-smoothing: antialiased;
    15      -moz-osx-font-smoothing: grayscale;
    16      --spinner-animation-speed: 2s;
    17  }
    18  
    19  * {
    20      box-sizing: border-box;
    21  }
    22  
    23  html,
    24  body,
    25  #root {
    26      min-width: 100%;
    27      min-height: 100%;
    28      margin: 0;
    29  }
    30  
    31  button,
    32  textarea,
    33  input {
    34      font: inherit;
    35  }
    36  
    37  button {
    38      border: 0;
    39  }
    40  
    41  a {
    42      color: inherit;
    43  }
    44  
    45  @keyframes spin {
    46      from {
    47          transform: rotate(0deg);
    48      }
    49  
    50      to {
    51          transform: rotate(360deg);
    52      }
    53  }
    54  
    55  .spinner {
    56      animation:
    57          spin
    58          var(--spinner-animation-speed)
    59          linear
    60          infinite;
    61  }
    62  
    63  .notes-board {
    64      position: relative;
    65      width: 100%;
    66      height: 100vh;
    67      overflow: auto;
    68  
    69      background-color: #212228;
    70      background-image:
    71          linear-gradient(
    72              #292a30 0.1em,
    73              transparent 0.1em
    74          ),
    75          linear-gradient(
    76              90deg,
    77              #292a30 0.1em,
    78              transparent 0.1em
    79          );
    80  
    81      background-size: 4em 4em;
    82  }
    83  
    84  .board-navigation {
    85      position: fixed;
    86      top: 16px;
    87      right: 20px;
    88      z-index: 10000;
    89  
    90      display: flex;
    91      gap: 8px;
    92      padding: 6px;
    93  
    94      background: rgba(53, 54, 62, 0.94);
    95      border: 1px solid rgba(255, 255, 255, 0.08);
    96      border-radius: 12px;
    97  
    98      box-shadow:
    99          0 8px 24px rgba(0, 0, 0, 0.18);
   100  }
   101  
   102  .board-navigation a {
   103      padding: 8px 12px;
   104      color: #f7f7f8;
   105      text-decoration: none;
   106      border-radius: 8px;
   107  }
   108  
   109  .board-navigation a:hover {
   110      background: rgba(255, 255, 255, 0.1);
   111  }
   112  
   113  .empty-board-message {
   114      position: absolute;
   115      top: 50%;
   116      left: 50%;
   117  
   118      display: flex;
   119      flex-direction: column;
   120      gap: 5px;
   121  
   122      padding: 18px 22px;
   123      color: #b8bac3;
   124      text-align: center;
   125  
   126      transform: translate(-50%, -50%);
   127  }
   128  
   129  .empty-board-message strong {
   130      color: #ffffff;
   131      font-size: 18px;
   132  }
   133  
   134  .card {
   135      position: absolute;
   136      width: 400px;
   137      max-width: calc(100vw - 32px);
   138  
   139      overflow: hidden;
   140      cursor: default;
   141      border-radius: 6px;
   142  
   143      box-shadow:
   144          0 1px 1px hsl(0deg 0% 0% / 0.075),
   145          0 2px 2px hsl(0deg 0% 0% / 0.075),
   146          0 4px 4px hsl(0deg 0% 0% / 0.075),
   147          0 8px 8px hsl(0deg 0% 0% / 0.075),
   148          0 16px 16px hsl(0deg 0% 0% / 0.075);
   149  }
   150  
   151  .card-header {
   152      display: flex;
   153      align-items: center;
   154      justify-content: space-between;
   155  
   156      min-height: 34px;
   157      padding: 5px 7px;
   158      cursor: grab;
   159      user-select: none;
   160  }
   161  
   162  .card-header:active {
   163      cursor: grabbing;
   164  }
   165  
   166  .card-saving {
   167      display: flex;
   168      align-items: center;
   169      gap: 5px;
   170      font-size: 13px;
   171  }
   172  
   173  .card-body {
   174      padding: 1em;
   175  }
   176  
   177  .card-body textarea {
   178      display: block;
   179      width: 100%;
   180      min-height: 44px;
   181  
   182      padding: 0;
   183      overflow: hidden;
   184      resize: none;
   185  
   186      background-color: inherit;
   187      border: none;
   188      outline: none;
   189      font-size: 16px;
   190      line-height: 1.5;
   191  }
   192  
   193  .icon-button {
   194      display: inline-flex;
   195      align-items: center;
   196      justify-content: center;
   197  
   198      width: 28px;
   199      height: 28px;
   200      padding: 2px;
   201  
   202      cursor: pointer;
   203      background: transparent;
   204      border-radius: 6px;
   205  }
   206  
   207  .icon-button:hover {
   208      background: rgba(0, 0, 0, 0.08);
   209  }
   210  
   211  .icon-button:disabled {
   212      cursor: wait;
   213      opacity: 0.5;
   214  }
   215  
   216  #controls {
   217      position: fixed;
   218      top: 50%;
   219      left: 1em;
   220      z-index: 10000;
   221  
   222      display: flex;
   223      flex-direction: column;
   224      align-items: center;
   225      gap: 1em;
   226  
   227      padding: 1em;
   228      transform: translateY(-50%);
   229  
   230      background-color: #35363e;
   231      border-radius: 40px;
   232  
   233      box-shadow:
   234          0 1px 1px hsl(0deg 0% 0% / 0.075),
   235          0 2px 2px hsl(0deg 0% 0% / 0.075),
   236          0 4px 4px hsl(0deg 0% 0% / 0.075),
   237          0 8px 8px hsl(0deg 0% 0% / 0.075),
   238          0 16px 16px hsl(0deg 0% 0% / 0.075);
   239  }
   240  
   241  #add-btn,
   242  .color {
   243      flex: 0 0 auto;
   244      width: 40px;
   245      height: 40px;
   246      padding: 0;
   247  
   248      cursor: pointer;
   249      border-radius: 50%;
   250      transition:
   251          transform 160ms ease,
   252          opacity 160ms ease;
   253  }
   254  
   255  #add-btn {
   256      display: flex;
   257      align-items: center;
   258      justify-content: center;
   259      background-color: rgb(107, 107, 107);
   260  }
   261  
   262  #add-btn:hover,
   263  .color:hover {
   264      transform: scale(1.12);
   265  }
   266  
   267  #add-btn:disabled,
   268  .color:disabled {
   269      cursor: wait;
   270      opacity: 0.55;
   271      transform: none;
   272  }
   273  
   274  .standard-page,
   275  .page-state {
   276      display: grid;
   277      min-height: 100vh;
   278      place-items: center;
   279      padding: 24px;
   280  
   281      background:
   282          linear-gradient(
   283              135deg,
   284              #f8fafc,
   285              #eef1f5
   286          );
   287  }
   288  
   289  .page-state {
   290      align-content: center;
   291      gap: 12px;
   292      text-align: center;
   293  }
   294  
   295  .page-card {
   296      width: min(100%, 560px);
   297      padding: 42px;
   298  
   299      background: #ffffff;
   300      border: 1px solid #e1e4e8;
   301      border-radius: 18px;
   302  
   303      box-shadow:
   304          0 24px 60px rgba(31, 41, 55, 0.1);
   305  }
   306  
   307  .page-eyebrow {
   308      margin: 0 0 8px;
   309      color: #646a73;
   310  
   311      font-size: 13px;
   312      font-weight: 700;
   313      letter-spacing: 0.12em;
   314      text-transform: uppercase;
   315  }
   316  
   317  .page-card h1,
   318  .page-state h1 {
   319      margin: 0 0 14px;
   320      font-size: clamp(32px, 6vw, 50px);
   321      line-height: 1;
   322  }
   323  
   324  .page-card p,
   325  .page-state p {
   326      color: #5c626c;
   327      line-height: 1.65;
   328  }
   329  
   330  .page-actions {
   331      display: flex;
   332      flex-wrap: wrap;
   333      gap: 10px;
   334      margin-top: 28px;
   335  }
   336  
   337  .primary-link,
   338  .secondary-link,
   339  .primary-button {
   340      display: inline-flex;
   341      align-items: center;
   342      justify-content: center;
   343  
   344      min-height: 42px;
   345      padding: 0 16px;
   346  
   347      cursor: pointer;
   348      border-radius: 9px;
   349      font-weight: 650;
   350      text-decoration: none;
   351  }
   352  
   353  .primary-link,
   354  .primary-button {
   355      color: #ffffff;
   356      background: #202228;
   357  }
   358  
   359  .secondary-link {
   360      color: #202228;
   361      background: #eceef1;
   362  }
   363  
   364  .primary-link:hover,
   365  .primary-button:hover {
   366      background: #343740;
   367  }
   368  
   369  .secondary-link:hover {
   370      background: #dfe2e7;
   371  }
   372  
   373  @media (max-width: 600px) {
   374      .card {
   375          width: 320px;
   376      }
   377  
   378      .page-card {
   379          padding: 28px;
   380      }
   381  
   382      .board-navigation {
   383          top: 10px;
   384          right: 10px;
   385      }
   386  }

============================================================
FILE: ./src/main.jsx
============================================================
     1  import React from 'react'
     2  import ReactDOM from 'react-dom/client'
     3  import App from './App.jsx'
     4  import './index.css'
     5  
     6  ReactDOM.createRoot(document.getElementById('root')).render(
     7    <React.StrictMode>
     8      <App />
     9    </React.StrictMode>,
    10  )

============================================================
FILE: ./src/pages/LoginPage.jsx
============================================================
     1  import { Link } from "react-router-dom";
     2  
     3  const LoginPage = () => {
     4      return (
     5          <main className="standard-page">
     6              <section className="page-card">
     7                  <p className="page-eyebrow">Snappy Notes</p>
     8                  <h1>Login</h1>
     9  
    10                  <p>
    11                      Authentication will live on this page.
    12                      It is now separate from the notes board.
    13                  </p>
    14  
    15                  <div className="page-actions">
    16                      <Link className="primary-link" to="/notes">
    17                          Open notes
    18                      </Link>
    19                  </div>
    20              </section>
    21          </main>
    22      );
    23  };
    24  
    25  export default LoginPage;

============================================================
FILE: ./src/pages/NotesPage.jsx
============================================================
     1  import NotesBoard from "../components/NotesBoard";
     2  
     3  const NotesPage = () => {
     4      return <NotesBoard />;
     5  };
     6  
     7  export default NotesPage;

============================================================
FILE: ./src/pages/NotFoundPage.jsx
============================================================
     1  import { Link } from "react-router-dom";
     2  
     3  const NotFoundPage = () => {
     4      return (
     5          <main className="standard-page">
     6              <section className="page-card">
     7                  <p className="page-eyebrow">404</p>
     8                  <h1>Page not found</h1>
     9  
    10                  <p>This route does not exist.</p>
    11  
    12                  <div className="page-actions">
    13                      <Link className="primary-link" to="/notes">
    14                          Return to notes
    15                      </Link>
    16                  </div>
    17              </section>
    18          </main>
    19      );
    20  };
    21  
    22  export default NotFoundPage;

============================================================
FILE: ./src/pages/SettingsPage.jsx
============================================================
     1  import { Link } from "react-router-dom";
     2  
     3  const SettingsPage = () => {
     4      return (
     5          <main className="standard-page">
     6              <section className="page-card">
     7                  <p className="page-eyebrow">Snappy Notes</p>
     8                  <h1>Settings</h1>
     9  
    10                  <p>
    11                      Account, appearance, storage, and note
    12                      preferences can be added here.
    13                  </p>
    14  
    15                  <div className="page-actions">
    16                      <Link className="primary-link" to="/notes">
    17                          Return to notes
    18                      </Link>
    19  
    20                      <Link className="secondary-link" to="/login">
    21                          View login
    22                      </Link>
    23                  </div>
    24              </section>
    25          </main>
    26      );
    27  };
    28  
    29  export default SettingsPage;

============================================================
FILE: ./src/services/notesService.js
============================================================
     1  import { db } from "../appwrite/databases";
     2  
     3  export const notesService = {
     4      async list() {
     5          const response = await db.notes.list();
     6          return response.documents;
     7      },
     8  
     9      async create(payload) {
    10          return db.notes.create(payload);
    11      },
    12  
    13      async update(id, payload) {
    14          return db.notes.update(id, payload);
    15      },
    16  
    17      async remove(id) {
    18          return db.notes.delete(id);
    19      },
    20  };

============================================================
FILE: ./src/utils.js
============================================================
     1  export const setNewOffset = (
     2      card,
     3      mouseMovement = { x: 0, y: 0 }
     4  ) => {
     5      if (!card) {
     6          return {
     7              x: 0,
     8              y: 0,
     9          };
    10      }
    11  
    12      const offsetLeft =
    13          card.offsetLeft - mouseMovement.x;
    14  
    15      const offsetTop =
    16          card.offsetTop - mouseMovement.y;
    17  
    18      return {
    19          x: Math.max(0, offsetLeft),
    20          y: Math.max(0, offsetTop),
    21      };
    22  };
    23  
    24  export function autoGrow(textAreaRef) {
    25      const textArea = textAreaRef.current;
    26  
    27      if (!textArea) {
    28          return;
    29      }
    30  
    31      textArea.style.height = "auto";
    32      textArea.style.height = `${textArea.scrollHeight}px`;
    33  }
    34  
    35  export const setZIndex = (selectedCard) => {
    36      if (!selectedCard) {
    37          return;
    38      }
    39  
    40      selectedCard.style.zIndex = "999";
    41  
    42      Array.from(
    43          document.getElementsByClassName("card")
    44      ).forEach((card) => {
    45          if (card !== selectedCard) {
    46              card.style.zIndex = "998";
    47          }
    48      });
    49  };
    50  
    51  export function parseStoredJson(value, fallback) {
    52      if (value === null || value === undefined) {
    53          return fallback;
    54      }
    55  
    56      if (typeof value !== "string") {
    57          return value;
    58      }
    59  
    60      try {
    61          return JSON.parse(value);
    62      } catch {
    63          return fallback;
    64      }
    65  }
    66  
    67  export function bodyParser(value) {
    68      if (value === null || value === undefined) {
    69          return "";
    70      }
    71  
    72      if (typeof value !== "string") {
    73          return String(value);
    74      }
    75  
    76      try {
    77          const parsedValue = JSON.parse(value);
    78  
    79          return typeof parsedValue === "string"
    80              ? parsedValue
    81              : String(parsedValue ?? "");
    82      } catch {
    83          return value;
    84      }
    85  }

============================================================
FILE: ./vite.config.js
============================================================
     1  import { defineConfig } from 'vite'
     2  import react from '@vitejs/plugin-react'
     3  
     4  // https://vitejs.dev/config/
     5  export default defineConfig({
     6    plugins: [react()],
     7  })