A React-based educational dashboard built during a company internship.
This project demonstrates practical implementation of React concepts, state management, API integration, and Material-UI components for managing countries and departments.
Goal: Help future interns explore, learn, and practice real-world React development patterns.
The Internship Dashboard Project is a learning-oriented React application developed during an internship program.
It provides a comprehensive example of how to build modular, maintainable React applications that interact with APIs and manage complex state.
The system allows users to manage Countries and Departments with CRUD operations, including:
- Pagination, search, and filtering.
- Form handling with validation.
- Tree view hierarchy for departments.
- State management using MobX.
This project is intended as a reference and practice guide for future interns preparing to work with enterprise-level React projects.
| Category | Technologies / Tools |
|---|---|
| Frontend | React.js (SPA) |
| UI Library | Material-UI (Tables, Forms, TreeView) |
| Forms | Formik + Yup (Validation) |
| State Management | MobX (Stores, Observables, Computed) |
| Routing | React Router DOM |
| API Client | Axios (GET / POST / PUT / DELETE) |
| Data Source | JSON Mock Files (e.g., CountryData.json) |
| Other | React Hooks (useState, useEffect), Props, Class & Function Components |
- SPA Setup using React with routes for Home, Countries, and Departments.
- Demonstrates Class vs. Function Components and lifecycle methods (
componentDidMount,componentDidUpdate). - Uses mock data (
CountryData.json) for initial CRUD simulation.
- Implements React Router DOM for page navigation.
- Uses React Hooks (
useState,useEffect) for UI updates and API data fetching. - Handles search and filter logic within stateful components.
- Dynamic Props Passing to forms and components.
- Formik for building forms (Countries, Departments).
- Yup for validation schemas (required fields, format checking).
- Ability to set field values dynamically from API responses.
- Simulated API endpoints for
/countriesand/departments. - CRUD methods implemented using Axios and async/await syntax.
- Promise-based error handling and user feedback.
- Clean and responsive UI built with Material-UI.
- Tables for country lists with Edit/Delete actions.
- Dialog/Modal Popups for create/edit forms.
- Service Layer (
CountryService.js) for centralized API calls.
- Complete CRUD for both Countries and Departments.
- Pagination, search, and hierarchical tree view for departments.
- Supports sorting, filtering, and multi-level data manipulation.
- Centralized state management with MobX stores.
@observablecountry and department lists.- Actions for API synchronization and computed values for derived states.
- Extensible design for future entities (e.g., Ethnics, Religions).
- Deep hierarchy management in Department CRUD.
- TreeView rendering with expandable nodes using Material-UI.
- Real-time UI reactivity powered by MobX observables.
- Reusable components for inputs, dropdowns, and date pickers.
- Custom TimeSheet component for tracking and data entry.
- Support for multi-select dropdowns and formatted date pickers.
- Pagination with server-side page size handling.
- Search with keyword filtering.
- Excel Import/Export for bulk operations.
- TreeView with nested expansion for complex data structures.