Cloud-Based Note-taking App: Project Setup and Configuration Guide

1. Initialize Next.js project with TypeScript and App Router

1. Open your terminal in Cursor AI.
2. Run the following command to create a new Next.js project with TypeScript:

   npx create-next-app@latest cloud-notes-app --typescript --eslint --tailwind --app --src-dir --import-alias "@/*"
   

3. Navigate to the project directory:

   cd cloud-notes-app
   

2. Set up Tailwind CSS, Shadcn UI, and Radix UI

Tailwind CSS is already set up by default. Let's add Shadcn UI and Radix UI:

1. Install Shadcn UI CLI:

   npx shadcn-ui@latest init
   

2. Follow the prompts to configure Shadcn UI. Choose the following options:

   • TypeScript: Yes
   • Style: Default (or your preference)
   • Color: Default (or your preference)
   • CSS variables: Yes
   • Project root: Yes
   • Components directory: src/components
   • Utility directory: src/lib/utils

3. Install necessary Radix UI primitives:

   npm install @radix-ui/react-dialog @radix-ui/react-dropdown-menu @radix-ui/react-tooltip
   

3. Configure DrizzleORM for database interactions

1. Install DrizzleORM and its dependencies:

   npm install drizzle-orm @cloudflare/workers-types
   npm install -D drizzle-kit
   

2. Create a src/lib/db directory and add a schema.ts file:

   // src/lib/db/schema.ts
   import { sqliteTable, text, integer } from 'drizzle-orm/sqlite-core';
   
   export const notes = sqliteTable('notes', {
     id: text('id').primaryKey(),
     title: text('title').notNull(),
     content: text('content').notNull(),
     userId: text('user_id').notNull(),
     createdAt: integer('created_at', { mode: 'timestamp' }).notNull(),
     updatedAt: integer('updated_at', { mode: 'timestamp' }).notNull(),
   });
   

4. Set up Cloudflare D1 for serverless database

1. Install Wrangler CLI globally:

   npm install -g wrangler
   

2. Authenticate with Cloudflare:

   wrangler login
   

3. Create a new D1 database:

   wrangler d1 create cloud-notes-db
   

4. Update wrangler.toml with the D1 database configuration:

   [[d1_databases]]
   binding = "DB"
   database_name = "cloud-notes-db"
   database_id = "<your-database-id>"
   

5. Configure Cloudflare KV for key-value storage

1. Create a new KV namespace:

   wrangler kv:namespace create "CLOUD_NOTES_KV"
   

2. Add the KV namespace to wrangler.toml:

   [[kv_namespaces]]
   binding = "CLOUD_NOTES_KV"
   id = "<your-namespace-id>"
   

6. Set up Cloudflare R2 for file storage (if needed)

1. Create a new R2 bucket:

   wrangler r2 bucket create cloud-notes-files
   

2. Add the R2 bucket to wrangler.toml:

   [[r2_buckets]]
   binding = "CLOUD_NOTES_FILES"
   bucket_name = "cloud-notes-files"
   

7. Configure wrangler.toml for Cloudflare Workers

1. Create a wrangler.toml file in the project root if it doesn't exist:

   name = "cloud-notes-app"
   main = "src/worker.ts"
   compatibility_date = "2023-01-01"
   
   [build]
   command = "npm run build"
   
   [site]
   bucket = "./out"
   
   # D1 database configuration
   [[d1_databases]]
   binding = "DB"
   database_name = "cloud-notes-db"
   database_id = "<your-database-id>"
   
   # KV namespace configuration
   [[kv_namespaces]]
   binding = "CLOUD_NOTES_KV"
   id = "<your-namespace-id>"
   
   # R2 bucket configuration
   [[r2_buckets]]
   binding = "CLOUD_NOTES_FILES"
   bucket_name = "cloud-notes-files"
   

2. Create a src/worker.ts file:

   // src/worker.ts
   import { Hono } from 'hono';
   import { handle } from 'hono/cloudflare-workers';
   
   const app = new Hono();
   
   app.get('/', (c) => c.text('Hello World!'));
   
   export default { fetch: handle(app) };
   

3. Update package.json scripts:

   "scripts": {
     "dev": "next dev",
     "build": "next build",
     "start": "next start",
     "lint": "next lint",
     "deploy": "wrangler deploy"
   }
   

With these steps completed, you'll have set up the project structure, installed necessary dependencies, and configured Cloudflare services for your Cloud-Based Note-taking App. The next steps would involve implementing the app's features and functionality using the tools and configurations we've set up.

This is just a start, we'll be adding more parts to this post soon.

Keep in mind you can check out our cursor directory for even more tips and tricks on how to use Cursor, Claude and your tech stack to build real time apps.