TaskLingo - Gamified Productivity App

TaskLingo is a gamified productivity application that transforms daily tasks into an engaging experience. Users earn XP, build streaks, unlock achievements, and compete with friends in productivity leagues.

Features

• Task Management: Create, track, and complete tasks with priority levels
• Gamification: Earn XP, level up, and unlock achievements
• Streak System: Build daily streaks for consistent productivity
• League Competition: Compete with others in weekly productivity leagues
• User Authentication: Secure login/signup with email verification
• Responsive Design: Works on all devices with a Duolingo-inspired UI

Tech Stack

• Frontend: Next.js, React, TypeScript, Tailwind CSS
• Backend: Next.js API Routes
• Database: MongoDB
• Authentication: JWT, bcrypt
• State Management: React Hooks
• Styling: Tailwind CSS, shadcn/ui components
• Animation: Framer Motion
• Testing: Jest, React Testing Library
• CI/CD: GitHub Actions

Getting Started

Prerequisites

• Node.js 18+
• npm or yarn
• MongoDB database

Installation

1. Clone the repository: ```bash git clone https://github.com/yourusername/tasklingo.git cd tasklingo ```

2. Install dependencies: ```bash npm install ```

3. Set up environment variables:

   • Copy .env.example to .env.local
   • Fill in your MongoDB URI and JWT secret

4. Run the development server: ```bash npm run dev ```

5. Open http://localhost:3000 in your browser.

Environment Variables

• MONGODB_URI: MongoDB connection string
• JWT_SECRET: Secret key for JWT token generation
• EMAIL_HOST: SMTP server for sending emails
• EMAIL_PORT: SMTP port
• EMAIL_USER: SMTP username
• EMAIL_PASS: SMTP password
• EMAIL_FROM: Sender email address

Project Structure

``` tasklingo/ ├── app/ # Next.js App Router │ ├── api/ # API routes │ ├── dashboard/ # Dashboard pages │ └── page.tsx # Landing page ├── components/ # React components ├── lib/ # Utility functions │ ├── auth.ts # Authentication utilities │ ├── mongodb.ts # Database connection │ └── logger.ts # Logging service ├── public/ # Static assets ├── tests/ # Test files ├── middleware.ts # Next.js middleware └── next.config.mjs # Next.js configuration ```

Deployment

The application is configured for deployment on Vercel:

1. Connect your GitHub repository to Vercel
2. Set up the required environment variables
3. Deploy with the Vercel CLI or GitHub integration

Testing

Run tests with:

```bash npm test ```

CI/CD Pipeline

The project uses GitHub Actions for CI/CD:

• Lint: Runs ESLint to check code quality
• Test: Runs Jest tests
• Build: Builds the Next.js application
• Deploy: Deploys to Vercel (production branch only)

Security Features

• Password hashing with bcrypt
• JWT authentication with HTTP-only cookies
• CSRF protection
• Rate limiting
• Input validation
• Account lockout after failed login attempts
• Secure HTTP headers

Monitoring

• Custom logging system
• Performance monitoring
• Health check endpoint
• Error tracking

License

This project is licensed under the MIT License - see the LICENSE file for details. ```

15. Jest Configuration