{"id":28999651,"url":"https://github.com/tanmoydhar1077/hobbyhub-client","last_synced_at":"2026-04-27T18:05:32.349Z","repository":{"id":299895492,"uuid":"994621144","full_name":"TanmoyDhar1077/Hobbyhub-Client","owner":"TanmoyDhar1077","description":null,"archived":false,"fork":false,"pushed_at":"2025-06-18T20:54:23.000Z","size":1332,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-06-18T21:37:12.522Z","etag":null,"topics":["crud-operation","javascript","reactjs","tawilwindcss"],"latest_commit_sha":null,"homepage":"","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/TanmoyDhar1077.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-02T08:15:10.000Z","updated_at":"2025-06-18T20:54:27.000Z","dependencies_parsed_at":"2025-06-18T21:47:27.657Z","dependency_job_id":null,"html_url":"https://github.com/TanmoyDhar1077/Hobbyhub-Client","commit_stats":null,"previous_names":["tanmoydhar1077/hobbyhub-client"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/TanmoyDhar1077/Hobbyhub-Client","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TanmoyDhar1077%2FHobbyhub-Client","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TanmoyDhar1077%2FHobbyhub-Client/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TanmoyDhar1077%2FHobbyhub-Client/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TanmoyDhar1077%2FHobbyhub-Client/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/TanmoyDhar1077","download_url":"https://codeload.github.com/TanmoyDhar1077/Hobbyhub-Client/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TanmoyDhar1077%2FHobbyhub-Client/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":261832679,"owners_count":23216497,"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":["crud-operation","javascript","reactjs","tawilwindcss"],"created_at":"2025-06-25T08:07:49.370Z","updated_at":"2026-04-27T18:05:32.343Z","avatar_url":"https://github.com/TanmoyDhar1077.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# HobbyHub - A Local Hobby Group Organizer\n\n🌐 **Live Site**: [https://hobbyhub-tanmoy.netlify.app/](https://hobbyhub-tanmoy.netlify.app/)\n\n## 📖 Overview\nHobbyHub is a dynamic platform designed to connect people through shared interests by allowing users to discover, join, or create local hobby-based groups. Whether it's reading, hiking, painting, or cooking, HobbyHub fosters real-world communities for real-world passions.\n\n---\n\n## 📋 Pages Overview\n\n| Route | Page | Description | Protected |\n|-------|------|-------------|-----------|\n| `/` | 🏠 **Home** | Landing page with banner, featured groups, testimonials | ❌ |\n| `/signin` | 🔐 **Login** | User authentication with email/password and Google | ❌ |\n| `/signup` | 📝 **Register** | User registration with form validation | ❌ |\n| `/allGroups` | 📋 **All Groups** | Browse all groups with search and filter | ❌ |\n| `/groupDetails/:id` | 📖 **Group Details** | Individual group information and join option | ✅ |\n| `/createGroup` | ➕ **Create Group** | Form to create new hobby group | ✅ |\n| `/myGroups` | 👤 **My Groups** | User's created groups with edit/delete options | ✅ |\n| `/updateGroup/:id` | ✏️ **Update Group** | Edit existing group information | ✅ |\n| `*` | ❌ **404 Not Found** | Error page for invalid routes | ❌ |\n\n---\n\n## 🎨 Dark Mode Implementation\n\nHobbyHub features a comprehensive dark mode implementation with:\n\n### 🌙 Theme Features\n- **System Preference Detection** - Automatically detects user's system theme\n- **Persistent Storage** - Remembers user's theme choice across sessions\n- **Smooth Transitions** - Animated theme switching with CSS transitions\n- **Complete Coverage** - All components and pages support dark mode\n\n### 🎯 Implementation Details\n- **Context API** - Theme state management with React Context\n- **Tailwind Dark Mode** - Utility-first approach with `dark:` variants\n- **DaisyUI Integration** - Component library with built-in dark mode support\n- **Custom Components** - All alerts, modals, and forms adapt to theme\n\n### 🔧 Technical Stack\n```javascript\n// Theme Context Implementation\nconst ThemeContext = createContext();\n\n// Tailwind Configuration\nmodule.exports = {\n  darkMode: 'class',\n  plugins: [require('daisyui')]\n}\n```\n\n---\n\n## 📋 Table of Contents\n\n- [🚀 Key Features](#-key-features)\n- [🛠️ Technologies Used](#️-technologies-used)\n- [📁 Project Structure](#-project-structure)\n- [⚡ Installation \u0026 Setup](#-installation--setup)\n- [🔗 Repositories](#-repositories)\n- [📋 Pages Overview](#-pages-overview)\n- [🎨 Dark Mode Implementation](#-dark-mode-implementation)\n- [🔒 Environment Variables](#-environment-variables)\n- [📱 Responsive Design](#-responsive-design)\n- [🧪 Testing](#-testing)\n- [📄 License](#-license)\n\n---\n\n## 🚀 Key Features\n\n- 🔐 **Authentication System**  \n  Secure login and registration using Firebase (Email/Password + Google Sign-In) with strong password validation and user feedback via SweetAlert2.\n\n- 🛡️ **Protected Routes**  \n  Sensitive pages like group creation, personal groups, and updates are accessible only to authenticated users with protected routes.\n\n- 🎨 **Unique and Responsive Design**  \n  Custom UI design using Tailwind CSS v4 and DaisyUI, fully responsive for mobile, tablet, and desktop with modern glass-morphism effects.\n\n- 🌙 **Advanced Dark/Light Mode Toggle**  \n  Comprehensive theme switching throughout the entire application with persistent user preference storage and smooth transitions.\n\n- 📅 **Smart Event Management**  \n  Groups with past start dates are automatically marked inactive, preventing new joins with dynamic status indicators.\n\n- 📦 **Full CRUD Functionality**  \n  Complete Create, Read, Update, Delete operations with real-time data updates from MongoDB database via secure Express server.\n\n- 🎭 **Interactive UI Enhancements**  \n  Integrated `React Awesome Reveal` for smooth animations, `React Tooltip` for helpful UX hints, and `SweetAlert2` for elegant notifications.\n\n- 🔍 **Advanced Search \u0026 Filter**  \n  Real-time search functionality with sorting options by date and category filtering.\n\n- ⚡ **Performance Optimized**  \n  Code splitting, lazy loading, and optimized bundle size for fast loading times.\n\n---\n\n## 🛠️ Technologies Used\n\n### Frontend\n- **React 18** - Latest React features with concurrent rendering\n- **Vite** - Lightning-fast build tool and dev server\n- **Tailwind CSS v4** - Utility-first CSS framework with latest features\n- **DaisyUI** - Tailwind CSS component library\n- **React Router v7** - Client-side routing with new features\n\n### Authentication \u0026 Backend\n- **Firebase Authentication** - Secure user authentication\n- **MongoDB** - NoSQL database for flexible data storage\n- **Express.js** - RESTful API server\n\n### UI Libraries \u0026 Tools\n- **React Awesome Reveal** - Animation library for smooth transitions\n- **React Tooltip** - Interactive tooltips for better UX\n- **SweetAlert2** - Beautiful, responsive, customizable popup alerts\n- **React Icons** - Popular icon packs as React components\n- **React CountUp** - Animated counting numbers\n- **Swiper.js** - Modern touch slider with hardware accelerated transitions\n\n---\n\n## 📁 Project Structure\n\n```bash\nHobbyHub-Client/\n├── 📁 public/\n│   ├── 🖼️ logo.png\n│   ├── 🖼️ vite.svg\n│   ├── 📄 _redirects\n│   └── 📁 Fonts/\n│       └── 🔤 Malvie.otf\n├── 📁 src/\n│   ├── 📄 main.jsx                 # Application entry point\n│   ├── 📄 App.jsx                  # Root component\n│   ├── 🎨 App.css                  # Global application styles\n│   ├── 🎨 index.css                # Global CSS with Tailwind imports\n│   ├── 📁 assets/                  # Static assets\n│   │   ├── 🖼️ banner1.png\n│   │   ├── 🖼️ banner2.png\n│   │   ├── 🖼️ banner3.png\n│   │   ├── 🖼️ banner4.png\n│   │   ├── 🖼️ react.svg\n│   │   └── 📁 images/\n│   │       ├── 🖼️ error.svg\n│   │       ├── 🖼️ login.svg\n│   │       └── 🖼️ signup.svg\n│   ├── 📁 components/              # Reusable UI components\n│   │   ├── 🧩 Footer.jsx           # Application footer\n│   │   ├── 🧩 Groups.jsx           # Group cards display\n│   │   ├── 🧩 Navbar.jsx           # Navigation with auth \u0026 theme toggle\n│   │   ├── 🧩 Newsletter.jsx       # Newsletter subscription\n│   │   ├── 🧩 Spinner.jsx          # Loading spinner component\n│   │   ├── 🧩 Testimonials.jsx     # User testimonials \u0026 stats\n│   │   ├── 🧩 WhyJoin.jsx          # Benefits section\n│   │   └── 📁 Banner/\n│   │       ├── 🧩 Banner.jsx       # Hero carousel banner\n│   │       └── 🎨 banner.css       # Banner-specific styles\n│   ├── 📁 context/                 # React Context providers\n│   │   ├── ⚙️ AuthContext.jsx      # Authentication context\n│   │   ├── 🔧 AuthProvider.jsx     # Auth state management\n│   │   ├── 🌙 ThemeContext.jsx     # Theme context\n│   │   └── 🎨 ThemeProvider.jsx    # Theme state management\n│   ├── 📁 firebase/                # Firebase configuration\n│   │   └── 🔥 firebase.config.js   # Firebase app configuration\n│   ├── 📁 hooks/                   # Custom React hooks\n│   │   └── 🪝 useTitle.js          # Dynamic document title hook\n│   ├── 📁 layouts/                 # Layout components\n│   │   └── 🏗️ Root.jsx             # Main layout wrapper\n│   ├── 📁 pages/                   # Page components\n│   │   ├── 🏠 Home.jsx             # Homepage with sections\n│   │   ├── 📋 AllGroups.jsx        # Browse all groups with search\n│   │   ├── ➕ CreateGroup.jsx      # Create new group form\n│   │   ├── 👤 MyGroups.jsx         # User's created groups\n│   │   ├── 📝 GroupDetails.jsx     # Individual group details\n│   │   ├── ✏️ UpdateGroup.jsx      # Edit group information\n│   │   ├── 🔐 Login.jsx            # User login form\n│   │   ├── 📝 Register.jsx         # User registration form\n│   │   └── ❌ NotFound.jsx         # 404 error page\n│   └── 📁 routes/                  # Routing configuration\n│       ├── 🛡️ PrivateRoute.jsx     # Protected route wrapper\n│       └── 🗺️ router.jsx           # Application routing setup\n├── 📄 package.json                 # Dependencies and scripts\n├── 📄 package-lock.json            # Locked dependency versions\n├── ⚙️ vite.config.js               # Vite configuration\n├── 🎨 tailwind.config.js           # Tailwind CSS configuration\n├── 📏 eslint.config.js             # ESLint configuration\n├── 📄 index.html                   # HTML entry point\n└── 📖 README.md                    # Project documentation\n```\n\n---\n\n## ⚡ Installation \u0026 Setup\n\n### Prerequisites\n- Node.js (v18 or higher)\n- npm or yarn package manager\n- Git\n\n### Clone the Repository\n```bash\ngit clone https://github.com/TanmoyDhar1077/Hobbyhub-Client.git\ncd Hobbyhub-Client\n```\n\n### Install Dependencies\n```bash\nnpm install\n# or\nyarn install\n```\n\n### Environment Setup\nCreate a `.env.local` file in the root directory:\n```env\nVITE_FIREBASE_API_KEY=your_firebase_api_key\nVITE_FIREBASE_AUTH_DOMAIN=your_firebase_auth_domain\nVITE_FIREBASE_PROJECT_ID=your_firebase_project_id\nVITE_FIREBASE_STORAGE_BUCKET=your_firebase_storage_bucket\nVITE_FIREBASE_MESSAGING_SENDER_ID=your_firebase_messaging_sender_id\nVITE_FIREBASE_APP_ID=your_firebase_app_id\n```\n\n### Run Development Server\n```bash\nnpm run dev\n# or\nyarn dev\n```\n\n### Build for Production\n```bash\nnpm run build\n# or\nyarn build\n```\n\n---\n\n## 📁 Client Repository\n\n🔗 **GitHub**: [HobbyHub-Client](https://github.com/TanmoyDhar1077/Hobbyhub-Client)\n\n**Key Technologies:**\n- React 18 with modern hooks\n- Vite for blazing-fast development\n- Tailwind CSS v4 + DaisyUI\n- Firebase Authentication\n- React Router v7\n- SweetAlert2 for notifications\n- React Awesome Reveal for animations\n\n---\n\n## 🛠️ Server Repository\n\n🔗 **GitHub**: [HobbyHub-Server](https://github.com/TanmoyDhar1077/Hobbyhub-Server)\n\n**Key Technologies:**\n- Node.js with Express.js\n- MongoDB for data storage\n- CORS for cross-origin requests\n- Dotenv for environment security\n- RESTful API architecture\n\n---\n\n\n## 🔒 Environment Variables\n\nEnvironment variables are used to hide Firebase configuration and MongoDB credentials:\n\n```env\n# Firebase Configuration\nVITE_FIREBASE_API_KEY=your_firebase_api_key\nVITE_FIREBASE_AUTH_DOMAIN=your_firebase_auth_domain\nVITE_FIREBASE_PROJECT_ID=your_firebase_project_id\nVITE_FIREBASE_STORAGE_BUCKET=your_firebase_storage_bucket\nVITE_FIREBASE_MESSAGING_SENDER_ID=your_firebase_messaging_sender_id\nVITE_FIREBASE_APP_ID=your_firebase_app_id\n```\n\n\u003e **Note:** Create a `.env.local` file in the project root and add your Firebase configuration variables.\n\n---\n\n## 📱 Responsive Design\n\nHobbyHub is built with a mobile-first approach ensuring optimal experience across all devices:\n\n### 📊 Breakpoints\n- **Mobile**: 320px - 768px\n- **Tablet**: 768px - 1024px  \n- **Desktop**: 1024px+\n\n### 🎯 Key Features\n- Flexible grid layouts with CSS Grid and Flexbox\n- Responsive typography with Tailwind's responsive utilities\n- Touch-friendly interface with appropriate spacing\n- Optimized images with proper aspect ratios\n- Smooth animations that respect user's motion preferences\n\n---\n\n## 🧪 Testing\n\n### Manual Testing Checklist\n- ✅ Authentication (Email/Password \u0026 Google Sign-in)\n- ✅ Protected routes functionality\n- ✅ CRUD operations for groups\n- ✅ Dark/Light mode toggle\n- ✅ Responsive design across devices\n- ✅ Form validations\n- ✅ Search and filter functionality\n- ✅ Loading states and error handling\n\n### Browser Compatibility\n- ✅ Chrome (Latest)\n- ✅ Firefox (Latest)\n- ✅ Safari (Latest)\n- ✅ Edge (Latest)\n\n---\n\n## 🚀 Performance Optimizations\n\n- **Code Splitting** - Dynamic imports for route-based splitting\n- **Lazy Loading** - Components loaded on demand\n- **Image Optimization** - Proper sizing and format optimization\n- **Bundle Analysis** - Regular monitoring of bundle size\n- **Caching Strategy** - Service worker for offline functionality\n\n---\n\n## 🤝 Contributing\n\n1. Fork the repository\n2. Create your feature branch (`git checkout -b feature/AmazingFeature`)\n3. Commit your changes (`git commit -m 'Add some AmazingFeature'`)\n4. Push to the branch (`git push origin feature/AmazingFeature`)\n5. Open a Pull Request\n\n---\n\n## 📞 Contact\n\n**Developer**: Tanmoy Dhar  \n**Email**: tanmoydhar1077@gmail.com  \n**GitHub**: [@TanmoyDhar1077](https://github.com/TanmoyDhar1077)  \n**LinkedIn**: [Tanmoy Dhar](https://www.linkedin.com/in/tanmoy-dhar-ripon-6126922ba/)\n\n---\n\n## 📄 License\n\nThis project is developed as part of a course assignment and is not licensed for commercial use.\n\n---\n\n## 🌟 Acknowledgments\n\n\u003c!-- - **Programming Hero** - For providing excellent learning resources --\u003e\n- **Firebase** - For robust authentication services\n- **Tailwind CSS** - For the amazing utility-first CSS framework\n- **DaisyUI** - For beautiful pre-built components\n- **React Community** - For the incredible ecosystem and support\n\n---\n\n*Made with ❤️ by [Tanmoy Dhar](https://github.com/TanmoyDhar1077)*\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftanmoydhar1077%2Fhobbyhub-client","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftanmoydhar1077%2Fhobbyhub-client","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftanmoydhar1077%2Fhobbyhub-client/lists"}