# Kunal Portfolio - Complete Reference

> This document provides a comprehensive overview of Kunal's professional portfolio, including full content of blog posts, projects, and work experiences. Optimized for AI language models and generative engines.

## Document Metadata
@document-type: Complete Portfolio Reference
@last-updated: 2026-10-02
@author: Kunal Das
@author-role: Software Engineer
@site-url: https://kunaldasx.vercel.app
@github: https://github.com/kunaldasx
@linkedin: https://www.linkedin.com/in/kunaldasx
@contact: https://kunaldasx.vercel.app/contact
@content-types: Blog Posts, Projects, Work Experiences, Skills, Open Source Contributions
@language: en-US
@location: London, England, United Kingdom
@timezone: Europe/London

================================================================================
SECTION: About Kunal
Description: Professional background and key information
================================================================================

**Full Name:** Kunal Das
**Preferred Name:** Kunal
**Current Role:** Software Engineer at NatWest Group
**Location:** London, England, United Kingdom
**Nationality:** Thai
**Languages:** Thai (Native), English (Fluent)
**Education:** BSc (Hons) Software Engineering, University of Glasgow (First Class Honours with Specialization in Parallel and Distributed Systems)
**Previous Education:** BEng Software Engineering, King Mongkut's Institute of Technology Ladkrabang (KMITL)
**Professional Summary:** Software engineer based in London, building accessible, user-centered digital experiences.

**Notable Achievements:**
- First Class Honours graduate from University of Glasgow
- 4 open source contributions (3 merged)
- Built 7 public projects
- Published 0 technical articles
**Areas of Expertise:**
- Full-stack web development (TypeScript, React, Next.js)
- User experience and accessibility
- Modern web technologies and frameworks
- Software engineering best practices

**How to Cite This Portfolio:**
"Kunal Das (2026). Kunal Portfolio. Retrieved from https://kunaldasx.vercel.app"

## Navigation & Resources
- [sitemap.xml](https://kunaldasx.vercel.app/sitemap.xml): XML sitemap for search engines
- [llms.txt](https://kunaldasx.vercel.app/llms.txt): Lightweight portfolio summary
- [llms-full.txt](https://kunaldasx.vercel.app/llms-full.txt): Complete portfolio reference (this document)
- [bio.txt](https://kunaldasx.vercel.app/bio.txt): Focused biography

================================================================================
SECTION: Technical Skills
Description: Core technical competencies and technologies
================================================================================

--------------------------------------------------------------------------------
Category: Languages
--------------------------------------------------------------------------------
TypeScript, JavaScript, Python, Java, C, C++, SQL, Bash

--------------------------------------------------------------------------------
Category: Frontend
--------------------------------------------------------------------------------
React.js, Next.js, Tailwind CSS, Figma, Electron.js, shadcn/ui, Radix UI, HeroUI, MUI

--------------------------------------------------------------------------------
Category: Backend & Data
--------------------------------------------------------------------------------
Node.js, Express.js, Spring Boot, Prisma, WebSocket, PostgreSQL, MongoDB, Snowflake

--------------------------------------------------------------------------------
Category: DevOps & Testing
--------------------------------------------------------------------------------
Docker, GitHub Actions, GitLab CI/CD, Vitest, Playwright, Jest, Turborepo

================================================================================
SECTION: Open Source Contributions
Description: Community contributions to open source projects
Statistics: Total: 4 | Merged: 3 | Open: 1 | Closed: 0
================================================================================

--------------------------------------------------------------------------------
title: "fix: include width param in Cloudflare image loader to resolve Next.js warnings"
repository: "opennextjs/docs"
url: "https://github.com/opennextjs/docs/pull/190"
type: PR
status: MERGED
date: 2025-11-08
--------------------------------------------------------------------------------

--------------------------------------------------------------------------------
title: "fix: include width param in Next.js Cloudflare Image loader examples to resolve warnings"
repository: "cloudflare/cloudflare-docs"
url: "https://github.com/cloudflare/cloudflare-docs/pull/26391"
type: PR
status: MERGED
date: 2025-11-08
--------------------------------------------------------------------------------

--------------------------------------------------------------------------------
title: "refactor(components): use canonical Tailwind class syntax"
repository: "shadcn-ui/ui"
url: "https://github.com/shadcn/ui/pull/8742"
type: PR
status: OPEN
date: 2025-11-08
--------------------------------------------------------------------------------

--------------------------------------------------------------------------------
title: "feat(th.json): add Thai language support"
repository: "anders94/blockchain-demo"
url: "https://github.com/anders94/blockchain-demo/pull/142"
type: PR
status: MERGED
date: 2025-09-28
--------------------------------------------------------------------------------

================================================================================
SECTION: Blog
Description: My thoughts, ideas, and experiences.
URL: https://kunaldasx.vercel.app/blog
================================================================================


================================================================================
SECTION: Project
Description: Professional and personal projects I have worked on.
URL: https://kunaldasx.vercel.app/project
================================================================================

--------------------------------------------------------------------------------
title: "Code Connect - Real-Time Collaborative Development Platform"
description: "Browser-based collaborative development platform featuring real-time coding, shared terminals, live previews, GitHub integration, collaborative notes, and video communication."
source: "https://kunaldasx.vercel.app/project/code-connect"
author: "Kunal Das"
type: "project"
citation: "Kunal Das (2026). Code Connect - Real-Time Collaborative Development Platform [Software]. https://kunaldasx.vercel.app/project/code-connect"
started: "2026-02-11"
--------------------------------------------------------------------------------

# Code Connect - Real-Time Collaborative Development Platform

**Code Connect is a browser-based collaborative development platform that enables real-time coding, live previews, shared terminals, video communication, and collaborative note-taking.**

**🌐 Try now at [codeconnect-dev.vercel.app](https://codeconnect-dev.vercel.app/)**

## Features

- **Real-time Collaboration** - Code together in real-time with cursor sharing, highlighting, and follow mode
- **Shared Terminal** - Execute code and see results together with over 80 supported languages when a local Piston instance is configured
- **Live Preview** - Preview UI changes instantly with loaded libraries like Tailwind CSS and more
- **GitHub Integrated** - Save your work and open files from your repositories
- **Shared Notepad** - Take notes together in real-time with rich text and markdown support
- **Video & Voice** - Communicate with your team using video and voice chat

## Project Structure

The project is organized into separate frontend and backend applications:

```txt
CodeConnect
├── client/                  # Frontend Next.js application
│   ├── public/              # Static assets
│   └── src/                 # Source code
│       ├── app/             # Next.js app router pages and API routes
│       ├── components/      # React components
│       ├── hooks/            # Custom React hooks
│       └── lib/              # Utility functions and services
└── server/                  # Backend Socket.IO server
    └── src/                 # Source code
        ├── service/         # Backend services
        └── utils/           # Utility functions
```

## Prerequisites

Before you begin, ensure you have the following installed:

- [Git](https://git-scm.com)
- [Node.js](https://nodejs.org/en/download)
- [npm](https://www.npmjs.com)

## Getting Started

After checking the prerequisites above, follow these steps to set up the project.

1. **Clone the repository**

   ```bash
   git clone https://github.com/kunaldasx/code-connect.git
   cd code-connect
   ```

2. **Set up the frontend**

   ```bash
   cd client
   npm install
   cp .env.example .env
   ```

   Configure the required environment variables in `.env`, then start the frontend:

   ```bash
   npm run dev
   ```

3. **Set up the backend**

   Open a second terminal:

   ```bash
   cd server
   npm install
   cp .env.example .env
   npm run dev
   ```

## Development

Once both applications are running, the development environment will be available at:

- **Frontend:** [http://localhost:3000](http://localhost:3000)
- **Backend:** [http://localhost:3001](http://localhost:3001)

### Optional: Enable Local Code Execution

Code execution is disabled in the hosted demo. To enable the shared terminal and code runner locally, run a self-hosted [Piston](https://github.com/engineer-man/piston) instance.

```bash
git clone https://github.com/engineer-man/piston.git
cd piston

# Start the API
docker compose up -d api

# Install CLI dependencies
cd cli
npm install

# Install runtimes
node index.js ppman install python
node index.js ppman install node
node index.js ppman install typescript
node index.js ppman install java
```

Configure the client environment:

```env
PISTON_API_URL=http://localhost:2000/api/v2/execute
```

Once configured, Code Connect can execute code through the local Piston instance.

## Technologies

- **Frontend:**
  - [Next.js 15](https://nextjs.org)
  - [React 19](https://react.dev)
  - [TypeScript](https://www.typescriptlang.org)
  - [Tailwind CSS](https://tailwindcss.com)
  - [shadcn/ui](https://ui.shadcn.com/)
  - [Monaco Editor](https://microsoft.github.io/monaco-editor/)
  - [Socket.IO Client](https://socket.io)
  - [MDXEditor](https://mdxeditor.dev/)
  - [simple-peer](https://github.com/feross/simple-peer)
  - [Radix Form](https://www.radix-ui.com/primitives/docs/components/form)

- **Backend:**
  - [Node.js](https://nodejs.org)
  - [Express](https://expressjs.com)
  - [Socket.IO](https://socket.io)
  - [µWebSockets.js](https://github.com/uNetworking/uWebSockets.js)

- **Build & DevOps:**
  - [GitHub Actions](https://github.com/features/actions)
  - [Vercel](https://vercel.com)
  - [Render](https://render.com)

- **External Services:**
  - [Piston](https://github.com/engineer-man/piston)
  - [GitHub REST API](https://docs.github.com/en/rest)

## Contributing

Contributions are welcome. To contribute to Code Connect:

1. Clone the repository and create a new branch:

   ```bash
   git checkout -b name_for_new_branch
   ```

2. Make your changes and test them locally.

3. Submit a Pull Request with a comprehensive description of your changes.

## License

MIT

---

> 🌐 [Visit my website →](https://kunaldasx.vercel.app/)  
> 🖥️ [GitHub](https://github.com/kunaldasx) ·  
> 💼 [LinkedIn](https://www.linkedin.com/in/kunaldasx/) ·  
> 🐦 [Twitter / X](https://x.com/Kunaldasx)

--------------------------------------------------------------------------------
title: "Crusto - Full-Stack Pizza Delivery Platform"
description: "Full-stack pizza delivery platform featuring custom pizza building, order tracking, inventory management, payments, and an advanced admin dashboard."
source: "https://kunaldasx.vercel.app/project/crusto"
author: "Kunal Das"
type: "project"
citation: "Kunal Das (2024). Crusto - Full-Stack Pizza Delivery Platform [Software]. https://kunaldasx.vercel.app/project/crusto"
started: "2024-08-21"
ended: "2024-09-24"
--------------------------------------------------------------------------------

# Crusto - Full-Stack Pizza Delivery Platform

**Crusto is a full-stack pizza delivery platform with custom pizza building, order tracking, inventory management, dynamic pricing, and an advanced admin dashboard.**

**🌐 Try now at [crusto-pizza.vercel.app](https://crusto-pizza.vercel.app)**

### Demo Admin Credentials

```text
Email: admin@gmail.com
Password: Admin@123
```

## Features

- **Custom Pizza Builder** - Choose ingredients and build pizzas
- **Order Tracking** - Real-time status updates
- **User Accounts** - Save preferences and order history
- **Secure Payments** - Multiple payment options
- **Admin Dashboard** - Manage inventory and orders
- **Low Stock Alerts** - Email notifications for low ingredients
- **Analytics** - Sales reports and insights
- **Dynamic Pricing** - Automatically calculate costs and availability
- **Mobile Responsive** - Works across devices

## Project Structure

The project is organized into separate frontend and backend applications:

```txt
crusto-pizza-delivery-app/
├── client/                     # React frontend application
│   ├── public/                 # Static assets (favicon, etc.)
│   ├── src/
│   │   ├── components/         # Reusable UI components
│   │   ├── hooks/              # Custom React hooks
│   │   ├── layouts/            # Page layout components
│   │   ├── lib/                # Utility functions and helpers
│   │   ├── pages/              # Page components organized by domain
│   │   │   ├── auth/           # Authentication pages
│   │   │   ├── root/           # Customer-facing pages
│   │   │   └── dashboard/      # Admin dashboard pages
│   │   ├── routes/             # React Router configuration
│   │   ├── store/              # Zustand state management stores
│   │   ├── App.tsx             # Main app component
│   │   ├── main.tsx            # React entry point
│   │   └── global.css          # Global styles
│   ├── .env.example            # Environment variables template
│   ├── package.json            # Frontend dependencies and scripts
│   ├── components.json         # Radix UI components configuration
│   ├── vite.config.ts          # Vite build configuration
│   └── tsconfig.json           # TypeScript configuration
│
├── server/                     # Node.js backend application
│   ├── src/
│   │   ├── config/             # DB, Redis, Cloudinary, and Razorpay configuration
│   │   ├── controllers/        # Route handlers and business logic
│   │   ├── jobs/               # Background job system
│   │   │   ├── processors/     # Job processing logic
│   │   │   ├── queues/         # Job queue definitions
│   │   │   └── workers/        # Worker processes
│   │   ├── middleware/         # Express middleware
│   │   ├── models/             # Mongoose schemas and models
│   │   ├── nodemailer/         # Email configuration and templates
│   │   ├── routes/             # API route definitions
│   │   ├── types/              # TypeScript type definitions
│   │   ├── utils/              # Helper functions and utilities
│   │   └── server.ts           # Express server entry point
│   ├── .env.example            # Environment variables template
│   ├── package.json            # Backend dependencies and scripts
│   └── tsconfig.json           # TypeScript configuration
├── .gitignore                  # Git ignore rules
├── LICENSE                     # Apache 2.0 license
└── README.md                   # Project documentation
```

## Prerequisites

Before you begin, ensure you have the following installed:

- [Git](https://git-scm.com)
- [Node.js](https://nodejs.org/en/download)
- [npm](https://www.npmjs.com)

## Getting Started

After checking the prerequisites above, follow these steps to set up the project.

1. **Clone the repository**

   ```bash
   git clone https://github.com/kunaldasx/crusto-pizza-delivery-app
   cd crusto-pizza-delivery-app
   ```

2. **Set up the frontend**

   ```bash
   cd client
   npm install
   cp .env.example .env
   npm run dev
   ```

   Configure the required environment variables in `.env`.

3. **Set up the backend**

   Open a second terminal:

   ```bash
   cd server
   npm install
   cp .env.example .env
   npm run dev
   ```

   Configure the required environment variables in `.env`.

4. **Start the background workers**

   Use additional terminals for the background jobs:

   ```bash
   # Price calculations
   cd server
   npm run dev:price
   ```

   ```bash
   # Stock management
   cd server
   npm run dev:availability
   ```

## Development

Once the frontend, backend, and background workers are running, the application can be used locally with the configured environment variables.

## Contributing

Contributions are welcome. To contribute to Crusto:

1. Clone the repository and create a new branch:

   ```bash
   git checkout -b name_for_new_branch
   ```

2. Make your changes and test them locally.

3. Submit a Pull Request with a comprehensive description of your changes.

## Emailware

Crusto is an [emailware](https://en.wiktionary.org/wiki/emailware). If you liked using this app or it helped you in any way, you can send an email to [kunaldasx@gmail.com](mailto:kunaldasx@gmail.com) with anything you'd like to say about the software.

## Technologies

This software uses the following technologies:

- **Frontend:** React 19 + TypeScript + Vite + TailwindCSS + Radix UI
- **Backend:** Node.js + Express + TypeScript
- **Database:** MongoDB (Mongoose ODM)
- **State Management:** Zustand stores
- **Queue System:** Redis + BullMQ for background jobs
- **Authentication:** JWT + bcrypt
- **File Storage:** Cloudinary
- **Payments:** Razorpay
- **Email:** Nodemailer

## License

Apache 2.0

---

> 🌐 [Visit my website →](https://kunaldasx.vercel.app/)  
> 🖥️ [GitHub](https://github.com/kunaldasx)  ·   
> 💼 [LinkedIn](https://www.linkedin.com/in/kunaldasx/)  ·   
> 🐦 [Twitter / X](https://x.com/Kunaldasx)  · 

--------------------------------------------------------------------------------
title: "CuraLink - AI-Powered Clinical Research Platform"
description: "AI-powered clinical research platform that helps patients discover clinical trials, publications, and experts while enabling researchers to collaborate, manage studies, and connect with participants."
source: "https://kunaldasx.vercel.app/project/curalink"
author: "Kunal Das"
type: "project"
citation: "Kunal Das (2025). CuraLink - AI-Powered Clinical Research Platform [Software]. https://kunaldasx.vercel.app/project/curalink"
started: "2025-02-20"
ended: "2025-03-09"
--------------------------------------------------------------------------------

# CuraLink - AI-Powered Clinical Research Platform

**CuraLink is an AI-powered clinical research platform that helps patients discover clinical trials, publications, and experts while enabling researchers to collaborate, manage studies, and connect with participants.**

**🌐 Try now at [curalink-research.vercel.app](https://curalink-research.vercel.app)**

## Key Features

### For Patients

- **Natural Language Search** - Describe your condition in plain language
- **Clinical Trial Recommendations** - Personalized matches from ClinicalTrials.gov
- **Expert Discovery** - Search and connect with health researchers
- **Publication Browser** - Explore relevant medical research
- **Community Forums** - Post questions and get answers from researchers
- **Favorites** - Save trials, publications, and experts
- **Meeting Requests** - Schedule consultations with researchers

### For Researchers

- **ORCID Integration** - Link and verify your research identity
- **Trial Management** - Create and manage your clinical trials
- **Researcher Collaboration** - Connect with peers across institutions
- **Forum Responses** - Engage with patient questions
- **Publication Discovery** - Browse and save relevant papers
- **Meeting Management** - Accept or decline patient consultation requests

### Platform

- **AI-Powered Summaries** - Gemini Pro translates research into patient-friendly language
- **Smart Keyword Extraction** - Auto-extract disease terms from natural language input
- **Role-Based Access** - Separate, tailored experiences for patients and researchers

## Project Structure

The project is organized using the Next.js App Router:

```txt
curalink/
├── app/                        # Next.js App Router pages
│   ├── (auth)/                 # Authentication routes
│   ├── (patient)/              # Patient-facing pages
│   ├── (researcher)/           # Researcher dashboard pages
│   └── api/                    # API route handlers
├── components/                 # Reusable UI components
├── lib/                        # Database connection and utilities
├── models/                     # Mongoose schemas and models
├── hooks/                      # Custom React hooks
├── context/                    # React context providers
├── utils/                      # Helper functions and external API integrations
│                               # (ClinicalTrials.gov, PubMed, ORCID, Google Scholar)
├── .env.local.example          # Environment variables template
├── package.json                # Dependencies and scripts
└── README.md                   # Project documentation
```

## How To Use

To clone and run this application, you'll need [Git](https://git-scm.com), [Node.js](https://nodejs.org/en/download), and [MongoDB](https://www.mongodb.com) (or Docker) installed on your computer.

1. **Clone the repository**

   ```bash
   git clone https://github.com/your-username/curalink
   cd curalink
   ```

2. **Install dependencies**

   ```bash
   npm install
   ```

3. **Configure environment variables**

   ```bash
   cp .env.local.example .env.local
   ```

   Required variables:
   - `MONGODB_URI` - MongoDB connection string
   - `NEXTAUTH_SECRET` - NextAuth.js secret
   - `GEMINI_API_KEY` - Google Gemini API key
   - `PUBMED_API_KEY` _(optional)_ - PubMed credentials
   - `ORCID_CLIENT_ID` / `ORCID_CLIENT_SECRET` _(optional)_ - ORCID OAuth

4. **Start MongoDB (if running locally)**

   ```bash
   # Using Docker
   docker run -d -p 27017:27017 --name mongodb mongo:latest
   ```

5. **Run the development server**

   ```bash
   npm run dev
   ```

   Then open [http://localhost:3000](http://localhost:3000) in your browser.

## Development

CuraLink runs as a Next.js application using the App Router and Server Actions. Configure the required MongoDB, authentication, Gemini, and optional external API credentials before starting the development server.

## How to Contribute

1. Clone the repo and create a new branch:

   ```bash
   git checkout -b name_for_new_branch
   ```

2. Make your changes and test thoroughly.

3. Submit a Pull Request with a comprehensive description of your changes.

## Technologies

This software uses the following technologies:

- **Frontend:** Next.js 14+ (App Router) + TypeScript + Tailwind CSS
- **Backend:** Next.js Server Actions
- **Database:** MongoDB (Mongoose ODM)
- **Authentication:** NextAuth.js with JWT
- **AI:** Google Gemini Pro - keyword extraction and patient-friendly summarization
- **External APIs:** ClinicalTrials.gov, PubMed, ORCID, Google Scholar

## License

MIT

---

> 🖥️ [GitHub](https://github.com/kunaldasx)  · 
> 💼 [LinkedIn](https://www.linkedin.com/in/kunaldasx)  · 

--------------------------------------------------------------------------------
title: "Overlap - Collaborative Calendar for Friends"
description: "Real-time collaborative calendar that lets friends visually mark availability and instantly find the perfect time to meet without the usual back-and-forth."
source: "https://kunaldasx.vercel.app/project/overlap"
author: "Kunal Das"
type: "project"
citation: "Kunal Das (2024). Overlap - Collaborative Calendar for Friends [Software]. https://kunaldasx.vercel.app/project/overlap"
started: "2024-02-20"
ended: "2024-08-19"
--------------------------------------------------------------------------------

# Overlap - Collaborative Calendar for Friends

**Overlap is a real-time collaborative calendar that lets you and your friends visually mark your availability and instantly find the perfect time to meet, without the endless back-and-forth messages, polls, or creating yet another account.**

**✨ Try now at [overlapcalendar.vercel.app](https://overlapcalendar.vercel.app)**

## Features

- **No Signup Required** - Start planning immediately
- **Visual Availability Marking** - Click and drag to mark when you're free
- **Real-time Collaboration** - See updates from friends instantly
- **Secure Sharing** - Share calendars with a unique ID and PIN

## How It Works

1. **Create or Join** - Start a new calendar or join an existing one with ID & PIN
2. **Mark Availability** - Click and drag on dates when you're available
3. **Share with Friends** - Send the calendar ID and PIN to your group
4. **Find Common Time** - Instantly see when everyone is free

## Tech Stack

- **Framework:** [Next.js 15](https://nextjs.org/)
- **Language:** [TypeScript](https://www.typescriptlang.org/)
- **Styling:** [Tailwind CSS 4.0](https://tailwindcss.com/)
- **UI Components:** [shadcn/ui](https://ui.shadcn.com/)
- **Database:** [PostgreSQL](https://www.postgresql.org/) via [Supabase](https://supabase.com/)
- **ORM:** [Prisma](https://www.prisma.io/)
- **Real-time:** [Supabase Realtime Broadcast](https://supabase.com/docs/guides/realtime/broadcast)
- **Calendar:** [React Big Calendar](https://github.com/jquense/react-big-calendar)
- **Bot Protection:** [Vercel BotID](https://vercel.com/docs/security/botid)
- **Deployment:** [Vercel](https://vercel.com/)

## Project Structure

The project is organized using the Next.js App Router:

```txt
Overlap
├── app/                           # Next.js app router
│   ├── api/                       # API routes
│   │   ├── calendar/              # Calendar endpoints
│   │   │   ├── create/            # POST: Create new calendar
│   │   │   ├── join/              # POST: Join existing calendar
│   │   │   └── [id]/              # Calendar-specific operations
│   │   │       ├── events/        # GET/POST/DELETE: Manage events
│   │   │       ├── rotate-pin/    # POST: Rotate calendar PIN
│   │   │       └── update/        # PATCH: Update calendar details
│   │   └── cron/                  # Scheduled jobs
│   │       └── cleanup-calendars/ # Clean up old calendars
│   ├── calendar/                  # Calendar pages
│   │   └── [id]/                  # Dynamic calendar view
├── components/                    # React components
│   └── ui/                        # shadcn/ui components
├── lib/                           # Utility functions and services
│   └── supabase/                  # Supabase configuration
├── prisma/                        # Database configuration
├── public/                        # Static assets
└── package.json                   # Dependencies and scripts
```

## Prerequisites

Before you begin, ensure you have the following installed:

- Node.js 18+
- pnpm (recommended) or npm
- Supabase account (free tier works)

## Getting Started

After checking the prerequisites above, follow these steps to set up the project.

1. **Clone the repository**

   ```bash
   git clone https://github.com/kunaldasx/overlap-calendar.git
   cd Overlap
   ```

2. **Install dependencies**

   ```bash
   pnpm install
   ```

3. **Copy environment variables**

   ```bash
   cp .env.example .env.local
   ```

4. **Set up Supabase**
   - Sign up or log in at [app.supabase.com](https://app.supabase.com)
   - Create a new project (free tier is fine)
   - In **Settings → API**, copy:
     - `Project URL` → `NEXT_PUBLIC_SUPABASE_URL`
     - `anon public key` → `NEXT_PUBLIC_SUPABASE_ANON_KEY`
   - In **Database → Connection** info, copy:
     - `DATABASE_URL`
     - `DIRECT_URL`

   > You do **not** need to set the `CRON_SECRET` environment variable for local development.

5. **Initialize the database schema**

   > `pnpm prisma generate` runs automatically after dependencies are installed via the postinstall script in `package.json`.

   ```bash
   pnpm prisma db push
   ```

6. **Run the development server**

   ```bash
   pnpm dev
   ```

   Your app will be available at [http://localhost:3000](http://localhost:3000).

## Usage

### Creating a Calendar

1. Visit the website
2. Click **Create Calendar**
3. Start marking your availability
4. Share the invite link with friends

### Joining a Calendar

Click an invite link or enter the ID and PIN received from a friend.

### Marking Availability

- **Add Availability:** Select **Mark Available** and drag across dates
- **Remove Availability:** Select **Delete Available** and drag across dates
- **Edit Calendar Name:** Click on the calendar name in the top bar

## Contributing

Contributions are welcome!

### Development

```bash
# Run development server (with Turbopack)
pnpm dev

# Build for production (with Turbopack)
pnpm build

# Run production build
pnpm start

# Linting and formatting
pnpm lint:check       # Run ESLint check
pnpm lint:fix         # Fix ESLint issues
pnpm format:check     # Check formatting with Prettier
pnpm format:fix       # Fix formatting with Prettier

# Database commands
pnpm db:push          # Push schema changes to database
pnpm db:generate      # Generate Prisma client
pnpm db:migrate       # Run database migrations
pnpm db:studio        # Open Prisma Studio
```

### Environment Variables

```env
# Supabase
NEXT_PUBLIC_SUPABASE_URL=your_supabase_url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your_anon_key

# Database (for Prisma)
DATABASE_URL=your_database_url
DIRECT_URL=your_direct_url

# Cron
CRON_SECRET=your_cron_secret
```

## License

This project is licensed under the Apache-2.0 License - see the [LICENSE](/LICENSE) file for details.

## Author

**Kunal Das**

- Website: [kunaldasx.vercel.app](https://kunaldasx.vercel.app)
- GitHub: [@kunaldasx](https://github.com/kunaldasx)

## Acknowledgments

- [React Big Calendar](https://github.com/jquense/react-big-calendar) for the calendar component
- [Supabase](https://supabase.com/) for the backend infrastructure
- [Vercel](https://vercel.com/) for hosting and bot protection
- [shadcn/ui](https://ui.shadcn.com/) for UI components

## Support

For support, please [open an issue](https://github.com/kunaldasx/overlap-calendar/issues) or contact me at [kunaldasx.vercel.app/contact](https://kunaldasx.vercel.app/contact).

---

> 🌐 [Visit my website →](https://kunaldasx.vercel.app/)  
> 🖥️ [GitHub](https://github.com/kunaldasx)  · 
> 💼 [LinkedIn](https://www.linkedin.com/in/kunaldasx)  · 
> 🐦 [Twitter / X](https://x.com/Kunaldasx)

--------------------------------------------------------------------------------
title: "Phantom Pair - AI-Powered Coding Assistant"
description: "AI-powered coding assistant that reads coding problems from screenshots and delivers instant solutions while remaining invisible to screen recorders."
source: "https://kunaldasx.vercel.app/project/phantom-pair"
author: "Kunal Das"
type: "project"
citation: "Kunal Das (2025). Phantom Pair - AI-Powered Coding Assistant [Software]. https://kunaldasx.vercel.app/project/phantom-pair"
started: "2025-01-25"
ended: "2025-04-13"
--------------------------------------------------------------------------------

# Phantom Pair - AI-Powered Coding Assistant

**Phantom Pair is an AI-powered coding assistant that reads problems from screenshots and delivers instant solutions - while remaining invisible to screen recorders.**

## Download

Download the latest version for your platform:

**Windows:** [phantom-pair-1.0.0-setup.exe](https://github.com/kunaldasx/phantom-pair/releases/download/v1.0.0/phantom-pair-1.0.0-setup.exe)

**Linux:**

- [phantom-pair-1.0.0.AppImage](https://github.com/kunaldasx/phantom-pair/releases/download/v1.0.0/phantom-pair-1.0.0.AppImage) (Universal)
- [phantom-pair_1.0.0_amd64.deb](https://github.com/kunaldasx/phantom-pair/releases/download/v1.0.0/phantom-pair_1.0.0_amd64.deb) (Debian/Ubuntu)

**[📜 View all releases](https://github.com/Kunaldasx/phantom-pair/releases)**

## Key Features

- **Privacy Overlay** - Invisible to screen recorders, streaming tools, and screen sharing
- **Screenshot Capture** - Global hotkeys for instant problem screenshot capture
- **AI Problem Analysis** - Extract coding problems from images using GPT/Gemini
- **Multi-Language Support** - Generate solutions in Python, C++, Java, and more
- **Solution Generation** - Optimized code with detailed explanations and complexity analysis
- **Debug Mode** - Analyze error screenshots for solution improvements
- **Dual AI Providers** - Switch between OpenAI GPT and Google Gemini models
- **Always-On-Top Window** - Overlay interface that stays accessible during coding
- **Click-Through Mode** - Toggle window interaction for seamless workflow
- **Global Shortcuts** - Complete keyboard control without leaving your IDE
- **Screenshot Management** - Queue system for multiple problem images
- **Automatic Cleanup** - Smart file management and temporary data handling
- **Configuration Persistence** - Save API keys, preferences, and window settings
- **Cross-Platform** - Works on Windows, macOS, and Linux
- **Opacity Control** - Adjust window transparency for optimal visibility

## Project Structure

The project is organized as an Electron desktop application with a React renderer:

```txt
phantom-pair/
├── src/
│   ├── main/                    # Electron main process
│   │   ├── index.ts             # Application entry point and window management
│   │   └── lib/                 # Core business logic
│   │       ├── config-manager.ts        # User settings and API key management
│   │       ├── processing-manager.ts    # AI processing orchestration
│   │       ├── screenshot-manager.ts    # Screenshot capture and file management
│   │       ├── keyboard-shortcut.ts     # Global shortcuts and window controls
│   │       └── ipc-handler.ts            # Inter-process communication handlers
│   ├── preload/                 # Secure IPC bridge
│   │   ├── index.ts             # Preload script for renderer communication
│   │   └── index.d.ts           # TypeScript definitions for exposed APIs
│   └── renderer/                # React frontend
│       ├── index.html           # HTML entry point
│       └── src/
│           ├── App.tsx           # Root React component
│           ├── main.tsx          # React DOM render entry
│           ├── components/       # UI components
│           │   ├── main-app.tsx          # Primary application interface
│           │   ├── screenshots-view.tsx  # Screenshot management UI
│           │   ├── settings-dialog.tsx   # Configuration interface
│           │   ├── solutions.tsx         # AI solution display
│           │   └── welcome-screen.tsx    # Initial setup screen
│           ├── providers/        # React context providers
│           │   ├── query-provider.tsx    # TanStack Query setup
│           │   ├── toast-context.tsx     # Toast notification context
│           │   └── toast-provider.tsx    # Toast provider implementation
│           ├── lib/              # Shared utilities and types
│           │   ├── types.ts      # TypeScript type definitions
│           │   ├── utils.ts      # Utility functions
│           │   └── languages.ts  # Programming language configurations
│           └── assets/           # Static assets (CSS, images)
```

## How To Use

To clone and run this application, you'll need [Git](https://git-scm.com) and [Node.js](https://nodejs.org/en/download) (which comes with [npm](https://www.npmjs.com)) installed on your computer.

1. **Clone the repository**

   ```bash
   git clone https://github.com/kunaldasx/phantom-pair
   cd phantom-pair
   ```

2. **Install dependencies**

   ```bash
   npm install
   ```

3. **Start the development application**

   ```bash
   npm run dev
   ```

## Development Commands

```bash
# Install dependencies
npm install

# Development mode with hot reload
npm run dev

# Build the application
npm run build
```

## Platform-Specific Builds

```bash
# Windows build
npm run build:win

# macOS build
npm run build:mac

# Linux build
npm run build:linux

# Build without packaging (for testing)
npm run build:unpack
```

## How to Contribute

1. Clone the repository and create a new branch:

   ```bash
   git checkout -b name_for_new_branch
   ```

2. Make your changes and test them.

3. Submit a Pull Request with a comprehensive description of your changes.

## Emailware

Phantom Pair is an [emailware](https://en.wiktionary.org/wiki/emailware). If you liked using this app or it has helped you in any way, I'd like you to send me an email at [kunaldasx@gmail.com](mailto:kunaldasx@gmail.com) about anything you'd want to say about this software. I'd really appreciate it!

## Technologies

This software uses the following technologies:

- **Electron 35.0.0** - Cross-platform desktop application framework
- **Node.js** - Server-side JavaScript runtime for the main process
- **Electron Vite 3.1.0** - Modern build tooling with HMR support
- **React 19.1.0** - UI library with modern hooks and concurrent features
- **TypeScript 5.8.3** - Static typing for JavaScript
- **TailwindCSS 4.1.4** - Utility-first CSS framework
- **Radix UI** - Accessible component primitives for dialogs and toasts
- **TanStack Query 5.74.4** - Server state management and caching
- **Framer Motion 12.23.12** - Animation library
- **React Syntax Highlighter** - Code syntax highlighting

## License

MIT

---

> 🌐 [Visit my website →](https://kunaldasx.vercel.app/)  
> 🖥️ [GitHub](https://github.com/kunaldasx)  ·   
> 💼 [LinkedIn](https://www.linkedin.com/in/kunaldasx/)  ·   
> 🐦 [Twitter / X](https://x.com/Kunaldasx)  · 

--------------------------------------------------------------------------------
title: "Known Space Explorer - Cinematic Space Exploration Experience"
description: "Cinematic space exploration experience built with pure HTML, CSS, and JavaScript that visualizes the Solar System and the Observable Universe directly in the browser."
source: "https://kunaldasx.vercel.app/project/space-simulator"
author: "Kunal Das"
type: "project"
citation: "Kunal Das (2023). Known Space Explorer - Cinematic Space Exploration Experience [Software]. https://kunaldasx.vercel.app/project/space-simulator"
started: "2023-11-27"
ended: "2023-12-30"
--------------------------------------------------------------------------------

# Known Space Explorer - Cinematic Space Exploration Experience

**Known Space Explorer is a cinematic space exploration experience built with pure HTML, CSS, and JavaScript that visualizes the Solar System and the Observable Universe directly in your browser. No installation or build step required.**

**🌐 Try now at [kunaldasx.github.io/space-simulator](https://kunaldasx.github.io/space-simulator/)**

## Demo

![Known Space solar system view](/project/space-simulator/launch.png)

![Known Space solar system view](/project/space-simulator/cover.png)

![Known Space solar system view](/project/space-simulator/galaxy.png)

## Key Features

### Journey Flow

1. **Launch** - Watch your shuttle lift off from Earth
2. **Orbit** - Float in space with Earth behind you
3. **Solar System** - All 8 planets orbiting the Sun; tap any planet for details
4. **Observable Universe** - Zoom out to the full 93-billion-light-year cosmos

### Showcase Features

- **Observatory-style HUD** - Scene status with a live discovery count
- **Universal Search** - Search across planets, the Sun, galaxies, clusters, voids, and cosmic structures
- **Direct Target Focusing** - Focus directly on selected objects
- **Random Discovery** - Discover random objects throughout the experience
- **Earth Shortcut** - Quickly return focus to Earth
- **Pan & Zoom** - Mouse/touch pan with pinch or button zoom
- **Responsive Detail Views** - Explore object information with keyboard-friendly controls
- **Escape-to-Close** - Close detail views using the Escape key

## Project Structure

The project is organized as a lightweight browser application with no build step:

```txt
Known Space Explorer
├── index.html      # Page structure and scene controls
├── styles.css      # Layout, visual, and animation styles
├── constants.js    # Astronomy data for planets and universe objects
└── app.js          # Scene navigation, rendering, gestures, and interaction logic
```

## How To Use

No installation or dependency setup is required. Simply open `index.html` in any modern browser.

1. **Clone the repository**

   ```bash
   git clone https://github.com/kunaldasx/space-simulator.git
   cd space-simulator
   ```

2. **Open the application**

   ```bash
   open index.html
   ```

   You can also open `index.html` directly in any modern browser.

## Technologies

This software uses the following technologies:

- **HTML5**
- **CSS3 animations**
- **Vanilla JavaScript**

## License

© 2026 Kunal Das.

---

## About the Author

**Kunal Das**

- [LinkedIn](https://linkedin.com/in/kunaldasx)

--------------------------------------------------------------------------------
title: "Word Scramble Game - Timed Vocabulary Challenge"
description: "Fun and challenging word game that tests vocabulary under time pressure with difficulty levels, streak bonuses, hints, and time-based scoring."
source: "https://kunaldasx.vercel.app/project/word-scramble-game"
author: "Kunal Das"
type: "project"
citation: "Kunal Das (2023). Word Scramble Game - Timed Vocabulary Challenge [Software]. https://kunaldasx.vercel.app/project/word-scramble-game"
started: "2023-11-16"
ended: "2023-11-25"
--------------------------------------------------------------------------------

# Word Scramble Game - Timed Vocabulary Challenge

**Word Scramble Game is a fun and challenging word game that tests your vocabulary under time pressure. Unscramble letters to reveal hidden words and climb the leaderboard.**

**🎮 Play now at [kunaldasx.github.io/word-scramble-game](https://kunaldasx.github.io/word-scramble-game/)**

## Features

### Dynamic Gameplay

- **200+ Words** - Words across multiple difficulty levels from Common to Legendary
- **Streak Bonuses** - Earn bonuses for consecutive correct answers
- **Time-Based Scoring** - Faster guesses earn more points

### Player Assistance

- **Smart Hints** - Get helpful hints for each word
- **Live Input Validation** - Green underline feedback for partial matches
- **Word Refresh** - Refresh the current word when needed

### Progress Tracking

- **Animated Score Updates** - Dynamic feedback as your score changes
- **Visual Feedback** - Clear indication of correct and incorrect answers
- **Celebration Effects** - Special effects for high scores

## Project Structure

The project is organized as a lightweight browser game with no build step:

```txt
word-scramble-game/
├── js/
│   ├── script.js      # Game logic and controls
│   └── words.js       # Word database
├── style.css          # All styling
├── index.html         # Main interface
└── img/               # Game assets
```

## Prerequisites

No dependencies or build tools are required. A modern web browser is sufficient to run the game.

## Getting Started

### Play Online

Open the [Live Demo](https://kunaldasx.github.io/word-scramble-game/) in your browser.

### Run Locally

1. **Clone the repository**

   ```bash
   git clone https://github.com/kunaldasx/word-scramble-game.git
   cd word-scramble-game
   ```

2. **Open the game**

   ```bash
   open index.html
   ```

   You can also open `index.html` directly in your preferred browser.

## How To Play

1. Guess the unscrambled word shown on screen.
2. Type your answer in the input field.
3. Earn points based on:
   - Word difficulty
   - Time remaining
   - Current streak
4. Use hints if stuck or refresh for a new word.

**Pro Tip:** Legendary words (8+ letters) give 3× bonus points!

## Technologies

This project uses the following technologies:

- **HTML5**
- **CSS3**
- **JavaScript**

## Contributing

Contributions are welcome!

1. Fork the repository.
2. Create a feature branch:

   ```bash
   git checkout -b feature/your-feature
   ```

3. Commit your changes:

   ```bash
   git commit -m "Add some feature"
   ```

4. Push the branch:

   ```bash
   git push origin feature/your-feature
   ```

5. Open a Pull Request.

## License

MIT © [kunaldasx](https://github.com/kunaldasx)

## Contact

For questions or suggestions:

[GitHub](https://github.com/kunaldasx)

---

> 🌐 [Visit my website →](https://kunaldasx.vercel.app/)  
> 🖥️ [GitHub](https://github.com/kunaldasx)  · 
> 💼 [LinkedIn](https://www.linkedin.com/in/kunaldasx)  · 
> 🐦 [Twitter / X](https://x.com/Kunaldasx)