https://github.com/arunkumar201/user-profile-management
https://github.com/arunkumar201/user-profile-management
Last synced: about 1 year ago
JSON representation
- Host: GitHub
- URL: https://github.com/arunkumar201/user-profile-management
- Owner: arunkumar201
- Created: 2024-12-07T08:59:37.000Z (over 1 year ago)
- Default Branch: master
- Last Pushed: 2024-12-07T11:54:54.000Z (over 1 year ago)
- Last Synced: 2025-02-10T15:18:32.747Z (over 1 year ago)
- Language: TypeScript
- Homepage: https://user-profile-management-7vqf-arunkumar201s-projects.vercel.app
- Size: 94.7 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Profile Management Application
A React TypeScript application for managing user profiles with features like form validation, routing, and data persistence.
## Features
- Create and edit user profiles
- Form validation
- React Router for navigation
- Context API for state management
- JSON Server for API simulation
- Error handling with Error Boundaries
- Loading states and spinners
- Code splitting and lazy loading
- Performance optimizations with useCallback and memo
- Responsive design with Tailwind CSS
## Prerequisites
- Node.js (v18 or higher)
- pnpm
## Installation
1. install pnpm
```bash
npm install -g pnpm
```
2. Install dependencies:
```bash
pnpm install
```
## Running the Application
1. Start the JSON Server (API) & start the prod server:
```bash
pnpm run preview
```
The application will be available at `http://localhost:4173`
## Environment Variables
The application uses different environment variables for development and production use example `.env.example` file:
- `.env.development` - Development environment configuration
- `.env.production` - Production environment configuration
## Project Structure
- `/src`
- `/components` - React components
- `/context` - Context providers
- `/services` - API and service functions
- `/types` - TypeScript interfaces and types
- `/constants` - Constants
- `/utils` - Utility functions
- `/pages` - Page components
- `App.tsx` - Main application component
## Performance Optimizations
1. Code Splitting
- Lazy loading of routes
- Dynamic imports for components
2. React Optimizations
- useCallback for memoized functions
- memo for component memoization
- Context optimization
3. Error Handling
- Error boundaries for graceful error handling
- Toast notifications for user feedback
- Loading states for better UX
## Technologies Used
- React
- TypeScript
- React Router
- JSON Server
- Tailwind CSS
- React Hot Toast
- Lucide React (Icons)