{"id":29013272,"url":"https://github.com/nurislam243/techtinker-client-side","last_synced_at":"2026-04-02T02:50:11.816Z","repository":{"id":301122783,"uuid":"1008158708","full_name":"nurislam243/TechTinker-client-side","owner":"nurislam243","description":"TechTinker is a responsive service-sharing app for tech device repairs. Users can add, book, and manage services securely with Firebase Auth, JWT, and MongoDB. Built with React, Tailwind CSS, and Express.","archived":false,"fork":false,"pushed_at":"2025-06-25T08:13:16.000Z","size":3473,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-06-25T09:26:10.405Z","etag":null,"topics":["cors","expressjs","firebase-auth","jwt","mongodb","nodejs","react-router","reactjs","tailwindcss"],"latest_commit_sha":null,"homepage":"https://techtinker2.web.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/nurislam243.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-06-25T05:56:20.000Z","updated_at":"2025-06-25T08:13:19.000Z","dependencies_parsed_at":"2025-06-25T09:36:57.321Z","dependency_job_id":null,"html_url":"https://github.com/nurislam243/TechTinker-client-side","commit_stats":null,"previous_names":["nurislam243/techtinker-client-side"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/nurislam243/TechTinker-client-side","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nurislam243%2FTechTinker-client-side","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nurislam243%2FTechTinker-client-side/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nurislam243%2FTechTinker-client-side/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nurislam243%2FTechTinker-client-side/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nurislam243","download_url":"https://codeload.github.com/nurislam243/TechTinker-client-side/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nurislam243%2FTechTinker-client-side/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":261937078,"owners_count":23232852,"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":["cors","expressjs","firebase-auth","jwt","mongodb","nodejs","react-router","reactjs","tailwindcss"],"created_at":"2025-06-25T19:10:38.193Z","updated_at":"2026-04-02T02:50:11.802Z","avatar_url":"https://github.com/nurislam243.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 💻 TechTinker - Tech Device Service Sharing Platform\n\n**TechTinker** is a full-featured, responsive service-sharing web application where users can offer and book various tech device-related services. The platform focuses on smooth user experience, secure authentication, and seamless service interactions with modern UI/UX design.\n\n---\n## Home Page-\n![TechTinker Home Page](src/assets/Screenshot%20(117).png)\n\n## 🌐 Live Website\n\n🔗 **Live Site Link**: [https://techtinker2.web.app/](https://techtinker2.web.app/)\n\n🔗 **Server Repository**: [https://github.com/nurislam243/TechTinker-server-side](https://github.com/nurislam243/TechTinker-server-side)\n\n---\n\n## 📌 Selected Category\n\n\u003e **Electronic Item Repairing Services**\n\n---\n\n## 🚀 Core Features\n\n- 🔐 **Authentication**: Secure login \u0026 registration using **Firebase Authentication** with Email/Password and Google Sign-In.\n- ➕ **Add / Manage Services**: Users can add, update, and delete services they provide.\n- 📦 **Service Booking**: Any logged-in user can book available services with details.\n- 🧾 **Status Update**: Service providers can update status (Pending → Working → Completed).\n- 🧑‍🤝‍🧑 **Dashboard Menu**: Users get a personalized dashboard with 4 private routes.\n- 🔍 **Search Feature**: Easily search services by name on the All Services page.\n- 🌓 **Dark/Light Theme Toggle**: System-wide theme customization with one-click toggle.\n- 🎯 **Protected Routes**: JWT-based route protection for sensitive pages.\n- 💬 **SweetAlert2**: Stylish alerts for all actions (no default alert).\n- 📱 **Fully Responsive**: Optimized for Mobile, Tablet, and Desktop devices.\n- 🧠 **Persistent Login**: Users remain logged in even after page reload (JWT verified).\n- 🧢 **Dynamic Titles**: Page title updates automatically based on route using `react-helmet-async`.\n- 🚫 **404 Page**: Custom error page for invalid routes with a \"Go Home\" button.\n\n---\n\n## 🆕 Extra Features\n\n- 🔽 **Shrinkable Navbar with Top Bar**: \n  - Topbar hides and navbar height shrinks on scroll for modern UI.\n- ⭐ **Service Review \u0026 Rating System**:\n  - Users can leave reviews and star ratings on service detail page.\n  - Other users can also view these reviews and ratings.\n- 🧲 **Sticky Scroll Effects**: \n  - Scroll-based visual enhancements for smooth user experience.\n\n---\n\n---\n\n## 🚦 React Router Routes Overview\n\nThe application uses `react-router-dom` for client-side routing with nested routes and loader support.\n\n### 🌍 Main Layout Routes\n\n| Route Path             | Component              | Access          | Description                                               |\n|------------------------|------------------------|------------------|-----------------------------------------------------------|\n| `/`                    | `Home`                 | Public           | Landing page                                              |\n| `/services`            | `AllServices`          | Public           | Displays all available services (with loader)             |\n| `/services/:id`        | `ServiceDetails`       | 🔒 Private       | Detailed view of a single service, with reviews/ratings   |\n| `/add-service`         | `AddService`           | 🔒 Private       | Authenticated users can add a new service                 |\n| `/manage-service`      | `ManageService`        | 🔒 Private       | Manage added services (update/delete)                     |\n| `/book-service/:id`    | `BookService`          | 🔒 Private       | Book a service through pre-filled form                   |\n| `/my-bookings`         | `Booked`               | 🔒 Private       | List of services booked by the user                       |\n| `/service-to-do`       | `ServiceToDo`          | 🔒 Private       | Service provider's to-do list                             |\n| `/register`            | `Register`             | Public           | Registration page                                         |\n| `/login`               | `Login`                | Public           | Login with email/password or Google                       |\n| `*` (invalid routes)   | `ErrorPage`            | Public           | Custom 404 page                                           |\n\n- 🛡️ `PrivateRoute` is used to protect all routes that require authentication.\n- 📦 Loaders are used in `/services` and `/services/:id` to fetch data from the backend.\n- 🔄 `HydrateFallback: Spinner` is used to show a loader while route data is being fetched.\n\n---\n\n\n## 🛠️ Technologies Used\n\n### 🔧 Frontend\n\n- **React.js**\n- **Tailwind CSS**\n- **DaisyUI**\n- **React Router DOM**\n- **Axios**\n- **Firebase Authentication**\n- **React Firebase Hooks**\n- **React Tooltip**\n- **React Helmet Async**\n- **React Rating**\n- **Framer Motion**\n- **React Awesome Reveal**\n- **React Lottie**\n- **Date-fns**\n- **SweetAlert2**\n\n### 🌐 Backend\n\n- **Node.js**\n- **Express.js**\n- **MongoDB**\n- **JWT (jsonwebtoken)**\n- **dotenv**\n- **CORS**\n\n\n## ⚙️ Installation \u0026 How to Run Locally\n\n### 🔧 Prerequisites\n- Node.js (v16 or above) installed  \n- npm (comes with Node.js) or yarn installed  \n- Git installed  \n- MongoDB installed locally or have access to a MongoDB cloud instance  \n- Firebase project setup (for authentication)  \n\n---\n\n### 📥 Clone the Repositories\n\n```bash\n# Clone Client Repository\ngit clone https://github.com/your-username/techtinker-client.git\ncd techtinker-client\n\n# Install Client Dependencies\nnpm install\n\n# Create .env file in TechTinker-client with the following:\n# (replace with your actual Firebase credentials)\nVITE_apiKey=your_api_key\nVITE_authDomain=your_auth_domain\nVITE_projectId=your_project_id\nVITE_storageBucket=your_storage_bucket\nVITE_messagingSenderId=your_sender_id\nVITE_appId=your_app_id\n\n# Start Client\nnpm run dev\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnurislam243%2Ftechtinker-client-side","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnurislam243%2Ftechtinker-client-side","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnurislam243%2Ftechtinker-client-side/lists"}