🍽️ HobbyHub Web App

Welcome to HobbyHub,HobbyHub is a community-driven web platform that allows users to create, join, and manage local hobby-based groups. Whether you're into painting, gaming, hiking, or coding, HobbyHub helps you connect with like-minded individuals in your area.

📌 Project Overview

Detail	Information
GitHub Client site	HobbyHub-client
Live Site client	HobbyHub-firebase
GitHub server site	HobbyHub-server
Portfolio GitHub	Md Mostakim Hosen-portfolio
Portfolio Live	Firebase-live
Created On	20 May 2025, 10:32 AM GMT+6
Location	Mohanpur, Rajshahi, Bangladesh

🌐 Live Site

🔗 Deployed App (https://happy-family-4d585.web.app/)

---

📁 Project Structure

Here's a high-level overview of the project's file structure:

.
├── public/               # Static assets (favicon, CNAME, vite.svg)
├── dist/                 # Production build
├── src/                  # Main application source code
│   ├── animation/        # Lottie files and animation components
│   ├── assets/           # Images, logos, and JSON
│   ├── components/       # Reusable UI components (Header, Banner, Footer)
│   ├── hooks/            # Custom React hooks
│   ├── Layout/           # Route layouts
│   ├── modules/          # Domain-based modules
│   │   ├── auth/         # Authentication
│   │   ├── blogs/        # Blog system
│   │
│   ├── pages/            # Page components
│   ├── provider/         # Context Providers (Auth)
│   ├── Routes/           # Routing logic
│   ├── index.css         # Tailwind styles
│   ├── App.jsx           # Main App component
│   └── main.jsx          # App bootstrap
├── README.md             # You're here
├── vite.config.js        # Vite configuration
├── eslint.config.js      # Linting rules
└── package.json          # Project metadata

---

🧭 Routing Structure (with Layouts)

🔐 Auth Layout

• /login → Login.jsx
• /register → Register.jsx
• /forgot-password → ForgotPassword.jsx

🏠 Main Layout (Landing Pages)

• / → Home.jsx
• /about → About.jsx
• /contact → Contact.jsx
• /faq → Faq.jsx
• /privacy-policy → PrivacyPolicy.jsx
• /terms-and-conditions → TermsCondintion.jsx

📚 Blog Feature (via BlogsLayout.jsx)

• /blogs → Blogs.jsx
• /blogs/:id → BlogDetails.jsx
• /create-blog → CreateBlog.jsx

👤 Profile

• /my-profile → MyProfile.jsx
• /update-profile → UpdateProfile.jsx

---

🔑 Features

✅ Authentication

• Firebase Auth integration
• Login, Register, Forgot Password
• Auth-protected routes

📝 Blog System

• View all blogs
• Blog details with comments, read time, tags
• Create and share new blogs

---

🛠️ Tech Stack

• Frontend: React.js, Tailwind CSS
• Routing: React Router
• Forms: React Hook Form, React Day Picker
• State Management: React Context API (AuthProvider)
• Animations: Lottie
• Toast Notifications: React Hot Toast
• Deployment: GitHub Pages / Vercel / Netlify (configure as needed)
• Build Tool: Vite

---

📦 Installation

bun install  # or npm install
bun run dev  # or npm run dev

---

📌 TODOs

• ---

👏 Credits

• Design inspired by classic cooking & recipe books
• Icons via Lucide and Heroicons
• Lottie animations from LottieFiles

---

📄 License

This project is licensed under the MIT License.

---

Made with ❤️ for food enthusiasts and aspiring chefs.

"Food is symbolic of love when words are inadequate." — Alan D. Wolfelt

----- preivous version ------

---

🚀 Features

🔐 Authentication & Security

• Email/Password Login: Secure user authentication via Firebase.
• Google Sign-In: Quick access using Google accounts.
• Protected Routes: Restricts access to sensitive pages like profile and recipe details.
• Password Reset: Users can reset passwords through email verification.

👤 User Profile

• Profile Page: View and edit user information, including display name and photo.
• Update Profile: Modify personal details securely.

📄 Additional Pages

• About: Learn more about FlavorBook.
• Contact: Get in touch with the team.
• FAQ: Frequently Asked Questions.
• Privacy Policy: Understand how user data is handled.
• Terms & Conditions: Legal information regarding the use of FlavorBook.

🎨 UI/UX Enhancements

• Responsive Design: Optimized for various devices.
• Tailwind CSS & DaisyUI: Utilized for styling and component design.
• Lottie Animations: Engaging animations for better user experience.
• Swiper: Interactive sliders for showcasing content.

---

A Little More About Me...

Hello i'm Md Mostakim Hosen.

I'm a passionate Frontend Developer with a strong focus on creating clean, responsive, and user-friendly web interfaces. I enjoy building modern web applications using technologies like HTML, CSS, JavaScript, React.js, and Tailwind CSS. I believe in writing readable code, maintaining UI consistency, and ensuring a smooth user experience across all devices. I'm always eager to learn new tools and improve my skills to deliver better results.

const mostakim = {
  pronouns: "he" | "him",
  code: [Javascript, Typescript, HTML, CSS, Python, Java],
  tools: [React, Node, Storybook, Styled-Components],
  architecture: ["microservices", "event-driven", "design system pattern"],
  techCommunities: {
                        coorganizer: "AfroPython",
                        speaker: "Latinity",
                        mentor: "EducaTRANSforma"
                      },
 challenge: "I am doing the #100DaysOfCode challenge focused on react and typescript"
}

🌐 Socials:

💻 Tech Stack:

📊 GitHub Stats:

---