{"id":30013763,"url":"https://github.com/ammoor/dev-tools-hub","last_synced_at":"2026-04-05T23:02:17.045Z","repository":{"id":307546195,"uuid":"1028403550","full_name":"Ammoor/Dev-Tools-Hub","owner":"Ammoor","description":null,"archived":false,"fork":false,"pushed_at":"2025-07-31T19:52:28.000Z","size":936,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-07-31T21:59:37.976Z","etag":null,"topics":["css","html","javascript","jsx","react","react-router","vercel"],"latest_commit_sha":null,"homepage":"https://dev-tools-hub-blush.vercel.app","language":"JavaScript","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/Ammoor.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-07-29T13:32:00.000Z","updated_at":"2025-07-31T19:53:18.000Z","dependencies_parsed_at":"2025-07-31T22:17:19.133Z","dependency_job_id":null,"html_url":"https://github.com/Ammoor/Dev-Tools-Hub","commit_stats":null,"previous_names":["ammoor/iti-gp"],"tags_count":null,"template":false,"template_full_name":null,"purl":"pkg:github/Ammoor/Dev-Tools-Hub","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Ammoor%2FDev-Tools-Hub","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Ammoor%2FDev-Tools-Hub/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Ammoor%2FDev-Tools-Hub/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Ammoor%2FDev-Tools-Hub/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Ammoor","download_url":"https://codeload.github.com/Ammoor/Dev-Tools-Hub/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Ammoor%2FDev-Tools-Hub/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31452901,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-05T21:22:52.476Z","status":"ssl_error","status_checked_at":"2026-04-05T21:22:51.943Z","response_time":75,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":["css","html","javascript","jsx","react","react-router","vercel"],"created_at":"2025-08-05T17:00:35.836Z","updated_at":"2026-04-05T23:02:17.025Z","avatar_url":"https://github.com/Ammoor.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n  \u003cimg src=\"./public/assets/images/1e2eddf7-a062-4d6f-8070-febae002c361.png\" alt=\"Home Page\" style=\"border-radius:10px; max-width:300px;\" /\u003e\n\u003c/div\u003e\n\n## 1. Introduction\n\n**Dev Tools Hub** is a React-based web application (built with Vite and Bootstrap 5) that provides developers with a set of handy utilities. It demonstrates modern React practices—routing, hooks, context, custom hooks, lazy loading—and it's fully responsive with beautiful styling and interactions.\n\n---\n\n## 2. Used Technologies\n\n- **Front-End**:\n\n  - React (functional components + hooks)\n  - React Router DOM\n  - Bootstrap 5\n  - Font Awesome icons\n\n- **Build Tool**:\n  - Vite (fast development experience)\n\n---\n\n## 3. Prerequisites\n\nEnsure you have installed:\n\n- Node.js v16+ and npm\n- Git (optional, for cloning)\n- Web browser (Chrome/Firefox/etc.)\n\n---\n\n## 4. Installation \u0026 Environment Setup\n\n1. **Clone the repository**\n\n   ```bash\n   git clone \u003crepo-url\u003e\n   cd Dev-Tools-Hub\n   ```\n\n2. **Install dependencies**\n\n   ```bash\n   npm install\n   ```\n\n3. **Run development server**\n\n   ```bash\n   npm run dev\n   ```\n\n4. Open [http://localhost:5173](http://localhost:5173) to view the app.\n\n---\n\n## 5. Project Structure\n\n```\nDevToolsHub/\n├── public/\n│   ├── assets/\n│   │   ├── fontawesome/\n│   │   │   ├── css/all.min.css\n│   │   │   └── webfonts/\n│   └── thumbnail.png\n│\n├── src/\n│   ├── components/\n│   │   ├── Header.jsx\n│   │   ├── Footer.jsx\n│   ├── pages/\n│   │   ├── Home.jsx\n│   │   ├── JsonFormatter.jsx\n│   │   ├── Base64Tool.jsx\n│   │   ├── ColorPicker.jsx\n│   │   └── NotFound.jsx\n│   ├── styles/\n│   │   └── Home.css\n│   │   └── ColorPicker.css\n│   ├── hooks/\n│   │   └── useLocalStorage.js\n│   ├── utils/\n│   │   └── colorUtils.js\n│   ├── App.jsx\n│   └── main.jsx\n│\n├── package.json\n├── vite.config.js\n└── README.md\n```\n\n---\n\n## 6. Configuration\n\n### Inside `package.json`:\n\n```json\n{\n  \"name\": \"dev-tools-hub\",\n  \"version\": \"1.0.0\",\n  \"scripts\": {\n    \"dev\": \"vite\",\n    \"build\": \"vite build\",\n    \"preview\": \"vite preview\"\n  },\n  \"dependencies\": {\n    \"react\": \"^18.2.0\",\n    \"react-dom\": \"^18.2.0\",\n    \"react-router-dom\": \"^6.x\",\n    \"bootstrap\": \"^5.x\",\n    \"@fortawesome/fontawesome-free\": \"^6.x\"\n  },\n  \"devDependencies\": {\n    \"@vitejs/plugin-react\": \"^4.x\",\n    \"vite\": \"^5.x\"\n  }\n}\n```\n\n### In `main.jsx`:\n\n```js\nimport \"bootstrap/dist/css/bootstrap.min.css\";\nimport \"@fortawesome/fontawesome-free/css/all.min.css\";\n```\n\n---\n\n## 7. Features \u0026 Functionality\n\n### Homepage (`/`)\n\n- Animated hero section with call-to-action\n- Grid of featured tools (cards with icons and links)\n- Smooth hover animations and highlight effects\n\n### Tools Implemented\n\n- **JSON Formatter**: Validate and pretty-print JSON\n- **Base64 Tool**: Encode/decode text with copy-to-clipboard\n- **Color Palette Generator**: Generate random colors; click to copy; export CSS variables\n\n### Not Found Page (`*`)\n\n- Renders a custom \"404 – Page Not Found\" for invalid routes\n\n---\n\n## 8. React Concepts in Use\n\n- `useState` \u0026 `useEffect`\n- React Router for routing\n- Nested route structure for scalability\n- Component reusability (Header, Footer, Tool cards)\n- Custom hooks (`useLocalStorage`) for persisting\n- Utility functions (`colorUtils.js`) for color transformations\n\n---\n\n## 9. Styles, Animations \u0026 UX\n\n- Responsive layout via Bootstrap grid\n- Hover and transition effects on cards \u0026 buttons\n- Hero section background gradient and fade animations\n- Copy indicators (e.g. \"Copied!\" badge on color swatches)\n\n---\n\n## Accessibility \u0026 Performance\n\n- Keyboard focus states and aria labels where needed\n- Light-weight—only required dependencies\n- Lazy loading hooks or tool pages (if added later)\n\n---\n\n## How to Extend\n\n- Add additional tools (e.g., QR Code generator, Regex tester)\n- Enhance UI with modals or AOS scroll animation\n- Add theme toggle (dark/light mode)\n- Add favorites or history state via context\n\n---\n\n## Credits \u0026 Licensing\n\nDev Tools Hub is built by Omar Ayman as ITI summer training React course, 2025.\nFeel free to reuse the code for your own learning or projects — a star ⭐ on GitHub is appreciated!\n\n---\n\n## Let's get coding\n\nReady to explore tools that every developer needs?\nStart your dev server with `npm run dev` and pick a tool to get started!\n\n---\n\nHappy coding!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fammoor%2Fdev-tools-hub","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fammoor%2Fdev-tools-hub","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fammoor%2Fdev-tools-hub/lists"}