Scribd
Upload
4 views4 pages

React Js Web Assignment

The assignment involves creating an Employee Management Dashboard using React.js, which includes a login page, employee list, and a form for adding/editing employees. Key features include authentication, employee management actions, search and filter functionalities, and adherence to modern UI/UX principles. Deliverables consist of a GitHub repository, zipped source code, a README file, and a screen recording demonstrating the application's features.

Uploaded by

Nagdatt
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
4 views4 pages

React Js Web Assignment

The assignment involves creating an Employee Management Dashboard using React.js, which includes a login page, employee list, and a form for adding/editing employees. Key features include authentication, employee management actions, search and filter functionalities, and adherence to modern UI/UX principles. Deliverables consist of a GitHub repository, zipped source code, a README file, and a screen recording demonstrating the application's features.

Uploaded by

Nagdatt
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd

React.

js Assignment – Employee Management Dashboard

Assignment Overview
Step 1: Authentication
• Build a Login Page
• Basic authentication logic is sufficient (mock login is acceptable)
• After successful login, redirect the user to the Dashboard
• Prevent dashboard access without login

Step 2: Employee Management Dashboard


Dashboard Summary
• Display Total Number of Employees
• Optional: show Active vs Inactive count (bonus)

Employee List
Display a table/list with the following columns:
• Employee ID
• Profile Image
• Full Name
• Gender
• Date of Birth (DOB)
• State
• Active / Inactive Toggle
• Actions:
o Edit
o Delete
o Print
Employee Form
Create a form to Add / Edit Employee with:
• Full Name
• Gender
• Date of Birth
• Profile Image upload (image picker)
• State selection from Drop down
• Active / Inactive status
Notes:
• Image preview before save is expected
• Form validation is required
• Same form can be reused for Edit functionality

Actions & Features


• Add Employee
• Edit Employee
• Delete Employee (confirmation required)
• Print Employees list

Search & Filter


• Search employees by Name
• Filter by:
o Gender
o Active / Inactive status
• Filters should work together (combined filtering)
UI / UX Requirements
• Use Modern UI & UX principles
• Clean layout, proper spacing, and readable typography
• Pleasant color palette
• Loading states & empty states should be handled gracefully

Technical Requirements
• [Link] (Java Script/TypeScript)
• Proper component structure
• Clean and readable code
• Meaningful folder structure
• Reusable components
API:
• You may use:
o Mock data
o JSON Server
o Local storage
o Any mock API service

Deliverables
1. GitHub Repository Link
o Complete source code
o Proper commit history preferred
2. Zipped Source Code
o Include all necessary files to run the project
3. README File
Must include:
o Project overview
o Tech stack used
o Steps to run the project locally
o Any assumptions or design decisions
4. Screen Recording
o Show:
▪ Login flow
▪ Dashboard overview
▪ Add / Edit / Delete employee
▪ Image upload
▪ Search & Filter
▪ Print functionality

Time Expectation
• Recommended time: 3 days
• Focus on quality over quantity

You might also like