Wooble

TechShrine InfoSolutions

Build a Modern Employee Management Dashboard

Design and build a production-ready frontend that helps HR teams manage employees efficiently.

Build a Modern Employee Management Dashboard cover
Evaluationclosed

Build a responsive Employee Management Dashboard using React/Next.js. Focus on creating a clean user experience, reusable components, responsive layouts, and maintainable code. The application should demonstrate your ability to build modern production-quality frontend applications.

What you get

Rewards and recognition for participating in this challenge.

3000

🥇 1st Place — ₹3000 🥈 2nd Place — ₹1500 🥉 3rd Place — ₹1000 Top submissions may also be considered for interview opportunities at TechnoShrine InfoSolutions.

Expert review

Your work is reviewed by experienced practitioners.

Participation certificate

Get a verifiable certificate the moment you submit your work.

Overview

At TechnoShrine InfoSolutions, we build products that are used by real businesses every day. We're looking for frontend engineers who can transform requirements into intuitive, responsive, and scalable user interfaces. In this challenge, you'll build an Employee Management Dashboard that allows HR teams to manage employee information. We are not looking for pixel-perfect designs—we're looking for thoughtful product decisions, clean architecture, reusable components, and excellent user experience. A strong submission should demonstrate: Responsive design Clean component architecture Good state management Proper API integration (or mocked data) Loading and error states Accessibility Clean code Production-ready UI

Problem statement

Create a responsive Employee Management Dashboard with the following features. Dashboard Display Total Employees Active Employees Departments New Joiners Include cards with simple statistics. Employee List Show employees in a table with: Profile Picture Name Email Department Designation Status Joining Date Search & Filters Users should be able to: Search employees by name Filter by department Filter by status Sort by joining date Employee Details Clicking an employee should open a details page or modal showing: Personal information Contact information Department Skills Employment status Add Employee Create a form with validation. Fields: Name Email Phone Department Designation Date of Joining Profile Image (optional) Edit Employee Allow updating employee information. Delete Employee Allow deleting an employee with a confirmation dialog. Responsive Design The application should work smoothly on: Mobile Tablet Desktop Optional Bonus Features Dark Mode Pagination Drag & Drop table columns Charts using Chart.js or Recharts Authentication UI Optimistic updates Animations Infinite scrolling Technical Requirements Candidates may use: React Next.js TypeScript Tailwind CSS Material UI Chakra UI Redux Toolkit / Zustand / Context API API options: DummyJSON JSON Server Mock API Fake REST API

Deliverables

  • GitHub Repository
  • Live Deployment (Vercel/Netlify)
  • README with setup instructions
  • Responsive Dashboard
  • Employee CRUD
  • Search and Filters
  • Short Loom walkthrough (3–5 minutes)

Evaluation criteria

  • Problem solving
  • UI/UX quality
  • Component reusability
  • Code quality
  • Responsiveness
  • State management
  • Accessibility
  • Performance optimization
  • Folder structure
  • Git commit quality