{"id":29129046,"url":"https://github.com/mohitjaiswal28/performance-react","last_synced_at":"2025-06-30T02:37:56.937Z","repository":{"id":296559592,"uuid":"986468237","full_name":"mohitjaiswal28/Performance-React","owner":"mohitjaiswal28","description":"This project demonstrates best practices like useMemo, useCallback, React.memo, and clean folder structure.","archived":false,"fork":false,"pushed_at":"2025-05-31T14:44:08.000Z","size":40,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-06-01T02:48:37.319Z","etag":null,"topics":["react","react-performance","typescript"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/mohitjaiswal28.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-05-19T16:49:23.000Z","updated_at":"2025-05-31T14:44:12.000Z","dependencies_parsed_at":"2025-06-01T03:11:41.685Z","dependency_job_id":"0b3c70a6-9c07-4ef7-8a12-c5f84d92c810","html_url":"https://github.com/mohitjaiswal28/Performance-React","commit_stats":null,"previous_names":["mohitjaiswal28/performance-react"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/mohitjaiswal28/Performance-React","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mohitjaiswal28%2FPerformance-React","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mohitjaiswal28%2FPerformance-React/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mohitjaiswal28%2FPerformance-React/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mohitjaiswal28%2FPerformance-React/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mohitjaiswal28","download_url":"https://codeload.github.com/mohitjaiswal28/Performance-React/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mohitjaiswal28%2FPerformance-React/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":262700270,"owners_count":23350445,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["react","react-performance","typescript"],"created_at":"2025-06-30T02:37:55.073Z","updated_at":"2025-06-30T02:37:56.929Z","avatar_url":"https://github.com/mohitjaiswal28.png","language":"TypeScript","readme":"# Performance-React 🔥\n\nThis demonstrates **authentication and protected routing** in a modern React application using `Context API`, `useReducer`, and `React Router`. It also introduces a custom `useLocalStorage` hook to persist user login across page reloads.\n\n---\n\n## 🔐 Authentication Flow\n\n### 1. **Login**\n\n- User credentials are mocked for simplicity.\n- On login, user data is saved to:\n  - `React Context` (for app-wide access)\n  - `localStorage` (for persistence on refresh)\n\n### 2. **Profile (Protected Route)**\n\n- Only accessible when a user is authenticated.\n- Redirects to `/login` if user is not logged in.\n\n---\n\n## 💡 Key Concepts Covered\n\n| Feature           | Description                                           |\n| ----------------- | ----------------------------------------------------- |\n| `Context API`     | Central store for user \u0026 auth state                   |\n| `useReducer`      | Used for scalable auth state management               |\n| `localStorage`    | Data persists even after refresh                      |\n| `useLocalStorage` | Custom reusable hook for local storage get/set/remove |\n| `React Router`    | Dynamic routing with protected routes                 |\n\n---\n\n## 🗂️ File Structure\n\n```\nsrc/\n│\n├── components/\n│   ├── Login.tsx\n│   └── Profile.tsx\n│\n├── context/\n│   └── AuthContext/\n│       ├── AuthContext.tsx\n│       ├── AuthContextType.ts\n│       └── authReducer.ts\n│\n├── hooks/\n│   ├── useAuth.ts       ← Custom hook to access AuthContext\n│   └── useLocalStorage.ts ← Custom hook to resue localStorage logic\n│\n├── routes/\n│   ├── constant.ts\n│   ├── publicRoutes.ts\n│   └── privateRoutes.ts\n│\n├── styles/\n│   ├── Login.ts\n│   └── Profile.ts\n│\n├── types/\n│   └── User.ts\n│\n└── App.tsx\n```\n\n---\n\n## 💡 Topics Covered\n\n- react\n- react-router\n- auth-context\n- role-based-access\n- localstorage\n- context-api\n- use-reducer\n- protected-routes\n- react-hooks\n\n---\n\nThis project helps you understand React application with **global state**, and **protected routes**.\n\n---\n\n\u003e Feel free to fork and ⭐️ this repo if it helps!\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmohitjaiswal28%2Fperformance-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmohitjaiswal28%2Fperformance-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmohitjaiswal28%2Fperformance-react/lists"}