Technologies Used

Frontend

• ReactJS with TypeScript
• Tailwind CSS
• Shadcn-UI

Backend

• .NET Core
• SQL Server
• ADO.net libraries
• SQL stored procedures

Features

• CRUD Operations: Create, Read, Update, and Delete departments and employees.
• Data Validation: Ensures accurate and consistent data entry.
• Error Handling: Provides informative feedback to users during errors.
• Automatic Age Calculation: Calculates employee age based on date of birth.
• React Routing: Handles navigation between different application sections.
• Clean and Accessible UI: Tailwind CSS and Shadcn UI facilitate user-friendly interfaces.
• Modular and Reusable Code: React components and TypeScript improve code maintainability.

System Design

The system employs a client-server architecture:

• ReactJS handles the user interface and interacts with the backend via API calls.
• .NET Core API endpoints respond to requests, communicate with the SQL Server database, and return data or error messages.
• SQL Server stores department and employee data, utilizing stored procedures for complex data operations.

User Interface

The UI offers an intuitive interface for managing departments and employees:

• Separate sections for department and employee management.
• Forms for adding, editing, and deleting data.
• Tables displaying department and employee lists.
• Clear error messages for invalid data input.

Code Reusability and Maintainability

• React components enable code reuse and modularity.
• TypeScript enforces type safety and clarifies code structure.
• Clear code comments improve understanding and future maintenance.

ScreenShots