A modern, edtech-focused task management application built with Next.js and Supabase that allows users to manage their tasks, assign tasks to friends, and track progress on a leaderboard.
- User Authentication: Secure login and signup with Supabase Auth
- Dashboard: View your tasks, friend's tasks, and leaderboard all in one place
- Task Management: Create, update, and track the status of tasks
- Friend System: Connect with friends and assign tasks to each other
- Email Notifications: Automatic email notifications when tasks are assigned 📧
- Leaderboard: Compete with friends based on task completion
- Responsive Design: Works on desktop, tablet, and mobile devices
TasklApp.app is pronounced "task lap," relating the completion of tasks to running laps on a track. This competitive, race-inspired theme is incorporated throughout the application, treating productivity as a friendly competition.
- Frontend: Next.js 13+ with App Router, React, TypeScript
- Backend: Supabase (PostgreSQL database with real-time capabilities)
- Styling: CSS Modules with custom styling (no Tailwind)
- Authentication: Supabase Auth
- Deployment: Vercel (frontend) and Supabase (backend)
- Added route for user profiles:
/user/[userId] - Added route for task details:
/task/[taskId] - Added route for friend profiles:
/friend/[friendId] - Added route for leaderboard categories:
/leaderboard/[leaderboardId]
- Updated dashboard with edtech-focused styling
- Added stat cards for quick metrics visualization
- Enhanced leaderboard visuals with improved ranking display
- Improved empty states with actionable prompts
- Added hover effects and transitions for a more interactive experience
- Added task creation functionality from multiple locations:
- Add tasks to your own list
- Assign tasks to friends directly from dashboard
- Create tasks from friend profile pages
- Updated task status management with visual indicators
- Enhanced task detail views with better organization of information
- Improved friend profile pages with task assignment capability
- Added direct task assignment from friend profiles
- Enhanced friend list display in dashboard
- Added loading states across the application
- Improved error handling and user feedback
- Enhanced mobile responsiveness
- Updated color scheme to be more vibrant and engaging
[Screenshots will be added here]
- Node.js 16+
- npm or yarn
- Clone the repository
git clone https://github.com/yourusername/task-app.git
cd task-app- Install dependencies
npm install
# or
yarn- Set up environment variables
Create a
.env.localfile and add your Supabase credentials:
NEXT_PUBLIC_SUPABASE_URL=your-supabase-url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your-supabase-anon-key
- Run the development server
npm run dev
# or
yarn dev- Open http://localhost:3000 in your browser
This project is licensed under the MIT License - see the LICENSE file for details.
The app now includes automatic email notifications when users are assigned tasks! Here's what you get:
- Beautiful HTML Emails: Modern, responsive email templates
- Automatic Sending: Emails are sent automatically when tasks are assigned
- Rich Content: Includes task details, due dates, and direct links to view tasks
- Reliable Delivery: Powered by Resend for high deliverability
- When you assign a task to a friend, they automatically receive an email
- The email includes all task details and a direct link to view the task
- No manual notifications needed - it's all automatic!
To enable email notifications:
- Sign up for a Resend account
- Follow the setup guide in
EDGE_FUNCTION_SETUP.md - Deploy the Supabase Edge Function
- Configure your environment variables
See EDGE_FUNCTION_SETUP.md for detailed setup instructions.