A modern, comprehensive project management and development tracking application built with Next.js, designed specifically for developers and development teams.
- Multi-Provider Authentication: Google, GitHub, and email/password login
- Secure Session Management: JWT-based authentication with NextAuth.js
- Protected Routes: Dashboard and API routes secured with authentication middleware
- User Profile Management: Comprehensive profile system with real-time updates
- Full CRUD Operations: Create, read, update, and delete projects
- Project Status Tracking: Planning, Active, On-Hold, Completed statuses
- Priority Management: Low, Medium, High, Urgent priority levels
- Date Management: Start dates, end dates, and deadline tracking
- Progress Monitoring: Visual progress bars and completion tracking
- Advanced Task System: Create, assign, and track tasks across projects
- Status Workflow: Todo → In Progress → Review → Completed
- Task Completion: One-click toggle with optimistic updates
- Due Date Tracking: Set and monitor task deadlines
- Project Association: Link tasks to specific projects
- Real-Time Event Generation: Automatically creates events from project deadlines and task due dates
- Event Types: Project deadlines, task deadlines, project starts, overdue items
- Today's Schedule: Quick view of today's important items
- Upcoming Events: 7-day preview of approaching deadlines
- Visual Indicators: Color-coded event types with priority indicators
- Overview Page: Real-time statistics and recent activity
- Profile Management: Editable user profiles with live statistics
- Recent Activity: Track completed projects and tasks
- Performance Metrics: Success rates, time tracking, completion statistics
- Responsive Design: Works perfectly on desktop, tablet, and mobile
- Dark Mode Support: Beautiful light and dark themes
- Loading States: Smooth loading indicators and skeleton screens
- Optimistic Updates: Instant UI feedback for better user experience
- Toast Notifications: User-friendly success and error messages
- Real-Time Data: TanStack Query for efficient data fetching and caching
- Optimistic Updates: Immediate UI responses with server synchronization
- Error Handling: Comprehensive error boundaries and fallbacks
- Form Validation: Client-side and server-side validation
- Search & Filtering: Advanced filtering options for projects and tasks
- Framework: Next.js 15 with App Router
- Language: JavaScript (ES6+)
- Styling: TailwindCSS 4 with custom design system
- UI Components: shadcn/ui + Radix UI
- Icons: React Icons (Feather Icons)
- State Management: TanStack Query for server state
- Forms: HTML5 with custom validation
- API: Next.js API Routes (serverless functions)
- Database: MongoDB with MongoDB Atlas
- Authentication: NextAuth.js with MongoDB adapter
- Session Management: JWT tokens with secure HTTP-only cookies
- Development Server: Next.js with Turbopack
- Linting: ESLint with Next.js configuration
- Package Manager: npm
- Environment: Node.js 18+
- Node.js 18.0 or later
- npm 8.0 or later
- MongoDB database (local or MongoDB Atlas)
-
Clone the repository
git clone https://github.com/md-zeon/devtrack.git cd devtrack -
Install dependencies
npm install
-
Set up environment variables
Create a
.env.localfile in the root directory:# Database MONGODB_URI=your_mongodb_connection_string DB_NAME=devTrackDB # NextAuth Configuration NEXTAUTH_SECRET=your-super-secret-jwt-secret-key NEXTAUTH_URL=http://localhost:3000 # OAuth Providers (Optional) GOOGLE_CLIENT_ID=your_google_client_id GOOGLE_CLIENT_SECRET=your_google_client_secret GITHUB_ID=your_github_client_id GITHUB_SECRET=your_github_client_secret
-
Start the development server
npm run dev
-
Open your browser
Navigate to http://localhost:3000
npm run build
npm startdevtrack/
├── public/ # Static assets
├── src/
│ ├── app/ # Next.js App Router pages
│ │ ├── api/ # API routes
│ │ │ ├── auth/ # Authentication endpoints
│ │ │ ├── projects/ # Project CRUD operations
│ │ │ ├── tasks/ # Task CRUD operations
│ │ │ └── user/ # User profile endpoints
│ │ ├── dashboard/ # Protected dashboard pages
│ │ │ ├── projects/ # Project management
│ │ │ ├── tasks/ # Task management
│ │ │ ├── calendar/ # Calendar view
│ │ │ ├── analytics/ # Analytics (coming soon)
│ │ │ └── profile/ # User profile
│ │ ├── login/ # Authentication pages
│ │ ├── signup/
│ │ └── layout.js # Root layout with providers
│ ├── components/ # Reusable components
│ │ ├── ui/ # shadcn/ui components
│ │ ├── dashboard/ # Dashboard-specific components
│ │ └── modals/ # Modal components
│ ├── hooks/ # Custom React hooks
│ │ ├── useProjects.js # Project data management
│ │ ├── useTasks.js # Task data management
│ │ └── useProfile.js # User profile management
│ ├── lib/ # Utility libraries
│ │ ├── auth.js # NextAuth configuration
│ │ ├── utils.js # Utility functions
│ └── styles/ # Global styles
├── .env.local # Environment variables
├── components.json # shadcn/ui configuration
├── tailwind.config.js # TailwindCSS configuration
├── next.config.js # Next.js configuration
└── package.json # Dependencies and scripts
npm run dev # Start development server with Turbopack
npm run build # Build for production
npm run start # Start production server
npm run lint # Run ESLint- Visit the landing page and click "Sign In"
- Choose from Google, GitHub, or email/password authentication
- Access the protected dashboard upon successful login
- Create new projects with detailed information
- Set priorities, deadlines, and track progress
- Edit projects using intuitive modal interfaces
- Filter and search through your projects
- Create tasks and assign them to projects
- Track task progress through different status stages
- Toggle task completion with instant feedback
- Filter tasks by status and visibility preferences
- View all project deadlines and task due dates
- See today's schedule at a glance
- Track upcoming events for the next week
- Visual indicators for different event types
- Edit personal information and social links
- View real-time statistics and achievements
- Track recent activity and performance metrics
The Analytics page is currently under development and will include:
- 📊 Interactive Charts: Visual representation of productivity data
- ⏱️ Time Tracking: Detailed time analysis and breakdowns
- 🎯 Goal Setting: Set and monitor productivity goals
- 📈 Productivity Insights: Advanced analytics and recommendations
- 📅 Reports: Weekly and monthly performance reports
- 🔍 Custom Filters: Filter analytics by date ranges and projects
- 📄 Export Functionality: Download reports in various formats
We welcome contributions! Please follow these steps:
- Fork the repository
- Create a feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
This project is licensed under the MIT License - see the LICENSE file for details.
- Next.js - The React framework for production
- TailwindCSS - Utility-first CSS framework
- shadcn/ui - Beautiful and accessible UI components
- NextAuth.js - Complete authentication solution
- TanStack Query - Powerful data synchronization
- MongoDB - Modern database for modern applications
If you have any questions or need help, please:
- Check the Issues page
- Create a new issue with detailed information
- Join our community discussions
Made with ❤️ for developers, by developers
DevTrack - Streamline your development workflow and boost productivity