Staging

.gitignore

@@ -36,3 +36,5 @@ yarn-error.log*
 # Misc
 .DS_Store
 *.pem
+
+**/landing-context.json

README.md

@@ -1,135 +1,102 @@
-# Turborepo starter
+# CoBrain
 
-This Turborepo starter is maintained by the Turborepo core team.
+> **CoBrain is your second brain for the internet. Save anything, organize it into slices, and recall it when you need it. Simple, flexible, and built for how you think.**
 
-## Using this example
+CoBrain is a modern full-stack web application designed to help users capture and organize information efficiently. It features a responsive dashboard, intuitive brain/memo management, and "slices" for categorizing thoughts.
 
-Run the following command:
+## 🏗 Repository Structure
 
-```sh
-npx create-turbo@latest
-```
+This is a monorepo managed by [Turborepo](https://turbo.build/repo), containing the following workspaces:
 
-## What's inside?
+### Apps
 
-This Turborepo includes the following packages/apps:
+- **`apps/landing`**: The frontend application built with [Next.js 15](https://nextjs.org/) (App Router), Tailwind CSS, and Framer Motion. Handles the landing page, authentication UI, and the user dashboard.
+- **`apps/server`**: The backend API server built with [Express.js](https://expressjs.com/). handles business logic, authentication (Google OAuth + JWT), and database communication.
 
-### Apps and Packages
+### Packages
 
-- `docs`: a [Next.js](https://nextjs.org/) app
-- `web`: another [Next.js](https://nextjs.org/) app
-- `@repo/ui`: a stub React component library shared by both `web` and `docs` applications
-- `@repo/eslint-config`: `eslint` configurations (includes `eslint-config-next` and `eslint-config-prettier`)
-- `@repo/typescript-config`: `tsconfig.json`s used throughout the monorepo
+- **`packages/db`**: Database schema and ORM configuration using [Drizzle ORM](https://orm.drizzle.team/) and PostgreSQL.
+- **`@repo/ui`**: Shared UI component library.
+- **`@repo/types`**: Shared TypeScript type definitions (DTOs, interfaces).
+- **`@repo/eslint-config`**, **`@repo/typescript-config`**, **`@repo/tailwind-config`**: Shared configuration files.
 
-Each package/app is 100% [TypeScript](https://www.typescriptlang.org/).
+## 🚀 Getting Started
 
-### Utilities
+### Prerequisites
 
-This Turborepo has some additional tools already setup for you:
+- **[Bun](https://bun.sh/)** (v1.1+): This project uses Bun as the package manager and runtime for scripts.
+- **Node.js** (v18+): Required for some Turbo/Next.js operations.
+- **Docker**: (Optional but recommended) For running the PostgreSQL database locally.
 
-- [TypeScript](https://www.typescriptlang.org/) for static type checking
-- [ESLint](https://eslint.org/) for code linting
-- [Prettier](https://prettier.io) for code formatting
+### Installation
 
-### Build
+1.  **Clone the repository:**
 
-To build all apps and packages, run the following command:
+    ```bash
+    git clone https://github.com/your-username/cobrain.git
+    cd cobrain
+    ```
 
-```
-cd my-turborepo
+2.  **Install dependencies:**
+    ```bash
+    bun install
+    ```
 
-# With [global `turbo`](https://turborepo.com/docs/getting-started/installation#global-installation) installed (recommended)
-turbo build
+### Environment Setup
 
-# Without [global `turbo`](https://turborepo.com/docs/getting-started/installation#global-installation), use your package manager
-npx turbo build
-yarn dlx turbo build
-pnpm exec turbo build
-```
+You need to configure environment variables for the apps and database. Check the `README.md` in `apps/landing`, `apps/server`, and `packages/db` for specific details.
 
-You can build a specific package by using a [filter](https://turborepo.com/docs/crafting-your-repository/running-tasks#using-filters):
+Broadly, you will need to set up `.env` files in:
 
-```
-# With [global `turbo`](https://turborepo.com/docs/getting-started/installation#global-installation) installed (recommended)
-turbo build --filter=docs
+- `apps/landing/.env`
+- `apps/server/.env`
+- `packages/db/.env`
 
-# Without [global `turbo`](https://turborepo.com/docs/getting-started/installation#global-installation), use your package manager
-npx turbo build --filter=docs
-yarn exec turbo build --filter=docs
-pnpm exec turbo build --filter=docs
-```
+### Database Setup
 
-### Develop
+1.  **Start PostgreSQL:**
+    Navigate to `packages/db` and start the database container:
 
-To develop all apps and packages, run the following command:
+    ```bash
+    cd packages/db
+    docker-compose up -d
+    ```
 
-```
-cd my-turborepo
+2.  **Push Schema:**
+    Apply the database schema:
+    ```bash
+    bun run drizzle:push
+    ```
 
-# With [global `turbo`](https://turborepo.com/docs/getting-started/installation#global-installation) installed (recommended)
-turbo dev
+### Running the Project
 
-# Without [global `turbo`](https://turborepo.com/docs/getting-started/installation#global-installation), use your package manager
-npx turbo dev
-yarn exec turbo dev
-pnpm exec turbo dev
-```
-
-You can develop a specific package by using a [filter](https://turborepo.com/docs/crafting-your-repository/running-tasks#using-filters):
+To start both the frontend and backend in development mode:
 
+```bash
+bun run dev
 ```
-# With [global `turbo`](https://turborepo.com/docs/getting-started/installation#global-installation) installed (recommended)
-turbo dev --filter=web
-
-# Without [global `turbo`](https://turborepo.com/docs/getting-started/installation#global-installation), use your package manager
-npx turbo dev --filter=web
-yarn exec turbo dev --filter=web
-pnpm exec turbo dev --filter=web
-```
-
-### Remote Caching
 
-> [!TIP]
-> Vercel Remote Cache is free for all plans. Get started today at [vercel.com](https://vercel.com/signup?/signup?utm_source=remote-cache-sdk&utm_campaign=free_remote_cache).
+This uses Turborepo to run `dev` scripts in all apps simultaneously.
 
-Turborepo can use a technique known as [Remote Caching](https://turborepo.com/docs/core-concepts/remote-caching) to share cache artifacts across machines, enabling you to share build caches with your team and CI/CD pipelines.
+- **Frontend**: http://localhost:3000
+- **Backend**: http://localhost:3001 (or configured port)
 
-By default, Turborepo will cache locally. To enable Remote Caching you will need an account with Vercel. If you don't have an account you can [create one](https://vercel.com/signup?utm_source=turborepo-examples), then enter the following commands:
+## 🛠 Commands
 
-```
-cd my-turborepo
-
-# With [global `turbo`](https://turborepo.com/docs/getting-started/installation#global-installation) installed (recommended)
-turbo login
-
-# Without [global `turbo`](https://turborepo.com/docs/getting-started/installation#global-installation), use your package manager
-npx turbo login
-yarn exec turbo login
-pnpm exec turbo login
-```
-
-This will authenticate the Turborepo CLI with your [Vercel account](https://vercel.com/docs/concepts/personal-accounts/overview).
-
-Next, you can link your Turborepo to your Remote Cache by running the following command from the root of your Turborepo:
-
-```
-# With [global `turbo`](https://turborepo.com/docs/getting-started/installation#global-installation) installed (recommended)
-turbo link
-
-# Without [global `turbo`](https://turborepo.com/docs/getting-started/installation#global-installation), use your package manager
-npx turbo link
-yarn exec turbo link
-pnpm exec turbo link
-```
+Run these commands from the root directory:
 
-## Useful Links
+| Command | Description |
+|Str |---|
+| `bun run dev` | Start development server for all apps |
+| `bun run build` | Build all apps and packages |
+| `bun run lint` | shared linting check |
+| `bun run format` | Format code with Prettier |
+| `bun run check-types` | Run TypeScript type checking |
 
-Learn more about the power of Turborepo:
+## 🤝 Contribution
 
-- [Tasks](https://turborepo.com/docs/crafting-your-repository/running-tasks)
-- [Caching](https://turborepo.com/docs/crafting-your-repository/caching)
-- [Remote Caching](https://turborepo.com/docs/core-concepts/remote-caching)
-- [Filtering](https://turborepo.com/docs/crafting-your-repository/running-tasks#using-filters)
-- [Configuration Options](https://turborepo.com/docs/reference/configuration)
-- [CLI Usage](https://turborepo.com/docs/reference/command-line-reference)
+1.  Fork the repo
+2.  Create your feature branch (`git checkout -b feature/amazing-feature`)
+3.  Commit your changes (`git commit -m 'Add some amazing feature'`)
+4.  Push to the branch (`git push origin feature/amazing-feature`)
+5.  Open a Pull Request

apps/landing/README.md

@@ -1,36 +1,78 @@
-This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/create-next-app).
+# CoBrain Frontend (Landing & Dashboard)
 
-## Getting Started
+This directory contains the user interface for CoBrain, built with **Next.js 15 (App Router)** and **Tailwind CSS**.
 
-First, run the development server:
+## ✨ Features
+
+- **Landing Page**: Modern, responsive landing page explaining the product value.
+- **Authentication**: Seamless sign-in/sign-up integration with Google OAuth (handled via backend).
+- **Dashboard**:
+  - View and manage your "Brains" (Memos).
+  - Organize content into "Slices".
+  - Responsive sidebar and navigation.
+- **Modern UI**: Polished look with custom fonts, Framer Motion animations, and specific design tokens (Glassmorphism, gradients).
+
+## 🛠 Tech Stack
+
+- **Framework**: [Next.js 15](https://nextjs.org/)
+- **Styling**: [Tailwind CSS v4](https://tailwindcss.com/)
+- **Icons**: [React Icons](https://react-icons.github.io/react-icons/) (Lucide, Tabler)
+- **Animations**: [Framer Motion](https://www.framer.com/motion/)
+- **HTTP Client**: [Axios](https://axios-http.com/)
+
+## 🚀 Getting Started
+
+### 1. Environment Variables
+
+Create a `.env` file in `apps/landing` based on `.env_example`:
 
 ```bash
-npm run dev
-# or
-yarn dev
-# or
-pnpm dev
-# or
-bun dev
+cp .env_example .env
 ```
 
-Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+**Required Variables:**
 
-You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+```env
+NEXT_PUBLIC_API_URL=http://localhost:3001 # URL of the running server app
+```
 
-This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load Inter, a custom Google Font.
+### 2. Run Development Server
 
-## Learn More
+You can run the frontend in isolation:
 
-To learn more about Next.js, take a look at the following resources:
+```bash
+bun dev
+```
 
-- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
-- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+Open [http://localhost:3000](http://localhost:3000) with your browser.
 
-You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
+## 📂 Project Structure
+
+```
+apps/landing/
+├── app/                  # Next.js App Router pages
+│   ├── (auth)/           # Authentication routes (sign-in, sign-up)
+│   ├── dashboard/        # Main app interface (protected)
+│   ├── api/              # Local API routes (if any)
+│   ├── globals.css       # Global styles and Tailwind directives
+│   ├── layout.tsx        # Root layout
+│   └── page.tsx          # Landing page
+├── components/           # React components
+│   ├── dashboard/        # Dashboard-specific components (Sidebar, Nav)
+│   ├── landing/          # Landing page sections (Hero, Features, Footer)
+│   └── ui/               # Reusable UI elements (Buttons, Cards, Inputs)
+├── hooks/                # Custom React hooks
+├── lib/                  # Utility libraries (Axios setup, Utils)
+├── services/             # API service layers (Auth, Slice, etc.)
+└── public/               # Static assets
+```
 
-## Deploy on Vercel
+## 🔐 Authentication Flow
 
-The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+The frontend relies on cookie-based authentication managed by the backend.
 
-Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.
+1. User clicks "Sign in with Google".
+2. Redirects to backend OAuth endpoint.
+3. Backend sets `access_token` and `refresh_token` httpOnly cookies.
+4. Frontend Middleware protects `/dashboard` routes by checking for these tokens.
+5. `axios` interceptors handle 401 errors by attempting a silent token refresh via the `/token-refresh` route.

apps/landing/app/(auth)/signin/page.tsx

@@ -1,59 +1,8 @@
 "use client";
 
 import React from "react";
-import { AuthCard } from "../../../components/auth/auth-card";
-import { Button, Input, Capsule } from "@repo/ui";
-import { FcGoogle } from "react-icons/fc";
+import { SignInView } from "../../../components/auth/signin-view";
 
 export default function SignInPage() {
-  return (
-    <AuthCard
-      title="Sign In"
-      imageSrc="/signin.png"
-      imageOverlay={<Capsule type="link" href="/" text="Back to Home" />}
-    >
-      <form className="flex flex-col gap-4">
-        <Input
-          label="Email"
-          type="email"
-          placeholder="Enter your email"
-          id="email"
-        />
-        <Input
-          label="Password"
-          type="password"
-          placeholder="Enter your password"
-          id="password"
-        />
-        <Button className="mt-2 w-full" size="default">
-          Sign In
-        </Button>
-      </form>
-
-      <div className="relative">
-        <div className="absolute inset-0 flex items-center">
-          <span className="w-full border-t border-border" />
-        </div>
-        <div className="relative flex justify-center text-xs uppercase">
-          <span className="bg-surface px-2 text-muted-foreground">
-            Or continue with
-          </span>
-        </div>
-      </div>
-
-      <Button variant="outlined" className="w-full" icon={FcGoogle}>
-        Login with Google
-      </Button>
-
-      <div className="flex justify-center text-body-regular text-muted-foreground">
-        Don&apos;t have an account?{" "}
-        <a
-          href="/signup"
-          className="ml-1 text-foreground underline hover:text-muted-foreground transition-colors"
-        >
-          Sign Up
-        </a>
-      </div>
-    </AuthCard>
-  );
+  return <SignInView />;
 }