Build Assignment Manager App with Airtable

What you're building: Student assignment tracker with Airtable as database

Tech stack: React + NestJS + Airtable API

Step 1: Tell Cocoding.ai What to Build

Copy/paste this prompt:

Build a full-stack assignment management application using React, NestJS,
and Airtable as the database.

Features:
- Assignment CRUD (create, read, update, delete)
- Dashboard with statistics (total, completed, pending)
- Kanban board with drag-and-drop
- Calendar view of deadlines
- Search and filter assignments

Assignment fields:
- Title (text)
- Subject (text)
- Due date (date)
- Priority (select: Low, Medium, High, Urgent)
- Status (select: Not Started, In Progress, Done)
- Description (long text)

Use Airtable REST API for data storage.
Use Tailwind CSS for modern, responsive UI.

Cocoding.ai creates everything automatically — backend, frontend, database, deployment.

Step 2: Create Airtable Base

2.1 Sign Up for Airtable

1. Go to [airtable.com](https://airtable.com)
2. Click "Sign up for free"
3. Verify your email

<!-- mediaBlock block -->

2.2 Create New Base

1. After logging in, click "Add a base"
2. Select "Start from scratch"
3. Name it: Assignment Tracker
4. Click "Create base"

<!-- mediaBlock block -->

2.3 Set Up Table

1. Rename the default table to "Assignments"
2. Create these columns:

⚠️ Important: Column names must match exactly (case-sensitive)

2.4 Add Sample Data (Optional)

Click "+ Add record" and add a test assignment:

• Title: "Math Homework"
• Subject: "Mathematics"
• DueDate: Tomorrow
• Priority: High
• Status: Not Started
• Description: "Complete exercises 1-10"

Step 3: Get Airtable API Credentials

3.1 Create Personal Access Token

<!-- mediaBlock block -->

1. Go to [airtable.com/create/tokens](https://airtable.com/create/tokens)
2. Click "Create new token"
3. Name it: Assignment Manager App
4. Under Scopes, select:

- ✅ data.records:read

- ✅ data.records:write

1. Under Access, select your "Assignment Manager" base
2. Click "Create token"
3. COPY THE TOKEN IMMEDIATELY (starts with pat)

Example: patAbCdEfGhIjKlMnOpQrStUvWxYz1234567890

3.2 Get Base ID

<!-- mediaBlock block -->

1. Go to [airtable.com/api](https://airtable.com/api)
2. Click on your base
3. Find Base ID in the introduction (starts with app)

Example: appAbCdEfGhIjKlMn

Alternative: Check the URL when viewing your base - it's after / in the URL.

Step 4: Connect Airtable to App

📸 Screenshot placeholder: .env file with credentials

Open .env and add:

VITE_AIRTABLE_API_KEY=pat_YOUR_ACTUAL_API_KEY_HERE
VITE_AIRTABLE_BASE_ID=app_YOUR_BASE_ID_HERE
VITE_AIRTABLE_TABLE_NAME=Assignments

Save the file — backend restarts automatically.

Step 5: Test Your App

<!-- mediaBlock block -->

5.1 Open the App

1. Open the app URL (Cocoding.ai provides this)
2. You should see the dashboard with statistics!

5.2 Create Assignment

<!-- mediaBlock block -->

1. Click "New Assignment"
2. Fill in:

- Title: "Study for Finals"

- Subject: "Physics"

- Due Date: Next week

- Priority: High

- Status: Not Started

- Description: "Chapters 1-5"

1. Click "Create"

5.3 Verify in Airtable

1. Go to your Airtable base
2. Refresh the page
3. ✅ You should see the new assignment!

5.4 Test Kanban Board

1. Click "Kanban" in the app
2. Drag assignment from "Not Started" to "In Progress"
3. ✅ Check Airtable - status updated!

📸 Screenshot placeholder: Kanban board with drag-and-drop

<!-- mediaBlock block -->

5.5 Test Calendar View

1. Click "Calendar" in the app
2. ✅ See your assignment on the due date!

Troubleshooting

"API key is invalid"?

• Verify key starts with pat
• Check token has correct scopes (read/write)
• Regenerate token if needed
• Restart backend after updating .env

"Base not found"?

• Double-check Base ID starts with app
• Verify you selected correct base when creating token
• Check for extra spaces in .env

"Table not found"?

• Table name must be exactly: Assignments (case-sensitive)
• Rename table in Airtable if needed
• No spaces or special characters

"Missing fields" or data not saving?

• Check column names match exactly:

- Title, Subject, DueDate, Priority, Status, Description, CreatedAt

• Capitalization matters!
• DueDate is one word (not "Due Date")

Can't drag cards on Kanban?

• Use modern browser (Chrome, Firefox, Safari, Edge)
• Refresh page
• Clear browser cache

Calendar not showing assignments?

• Make sure assignments have valid due dates
• Check DueDate column is Date field type
• Verify dates are set correctly

Security Best Practices

✅ Never share API key publicly

✅ Don't commit `.env` to git

✅ Regenerate token if exposed:

1. Go to [airtable.com/create/tokens](https://airtable.com/create/tokens)
2. Find your token
3. Click "Revoke"
4. Create new token
5. Update .env

✅ Use separate tokens for dev/production

✅ Set appropriate scopes — Only grant read/write if needed

Airtable vs Traditional Databases

Customize Your App

Tell Cocoding.ai what you want:

Features:

• "Add file attachments to assignments"
• "Add collaborators/team members"
• "Send email reminders for due dates"
• "Add tags for categorization"
• "Implement search across all assignments"
• "Add assignment templates"

Views:

• "Add timeline view of assignments"
• "Create statistics chart by subject"
• "Add completed assignments archive"
• "Show assignments by priority"

Integrations:

• "Send Slack notifications for urgent deadlines"
• "Sync with Google Calendar"
• "Connect to Notion for documentation"

Going to Production

Step 1: Deploy Your App

Ask Cocoding.ai:

Deploy this app to production so others can access it online

Step 2: Use Production Token

1. Create a separate Personal Access Token for production
2. Update production environment variables
3. Never use test tokens in production

Step 3: Set Up Backups

Airtable automatically backs up your data, but you can also:

• Export base as CSV weekly
• Enable Airtable snapshots (paid feature)

Step 4: Monitor Usage

• Check Airtable API usage dashboard
• Monitor rate limits (5 requests/second free tier)
• Upgrade if needed

Pro Tips

Organize with Views:

• Create filtered views in Airtable (by subject, by status)
• Use grid view for overview, kanban for workflow
• Calendar view for deadlines

Use Formulas:

• Add calculated fields (days until due, overdue flag)
• Example: IF(IS_AFTER({DueDate}, TODAY()), "Overdue", "On Track")

Automations:

• Set up email notifications in Airtable
• Create reminders for upcoming deadlines
• Auto-assign tasks based on rules

Collaboration:

• Share base with team members
• Set permissions (read-only, edit, comment)
• Use comments for discussion

FAQ

Q: Is Airtable free?

A: Yes! Free tier includes:

• Unlimited bases
• 1,000 records per base
• 1GB attachments
• API access

Q: Can I use this for production apps?

A: Yes, but consider:

• Free tier has API rate limits (5 req/sec)
• Upgrade for more capacity ($20/month)
• For high-traffic apps, use traditional database

Q: Can I export my data?

A: Yes:

• Base menu → Export base → CSV
• Automatic backups available (paid)
• Full data ownership

Q: How many records can I store?

A: Free tier: 1,000 records per base. Paid plans: 50,000+ records.

Q: Can I use Airtable with other databases?

A: Yes! Ask Cocoding.ai: "Add PostgreSQL database alongside Airtable for caching"

Q: What happens if I exceed limits?

A: API calls will fail. Upgrade plan or optimize with caching.

Advanced Features

Relationships Between Tables

Ask Cocoding.ai:

Add a "Subjects" table to Airtable and relate assignments to subjects

This creates a relational database structure!

Formulas and Rollups

In Airtable, add formula fields:

• Days until due: DATETIME_DIFF({DueDate}, TODAY(), 'days')
• Progress percentage: Count done vs total

Airtable Automations

1. Click "Automations" in Airtable
2. Create rule: "When status changes to Done"
3. Action: "Send email" or "Update record"

These work alongside your app!

Cost Comparison

Most small apps: Free tier is plenty!

Growing apps: Upgrade to Plus when needed.