Next.js Full-Stack Application with Real-Time AI Integration
Youtube - 👉 Tutorial
- AI Task Assistant
- Natural language CRUD operations via chat
- Data analysis and optimization suggestions
- Toolcalling with Vercel AI SDK
- Core Functionality
- Real-time task synchronization (Convex DB)
- Secure authentication (Clerk)
- Responsive dashboard with metrics
- Tech Highlights
- Type-safe API layer
- Modern UI components (shadcn/ui)
- Edge-ready deployment
- Frontend: Next.js 15 (App Router), TailwindCSS
- Backend: Convex (Database/Server Functions)
- Auth: Clerk
- AI: Vercel AI SDK, OpenAI API
- Tools: TypeScript, Zod, React Query
- Node.js 20+ OR pnpm 9+
- OpenAI API Key
- Clerk & Convex accounts
git clone https://github.com/carlospprojects/taskly-yt.git
cd taskly-yt
npm install # or pnpm install / yarn
- Create
.env.local
file:
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=your_clerk_key
CLERK_SECRET_KEY=your_clerk_secret
CONVEX_DEPLOYMENT=your_convex_deployment
NEXT_PUBLIC_CONVEX_URL=your_convex_url
OPENAI_API_KEY=your_openai_key
DEEPSEEK_API_KEY=optional_deepseek_key
- Set up services:
npm run dev
# Convex development mode
npx convex dev
/user: "Create new task 'Fix responsive layout' with high priority"
/ai: Creates task and confirms via database mutation
/user: "Show me overdue tasks from last week"
/ai: Queries DB and returns filtered results
/user: "Analyze my productivity patterns"
/ai: Generates report using task metadata
- Vercel:
vercel
- Set same environment variables in production
- Configure Convex production project:
npx convex deploy
/src
├── app/(dashboard) # Auth-protected routes
├── app/api # Edge API routes
├── components # Global components
├── lib # Utils, hooks, etc.
├── hooks # Custom hooks
├── ai # Tools, AI SDK, etc.
└── constants # Constants, enums, etc.
/convex # Database config, schema & mutations
Need Help?
Open an issue or contact [email protected]