Gardenbook

🔹 Project Overview

Gardenbook is a comprehensive full-stack social media web application built for gardening enthusiasts and professionals to share knowledge, discover curated gardening content, and engage with a like-minded community.

The platform combines social networking features, content creation tools, advanced search, and premium content monetization into a single ecosystem. Users can write rich-text posts, upvote and comment on content, follow other users, and explore popular gardening tips based on community engagement.

A unique feature of Gardenbook is its interactive garden planning tool, allowing users to visually design their garden layout using drag, resize, and positioning tools, and then export the plan as PNG or PDF.

---

🔹 Key Features

👤 Authentication & User Management

• JWT-based authentication system

• Secure user registration and login

• Profile management with protected routes

• Role-based access for users and administrators

---

🌿 Social Media Functionality

• Create, edit, and publish gardening posts

• Rich text editor supporting:

  • Formatted text

  • Images

  • Embedded media

• Upvote and comment on posts

• Follow other users

• Popular content ranking based on engagement

• Infinite scrolling for smooth content browsing experience

---

🔍 Advanced Search & Discovery

• Search gardening content by:

  • Category

  • Popularity

  • Keywords

• Filter posts to find relevant gardening tips efficiently

• Optimized queries for fast content retrieval

---

💎 Premium Content & Payments

• Integrated AMARPAY payment gateway

• Paid access to premium gardening content

• Secure payment handling with backend validation

• Access control to premium resources based on payment status

---

🧩 Interactive Garden Planning Tool

• Drag-and-drop interface to design custom garden layouts

• Resize and reposition garden elements dynamically

• Export completed garden plans as:

  • PNG

  • PDF

• Designed for both hobbyists and professional planners

---

🛠️ Admin Dashboard

• Manage users and roles

• Moderate posts and comments

• Monitor payments and premium access

• Oversee community activity and platform health

---

📱 User Experience & Performance

• Fully responsive UI (mobile, tablet, desktop)

• Infinite scroll for improved UX

• Optimized API calls for performance

• Clean and accessible design using modern UI patterns

---

🔹 Tech Stack

Frontend

• Next.js

• TypeScript

• Infinite scroll implementation

• Rich text editor

• Drag-and-drop & resize libraries

• PDF & image export utilities

Backend

• Node.js

• Express.js

• TypeScript

• MongoDB

• JWT authentication

• RESTful API architecture

---

🔹 Challenges & Solutions

🔴 Challenge 1: Building a Scalable Social Feed

Problem:
Handling large volumes of user-generated content while maintaining performance and usability.

Solution:

• Implemented infinite scrolling to load posts incrementally

• Optimized database queries for pagination

• Reduced initial load time and improved perceived performance

---

🔴 Challenge 2: Secure Premium Content Access

Problem:
Ensuring only paid users could access premium gardening content.

Solution:

• Integrated AMARPAY payment gateway

• Linked payment status to user access rights

• Protected premium routes using backend authorization
  This ensured secure monetization and prevented unauthorized access.

---

🔴 Challenge 3: Rich Text Content Management

Problem:
Allowing users to create rich, multimedia content while maintaining data consistency and security.

Solution:

• Integrated a rich text editor with controlled output

• Sanitized and validated content before saving

• Supported images and embedded media safely

---

🔴 Challenge 4: Complex Interactive Garden Planner

Problem:
Designing an intuitive drag-and-drop interface with resize functionality and export support.

Solution:

• Implemented draggable and resizable UI components

• Maintained layout state accurately in the frontend

• Added export functionality to generate PNG and PDF outputs
  This transformed Gardenbook from a content platform into a practical planning tool.

---

🔴 Challenge 5: Moderation & Admin Control

Problem:
Managing users, content, and payments efficiently as the platform grows.

Solution:

• Built a dedicated admin dashboard

• Enabled role-based moderation tools

• Centralized user, post, and payment management
  This ensured platform stability and community quality.

---

🔹 Learning Outcomes

• Built a scalable social media platform architecture

• Implemented secure payment-based content access

• Designed complex interactive UI tools

• Improved performance using infinite scrolling

• Strengthened full-stack TypeScript development skills

• Gained experience in community moderation systems