Plancake v0.1.0

.github/workflows/formatting.yml

@@ -8,19 +8,19 @@ jobs:
     runs-on: ubuntu-latest
 
     permissions:
-      contents: write  # Required to push to the repo
+      contents: write # Required to push to the repo
 
     steps:
       - name: Checkout code
         uses: actions/checkout@v4
         with:
-          ref: ${{ github.head_ref }}  # Checkout PR branch
+          ref: ${{ github.head_ref }} # Checkout PR branch
 
       - name: Setup Node.js
         uses: actions/setup-node@v4
         with:
-          node-version: '20'
-          cache: 'npm'
+          node-version: "20"
+          cache: "npm"
 
       - name: Install dependencies
         run: npm ci

.gitignore

@@ -39,3 +39,5 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+
+certificates

README.md

@@ -1,32 +1,137 @@
-# plancake Frontend
+# Plancake Frontend
 
-This repository contains the frontend code for plancake.
+A modern, responsive web application for scheduling and meeting coordination built with Next.js 15, React 19, and Tailwind CSS.
 
-## Getting Started
+## Overview
 
-To clone and run this application, [Node.js](https://nodejs.org/en/download/) (which comes with [npm](http://npmjs.com)) installed on your computer:
+Plancake is a meeting scheduling tool that helps users coordinate availability across time zones. The application allows users to create events, share availability grids, and find optimal meeting times.
+
+---
+
+## Architecture
+
+### Tech Stack
+
+**Core Framework:**
+
+- [Next.js 15.3.1](https://nextjs.org/) - React framework with App Router
+- [React 19](https://react.dev/) - UI library
+- [TypeScript 5](https://www.typescriptlang.org/) - Type safety
+
+**Styling:**
+
+- [Tailwind CSS 4.1.4](https://tailwindcss.com/) - Utility-first CSS framework
+- [Tailwind Merge](https://github.com/dcastil/tailwind-merge) - Conditional class merging
+- [clsx](https://github.com/lukeed/clsx) - Utility for constructing className strings
+
+**UI Components:**
+
+- [Radix UI](https://www.radix-ui.com/) - Accessible component primitives
+  - Dialog
+  - Popover
+  - Select
+  - Icons
+- [Framer Motion](https://www.framer.com/motion/) - Animation library
+- [Vaul](https://vaul.emilkowal.ski/) - Drawer component
+- [next-themes](https://github.com/pacocoursey/next-themes) - Dark mode support
+
+**Date/Time Handling:**
+
+- [date-fns-tz](https://date-fns.org/) - Timezone utilities
+- [react-day-picker](https://react-day-picker.js.org/) - Date picker component
+
+**Development Tools:**
+
+- [ESLint 9](https://eslint.org/) - Code linting
+- [Prettier 3.5.3](https://prettier.io/) - Code formatting
+- [Turbopack](https://turbo.build/pack) - Fast bundler (dev mode)
+
+### `.env` Setup
+
+Create a file called `.env` in the root directory, copying the contents of `example.env`.
+
+Replace all values in the file with the relevant information.
+
+## Local Development Setup
+
+### Prerequisites
+
+- **Node.js** 20+ (LTS recommended)
+- **npm** 10+ or compatible package manager
+- **Git** for version control
+
+### Installation Steps
+
+1. **Clone the repository**
+
+   ```bash
+   https://github.com/plan-cake/frontend.git
+   cd frontend
+   ```
+
+2. **Install dependencies**
+
+   ```bash
+   npm install
+   ```
+
+   This will install all dependencies listed in [package.json](package.json), including:
+
+   - Next.js 15.3.1 with React 19
+   - Tailwind CSS 4.1.4
+   - Radix UI components
+   - TypeScript and type definitions
+
+3. **Run the development server**
+
+   ```bash
+   npm run dev
+   ```
+
+   The application will start on `http://localhost:3000` using Turbopack for fast refresh.
+
+4. **Open your browser**
+   Navigate to [http://localhost:3000](http://localhost:3000) to see the application.
+
+### Available Scripts
 
 ```bash
-npm install npm@latest -g
+# Development server with Turbopack (fast refresh)
+npm run dev
+
+# Production build
+npm run build
+
+# Start production server (requires build first)
+npm run start
+
+# Lint code with ESLint
+npm run lint
+
+# Format code with Prettier
+npm run format
+
+# Check formatting without modifying files
+npm run check-format
 ```
 
-### Installation
+### Building for Production
 
 ```bash
-# Clone this repository
-$ git clone https://github.com/tomeeto/frontend.git
+# Create optimized production build
+npm run build
 
-# Install dependencies
-$ npm install
-
-# Run the app
-$ npm run dev
+# Test production build locally
+npm run start
 ```
 
-## Credits
+The production build:
+
+- Optimizes and minifies JavaScript/CSS
+- Generates static pages where possible
+- Creates optimized images
+- Outputs to `.next/` directory
 
-This project is built with the following:
+---
 
-- [Next.js](https://nextjs.org/)
-- [Tailwind.css](https://tailwindcss.com/)
-- [Radix UI Elements](https://www.radix-ui.com/)
+**Made with** [Next.js](https://nextjs.org/) **•** [Tailwind CSS](https://tailwindcss.com/) **•** [Radix UI](https://www.radix-ui.com/)

app/[event-code]/edit/loading.tsx

@@ -0,0 +1,26 @@
+import HeaderSpacer from "@/app/ui/components/header/header-spacer";
+
+export default function Loading() {
+  return (
+    <div className="flex animate-pulse flex-col space-y-4 pr-6 pl-6">
+      <HeaderSpacer />
+
+      <div className="flex w-full flex-wrap items-center justify-between md:flex-row">
+        <div className="h-12 w-3/4 rounded-3xl bg-gray-200 md:w-1/2 dark:bg-[#343249]" />
+        <div className="hidden h-10 w-50 rounded-full bg-gray-200 dark:bg-[#343249]" />
+      </div>
+
+      <div className="grid w-full grid-cols-1 grid-rows-[auto] gap-y-4 md:grow md:grid-cols-[200px_auto] md:grid-rows-[auto_auto] md:gap-x-4 md:gap-y-4">
+        <div className="hidden h-20 rounded-3xl bg-gray-200 md:block dark:bg-[#343249]" />
+        <div className="col-span-3 hidden h-20 rounded-3xl bg-gray-200 md:block dark:bg-[#343249]" />
+        <div className="hidden h-20 rounded-3xl bg-gray-200 md:col-start-1 md:row-start-2 md:block dark:bg-[#343249]" />
+        <div className="hidden h-120 rounded-3xl bg-gray-200 md:col-span-10 md:col-start-2 md:row-span-10 md:row-start-2 md:block dark:bg-[#343249]" />
+        <div className="hidden h-60 rounded-3xl bg-gray-200 md:col-start-1 md:row-start-11 md:block dark:bg-[#343249]" />
+
+        <div className="h-20 w-3/4 rounded-3xl bg-gray-200 md:hidden" />
+        <div className="h-20 w-3/4 rounded-3xl bg-gray-200 md:hidden" />
+        <div className="h-100 rounded-3xl bg-gray-200 md:hidden" />
+      </div>
+    </div>
+  );
+}

app/[event-code]/edit/page.tsx

@@ -0,0 +1,23 @@
+import { EventCodePageProps } from "@/app/_lib/types/event-code-page-props";
+import { fetchEventDetails } from "@/app/_utils/fetch-data";
+import { processEventData } from "@/app/_utils/process-event-data";
+import EventEditor from "../../ui/layout/event-editor";
+import notFound from "../not-found";
+
+export default async function Page({ params }: EventCodePageProps) {
+  const { "event-code": eventCode } = await params;
+
+  if (!eventCode) {
+    notFound();
+  }
+
+  const eventData = await fetchEventDetails(eventCode);
+  const { eventName, eventRange } = processEventData(eventData);
+
+  return (
+    <EventEditor
+      type="edit"
+      initialData={{ title: eventName, code: eventCode, eventRange }}
+    />
+  );
+}

app/[event-code]/loading.tsx

@@ -0,0 +1,28 @@
+import HeaderSpacer from "@/app/ui/components/header/header-spacer";
+
+export default function Loading() {
+  return (
+    <div className="flex animate-pulse flex-col space-y-4 pr-6 pl-6">
+      <HeaderSpacer />
+
+      <div className="flex w-full flex-wrap items-center justify-between md:flex-row">
+        <div className="h-12 w-1/2 rounded-3xl bg-gray-200 dark:bg-[#343249]" />
+
+        <div className="h-10 w-40 rounded-full bg-gray-200 dark:bg-[#343249]" />
+      </div>
+
+      <div className="mb-8 flex h-full flex-col gap-4 md:mb-0 md:flex-row">
+        <div className="h-fit w-full shrink-0 space-y-6 overflow-y-auto md:w-80">
+          <div className="space-y-3">
+            <div className="h-8 w-3/4 rounded-3xl bg-gray-200 dark:bg-[#343249]" />
+            <div className="h-8 w-1/2 rounded-3xl bg-gray-200 dark:bg-[#343249]" />
+          </div>
+          <div className="hidden h-70 rounded-3xl bg-gray-200 md:block dark:bg-[#343249]" />
+          <div className="h-20 rounded-3xl bg-gray-200 dark:bg-[#343249]" />
+        </div>
+
+        <div className="h-96 w-full rounded-3xl bg-gray-200 dark:bg-[#343249]" />
+      </div>
+    </div>
+  );
+}

app/[event-code]/not-found.tsx

@@ -0,0 +1,3 @@
+export default function NotFound() {
+  return <div>404 - Page Not Found :p</div>;
+}

app/[event-code]/page.tsx

@@ -0,0 +1,31 @@
+import { notFound } from "next/navigation";
+import { fetchEventDetails, fetchSelfAvailability } from "../_utils/fetch-data";
+import { processEventData } from "../_utils/process-event-data";
+
+import AvailabilityClientPage from "@/app/ui/layout/availability-page";
+import { EventCodePageProps } from "../_lib/types/event-code-page-props";
+import { getAuthCookieString } from "../_utils/cookie-utils";
+
+export default async function Page({ params }: EventCodePageProps) {
+  const { "event-code": eventCode } = await params;
+  const authCookies = await getAuthCookieString();
+
+  if (!eventCode) {
+    notFound();
+  }
+
+  const [eventData, initialAvailabilityData] = await Promise.all([
+    fetchEventDetails(eventCode),
+    fetchSelfAvailability(eventCode, authCookies),
+  ]);
+  const { eventName, eventRange } = processEventData(eventData);
+
+  return (
+    <AvailabilityClientPage
+      eventCode={eventCode}
+      eventName={eventName}
+      eventRange={eventRange}
+      initialData={initialAvailabilityData}
+    />
+  );
+}

app/[event-code]/results/loading.tsx

@@ -0,0 +1,26 @@
+import HeaderSpacer from "@/app/ui/components/header/header-spacer";
+
+export default function Loading() {
+  return (
+    <div className="flex animate-pulse flex-col space-y-4 pr-6 pl-6">
+      <HeaderSpacer />
+
+      <div className="flex w-full flex-wrap items-center justify-between md:flex-row">
+        <div className="h-12 w-1/2 rounded-3xl bg-gray-200 dark:bg-[#343249]" />
+
+        <div className="h-10 w-50 rounded-full bg-gray-200 dark:bg-[#343249]" />
+      </div>
+
+      <div className="mb-8 flex h-full flex-col gap-4 md:mb-0 md:flex-row">
+        <div className="h-96 w-full rounded-3xl bg-gray-200 dark:bg-[#343249]" />
+
+        <div className="h-fit w-full shrink-0 space-y-4 overflow-y-auto md:w-80">
+          <div className="hidden h-20 rounded-3xl bg-gray-200 md:block dark:bg-[#343249]" />
+
+          <div className="hidden h-70 rounded-3xl bg-gray-200 md:block dark:bg-[#343249]" />
+          <div className="h-20 rounded-3xl bg-gray-200 dark:bg-[#343249]" />
+        </div>
+      </div>
+    </div>
+  );
+}

app/[event-code]/results/page.tsx

@@ -0,0 +1,36 @@
+import { notFound } from "next/navigation";
+import {
+  fetchEventDetails,
+  fetchAvailabilityData,
+} from "@/app/_utils/fetch-data";
+import { processEventData } from "@/app/_utils/process-event-data";
+
+import ResultsPage from "@/app/ui/layout/results-page";
+import { getAuthCookieString } from "@/app/_utils/cookie-utils";
+import { EventCodePageProps } from "@/app/_lib/types/event-code-page-props";
+
+export default async function Page({ params }: EventCodePageProps) {
+  const { "event-code": eventCode } = await params;
+  const authCookies = await getAuthCookieString();
+
+  if (!eventCode) {
+    notFound();
+  }
+
+  const [initialEventData, availabilityData] = await Promise.all([
+    fetchEventDetails(eventCode, authCookies),
+    fetchAvailabilityData(eventCode, authCookies),
+  ]);
+
+  // Process the data here, on the server!
+  const { eventName, eventRange } = processEventData(initialEventData);
+
+  return (
+    <ResultsPage
+      eventCode={eventCode}
+      eventName={eventName} // Pass the processed name
+      eventRange={eventRange} // Pass the processed range
+      initialAvailabilityData={availabilityData}
+    />
+  );
+}