Loading...
;
return (
Tasks
{/* Create task */}
{/* Task list */}
{tasks.map(task => (
update({
taskId: task._id,
completed: e.target.checked
})}
/>
{task.title}
))}
);
}
```
### Step 7: Development vs Production
**For Development (use this!):**
```bash
# Start development server (NOT production!)
npx convex dev
# This runs locally and auto-reloads on changes
# Use this for all development work
```
**For Production Deployment:**
```bash
# ONLY use this when deploying to production!
npx convex deploy
# WARNING: This deploys to your production environment
# Don't use this during development
```
**Important:** Always use `npx convex dev` during development. Only use `npx convex deploy` when you're ready to ship to production.
## Common Patterns
### Paginated Queries
```typescript
export const listPaginated = query({
args: {
cursor: v.optional(v.string()),
limit: v.number(),
},
handler: async (ctx, args) => {
const user = await getCurrentUser(ctx);
const results = await ctx.db
.query("tasks")
.withIndex("by_user", q => q.eq("userId", user._id))
.order("desc")
.paginate({ cursor: args.cursor, limit: args.limit });
return results;
},
});
```
### Filtering by Status
```typescript
export const listByStatus = query({
args: {
completed: v.boolean(),
},
handler: async (ctx, args) => {
const user = await getCurrentUser(ctx);
return await ctx.db
.query("tasks")
.withIndex("by_user_and_completed", q =>
q.eq("userId", user._id).eq("completed", args.completed)
)
.collect();
},
});
```
### Scheduled Jobs
```typescript
// convex/crons.ts
import { cronJobs } from "convex/server";
import { internal } from "./_generated/api";
const crons = cronJobs();
crons.daily(
"cleanup-old-tasks",
{ hourUTC: 0, minuteUTC: 0 },
internal.tasks.cleanupOld
);
export default crons;
// convex/tasks.ts
export const cleanupOld = internalMutation({
handler: async (ctx) => {
const thirtyDaysAgo = Date.now() - 30 * 24 * 60 * 60 * 1000;
const oldTasks = await ctx.db
.query("tasks")
.filter(q =>
q.and(
q.eq(q.field("completed"), true),
q.lt(q.field("createdAt"), thirtyDaysAgo)
)
)
.collect();
for (const task of oldTasks) {
await ctx.db.delete(task._id);
}
},
});
```
## Project Templates
### React + Vite + Convex
```bash
npm create vite@latest my-app -- --template react-ts
cd my-app
npm install convex @workos-inc/authkit-react
npx convex dev
```
### Next.js + Convex
```bash
npx create-next-app@latest my-app
cd my-app
npm install convex @workos-inc/authkit-nextjs
npx convex dev
```
### Expo (React Native) + Convex
```bash
npx create-expo-app my-app
cd my-app
npm install convex
npx convex dev
```
## Checklist
- [ ] `npm install convex` completed
- [ ] `npx convex dev` running (use this, NOT deploy!)
- [ ] Schema created with proper indexes
- [ ] Auth provider configured (WorkOS/custom)
- [ ] `getCurrentUser` helper implemented
- [ ] User storage mutation created
- [ ] CRUD operations with auth checks
- [ ] Frontend integrated with hooks
- [ ] Tested queries and mutations locally
- [ ] When ready for production, use `npx convex deploy`
**Remember:** Use `npx convex dev` for all development work. Only use `npx convex deploy` when deploying to production!
## Next Steps
After quickstart:
1. Add more tables to schema
2. Implement relationships between tables
3. Add file storage (Convex supports file uploads)
4. Set up vector search for AI features
5. Add cron jobs for scheduled tasks
6. Configure production environment variables
## Troubleshooting
### "Not authenticated" errors
- Ensure auth provider is configured
- Call `storeUser` mutation on first sign-in
- Check `getCurrentUser` is imported correctly
### Types not updating
- Run `npx convex dev` (regenerates types)
- Restart TypeScript server in editor
### Slow queries
- Add indexes to schema
- Use `.withIndex()` instead of `.filter()`
- Check query patterns in dashboard
## Learn More
- [Convex Docs](https://docs.convex.dev)
- [React Quickstart](https://docs.convex.dev/quickstart/react)
- [Next.js Quickstart](https://docs.convex.dev/quickstart/nextjs)
- [Example Apps](https://github.com/get-convex/convex-demos)