Skip to content

A full-stack gardening hub for sharing tips, exploring gardeners, and engaging with a plant-loving community. Built with React, Node.js, Firebase, and MongoDB. Includes authentication, filtering, likes, and dark/light theme toggle.

Notifications You must be signed in to change notification settings

mohammadnobin/garden-ten-client

Repository files navigation

🌿 Garden - A Gardening Community & Resource Hub

🌐 Live Site: https://garden-ten.web.app/
💻 Client Repo: https://github.com/Programming-Hero-Web-Course4/b11a10-client-side-MdNobinfd.git
🛠️ Server Repo: https://github.com/Programming-Hero-Web-Course4/b11a10-server-side-MdNobinfd.git


🚀 Features

  • 🌱 Share a Garden Tip: Authenticated users can post gardening tips including category, difficulty, and visibility (CRUD).
  • 📋 Browse Tips with Filtering: Public gardening tips are displayed in a table format and can be filtered by difficulty level.
  • 👩‍🌾 Explore Gardeners: View gardener profiles including experience, status, and number of shared tips.
  • 🔐 Protected Routes & Authentication: Firebase Authentication supports Email/Password and Google Sign-In. Private routes are protected and persistent on reload.
  • 🌗 Dark/Light Theme Toggle: Seamless theme switcher available in the navbar.
  • 👍 Like Functionality: Users can like a tip, and the like count updates live in MongoDB.
  • 🖼️ Animations & UX Enhancements: Enhanced UI with Lottie animations, React Awesome Reveal, tooltips, spinners, and toast notifications.
  • 🧭 404 Page & Loader: Custom not-found page and dynamic loader on data fetch.

📝 Project Overview

Garden is a community platform where gardening enthusiasts can connect, share ideas, and grow together. Users can:

  • Post personal gardening tips (CRUD)
  • Discover trending tips by others
  • Find local or featured gardeners
  • Attend and promote gardening events
  • Engage with a beautiful, interactive interface

The project is built with a focus on user experience, dynamic content handling, and full-stack web development best practices.


💡 Technology Stack

🖼 Frontend

  • React
  • Tailwind CSS & DaisyUI
  • React Router
  • Firebase Authentication
  • Lottie React
  • React Awesome Reveal
  • React Icons, Toastify, SweetAlert2

⚙️ Backend

  • Node.js
  • Express.js
  • MongoDB (Atlas)
  • CORS, Dotenv

☁️ Hosting

  • Client: Firebase Hosting
  • Server: Vercel

🔐 Environment Variables

All sensitive credentials are stored securely in .env files and are excluded via .gitignore.

About

A full-stack gardening hub for sharing tips, exploring gardeners, and engaging with a plant-loving community. Built with React, Node.js, Firebase, and MongoDB. Includes authentication, filtering, likes, and dark/light theme toggle.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages