A comprehensive React TypeScript application featuring secure authentication and user management dashboard using DummyJSON APIs.
- Secure Login: JWT-based authentication with access and refresh tokens
- Auto Token Refresh: Automatic token renewal before expiration
- Protected Routes: Route-based access control for authenticated users
- Session Management: Persistent login state with localStorage
- User Profile Validation: Real-time user profile verification
- User Management: Browse and view detailed user information
- Paginated Data: Efficient data loading with customizable page sizes
- Interactive UI: Modern Material-UI components with responsive design
- JSON Viewer: Detailed user data visualization
- Search & Filter: Advanced user data filtering capabilities
- Frontend: React 19, TypeScript, Material-UI
- Routing: React Router DOM with protected routes
- Forms: React Hook Form with Yup validation
- State Management: Context API for authentication state
- API Integration: DummyJSON REST APIs
- Styling: Material-UI with custom responsive design
- Node.js (v16 or higher)
- npm or yarn package manager
-
Clone the repository
git clone <repository-url> cd project-1
-
Install dependencies
npm install
-
Environment Setup The project uses a
.envfile with the following configuration:REACT_APP_API_URL=https://dummyjson.com -
Start the development server
npm start
Open http://localhost:3000 to view the application.
Use any of the DummyJSON test accounts:
- Username:
emilys| Password:emilyspass - Username:
michaelw| Password:michaelwpass - Username:
sophiab| Password:sophiabpass
- Login (
/auth/login) - Authenticate with username/password - Token Validation (
/auth/me) - Verify token and get user profile - Token Refresh (
/auth/refresh) - Renew access token automatically
/- Redirects to login page/login- User authentication page/dashboard- Protected main dashboard (requires authentication)
src/
├── components/
│ ├── Login.tsx # Authentication component
│ ├── MainComponent.tsx # Main dashboard component
│ └── PrivateRoute.tsx # Route protection wrapper
├── contexts/
│ └── AuthContext.tsx # Authentication state management
├── services/
│ └── authService.ts # API service layer
├── types/
│ └── user.types.ts # TypeScript type definitions
└── App.tsx # Main application component
npm start- Run development servernpm test- Launch test runnernpm run build- Build for productionnpm run eject- Eject from Create React App (⚠️ irreversible)
- @mui/material - Material-UI components
- react-router-dom - Client-side routing
- react-hook-form - Form handling and validation
- yup - Schema validation
- @textea/json-viewer - JSON data visualization
- JWT Token Management: Secure token storage and automatic refresh
- Route Protection: Authenticated route access control
- Session Timeout: Automatic logout on token expiration
- Error Handling: Comprehensive error management and user feedback
- Responsive Design: Mobile-first responsive layout
- Loading States: User-friendly loading indicators
- Error Messages: Clear error feedback and validation
- Modern Interface: Clean Material-UI design system
The application integrates with DummyJSON APIs:
- Users API:
/users- Fetch user data with pagination - Auth APIs:
/auth/login,/auth/me,/auth/refresh
Build the application for production:
npm run buildThe build folder contains optimized static files ready for deployment to any static hosting service.