An innovative application designed to empower employees to log and track their daily tasks, ensuring transparency, fairness, and enhanced productivity. This platform provides actionable insights for both employees and employers through advanced analytics, AI-powered tools, and user-friendly dashboards.
- Overview
- Key Features
- Technologies Used
- Installation
- Usage
- Dependencies
- Contribution Note
- Submission Guidelines
The Employee Productivity Tracker helps employees log tasks, track their productivity, and receive feedback. Employers benefit from insightful analytics, enabling better management and recognition of employee efforts. The app fosters a fair and transparent work environment while improving efficiency across the organization.
- Log daily tasks with details (title, description, time spent, priority, references).
- Categorize tasks into BAU, Ad Hoc, or Project-Based.
- Attach supporting documents for context.
- View productivity insights with graphs, tables, and reports.
- Compare team performance and identify trends.
- Efficiency scoring based on task completion.
- Predict performance trends and highlight burnout risks.
- Sentiment analysis to assess employee satisfaction.
- Leaderboards to encourage healthy competition.
- Team challenges with rewards and badges.
- Distinct views for employers and employees with tailored analytics.
- Frontend: Next.js, React
- Styling: TailwindCSS, Radix UI
- State Management: React Context API, React Hook Form
- Data Visualization: Recharts
- AI-Powered Analytics: Integration of custom algorithms (details in the application).
- Other Tools: Date-fns for date manipulation, Zod for schema validation.
Follow the steps below to set up the project locally:
-
Clone the Repository
git clone https://github.com/yourusername/employee-productivity-tracker.git cd employee-productivity-tracker -
Install Dependencies
npm install
-
Run the Development Server
npm run dev
-
Build for Production
npm run build
-
Start the Production Server
npm start
- Open your browser and navigate to
http://localhost:3000to access the app. - Employee View:
- Log daily tasks, track timelines, and view personalized feedback.
- Employer View:
- Access productivity dashboards, generate reports, and identify team trends.
Below are the key dependencies and their purposes:
- Next.js (15.1.5): Server-rendered React framework for building web apps.
- React (18.3.1): UI library for building components.
- ShadCn UI: Accessible React components for styling UI elements.
- TailwindCSS: Utility-first CSS framework for styling.
- Zod (3.24.1): Forms validation for form inputs and data validation.
- React Hook Form (7.54.2): Simplified form handling.
- Recharts (2.15.0): Data visualization through charts.
- Date-fns (3.6.0): Date and time utilities for task management.
- TypeScript (5): Static typing for JavaScript.
- ESLint: Linting tool to ensure code quality.
- TailwindCSS Animate: Provides animation utilities.
For the complete list, refer to the package.json file.
This project was one of my earliest experiences during my training at Masai School. At that time, I was still learning core JavaScript concepts, while the team lead was exploring advanced technologies like Next.js, schema validation, and component architecture.
- Working closely with the lead developer to understand the structure of a real-world Next.js project
- Assisting in organizing and maintaining the documentation and README
- Learning how schema validation, routing, and frontend frameworks operate in large applications
- Supporting the planning and conceptual workflow of task logging and productivity features
This project played an important role in helping me understand how fullstack applications are architected, even before I was fully hands-on with advanced technologies.