Chat mode imported from techwithPranab/TravelBlogWeb (.github/chatmodes/customchat.chatmode.md). Copyright stays with the author.

BagPackStories Chat Mode Configuration

🤖 AI Assistant Context Configuration

This file configures the contextual information available to AI assistants working on the BagPackStories project. The AI assistant should use the documentation in the docs/ folder to understand the project structure, implement new features consistently, and maintain code quality standards.

📁 Documentation References

Core Project Documentation

• docs/README.md - Main documentation overview and update guidelines
• docs/ARCHITECTURE.md - System architecture, data flow, and technical design
• docs/BACKEND_FLOWS.md - Backend business logic, controllers, and data processing flows
• docs/FRONTEND_FLOWS.md - Frontend user flows, components, and state management
• docs/API_INTEGRATION.md - Complete API reference with endpoints, request/response patterns
• docs/UI_PAGES.md - All UI components, pages, and their implementations
• docs/THIRD_PARTY_INTEGRATIONS.md - External services, configurations, and integration patterns
• docs/IMPLEMENTATION_PATTERNS.md - Code patterns, best practices, and development guidelines

�️ Project Overview

Technology Stack

• Frontend: Next.js 14 (App Router), TypeScript, TailwindCSS, Framer Motion
• Backend: Node.js, Express.js, TypeScript, MongoDB, Mongoose
• Authentication: JWT with role-based access (Admin, Contributor, Reader)
• Media Management: Cloudinary for images, AWS S3 for backups
• Payments: Stripe integration
• Email: SendGrid for notifications and newsletters
• Maps: Mapbox GL JS for interactive travel maps
• Deployment: Docker containers with docker-compose

Project Structure

BagPackStoriesWeb/
├── backend/                    # Node.js/Express backend
│   ├── src/
│   │   ├── controllers/       # Business logic controllers
│   │   ├── models/           # Mongoose data models
│   │   ├── routes/           # API route definitions
│   │   ├── middleware/       # Auth, validation, error handling
│   │   ├── utils/            # Helper functions
│   │   ├── config/           # Database, AWS, Cloudinary configs
│   │   └── seedDatabase.ts   # Development data seeding
│   └── package.json
├── frontend/                  # Next.js frontend
│   └── src/
│       ├── app/              # Next.js 14 App Router pages
│       ├── components/       # Reusable React components
│       ├── context/          # React Context providers
│       ├── lib/              # Utility libraries and API clients
│       ├── types/            # TypeScript type definitions
│       └── utils/            # Helper functions
├── docs/                     # Project documentation
└── docker-compose.yml        # Development environment

�🎯 Implementation Guidelines

Before Implementing New Features

1. Review Architecture - Check ARCHITECTURE.md for system design patterns
2. Understand Flows - Review BACKEND_FLOWS.md and FRONTEND_FLOWS.md for existing patterns
3. Check API Patterns - Reference API_INTEGRATION.md for consistent API design
4. Follow UI Patterns - Use UI_PAGES.md for component structure and naming
5. Apply Code Standards - Follow patterns in IMPLEMENTATION_PATTERNS.md

When Adding New Features

1. API First - Design API endpoints following the patterns in API_INTEGRATION.md
2. Component Structure - Create components using patterns from UI_PAGES.md
3. State Management - Use context patterns from FRONTEND_FLOWS.md
4. Backend Logic - Implement following BACKEND_FLOWS.md patterns
5. Update Documentation - Add new features to relevant documentation files

Code Quality Standards

• TypeScript - Strict typing, interfaces in types/ folder
• Component Naming - PascalCase for components, kebab-case for files
• API Responses - Consistent format: { success: boolean, data: T, error?: string }
• Error Handling - Use error boundaries and proper error responses
• Testing - Unit tests for components, integration tests for APIs

🔧 Current Project State

✅ Implemented Features

• User Authentication: JWT-based auth with role management (Admin/Contributor/Reader)
• Content Management: Posts, Photos, Categories, Destinations with CRUD operations
• Photo Gallery: Upload system with admin approval workflow
• Interactive Maps: Mapbox integration for travel destinations
• Newsletter System: Email subscriptions with SendGrid
• Contact Forms: Contact form handling with email notifications
• Admin Dashboard: User management, content moderation, analytics
• Responsive Design: Mobile-first approach with TailwindCSS

🚧 Mock Data Sources (Priority Integration)

• Homepage Testimonials: Hardcoded in frontend/src/components/home/Testimonials.tsx
• Hero Section Statistics: Needs API endpoint for dynamic stats
• Featured Stories: Mock data in frontend/src/components/home/FeaturedStories.tsx
• Categories Display: Mock data in frontend/src/components/home/Categories.tsx
• Interactive Map Destinations: Requires API integration for dynamic data

🔄 Integration Points Needed

• Replace all mock data with actual API calls
• Complete photo approval workflow implementation
• Add real-time notifications (WebSocket/Socket.IO)
• Enhance search functionality with Elasticsearch
• Implement Stripe payment processing for premium features
• Add Google Analytics and custom analytics tracking

🚀 Development Workflow

Development Commands

# Start development environment
npm run dev                    # Starts both frontend and backend
cd backend && npm run dev      # Backend only (port 5000)
cd frontend && npm run dev     # Frontend only (port 3000)

# Database operations
cd backend && npm run seed     # Seed database with sample data

# Docker development
docker-compose up              # Start all services
docker-compose up backend      # Backend only
docker-compose up frontend     # Frontend only

Environment Setup

1. Prerequisites: Node.js 18+, MongoDB, Docker
2. Installation: Run npm install in both backend and frontend directories
3. Environment Variables: Copy .env.example files and configure API keys
4. Database: MongoDB connection with authentication
5. External Services: Configure Cloudinary, Mapbox, SendGrid, Stripe keys

Adding New Components

1. Check UI_PAGES.md for similar component patterns
2. Follow naming conventions from IMPLEMENTATION_PATTERNS.md
3. Add to appropriate feature folder under frontend/src/components/
4. Include TypeScript interfaces in frontend/src/types/
5. Add unit tests in __tests__/ folder

Adding New API Endpoints

1. Review API_INTEGRATION.md for URL patterns and response formats
2. Add to appropriate controller in backend/src/controllers/
3. Update routes in backend/src/routes/
4. Add validation middleware in backend/src/middleware/
5. Update API documentation in docs/API_INTEGRATION.md

Database Changes

1. Update Mongoose models in backend/src/models/
2. Create migration scripts if needed
3. Update seed data in backend/src/seedDatabase.ts
4. Test with existing data using Postman or similar

📋 Quality Assurance

Pre-Implementation Checklist

• Reviewed relevant documentation files
• Checked existing similar implementations
• Planned API endpoints (if needed)
• Considered error handling and edge cases
• Planned testing approach and test cases
• Verified responsive design requirements
• Checked accessibility requirements (WCAG 2.1)

Post-Implementation Checklist

• Updated relevant documentation files
• Added unit tests and integration tests
• Tested across different user roles (Admin/Contributor/Reader)
• Verified responsive design on mobile/tablet/desktop
• Checked accessibility with screen readers
• Tested error scenarios and edge cases
• Updated this chat mode file with new context

🔄 Documentation Maintenance

After implementing new features:

1. Update the relevant .md files in docs/ folder
2. Add new API endpoints to API_INTEGRATION.md
3. Document new components in UI_PAGES.md
4. Update flows in BACKEND_FLOWS.md or FRONTEND_FLOWS.md
5. Add implementation notes to IMPLEMENTATION_PATTERNS.md
6. Update this chat mode file with current project state

This ensures the AI assistant has the most current context for future implementations and maintains consistency across the codebase.

🏷️ Quick Reference Tags

Use these tags in conversations to reference specific documentation:

• #architecture - System design and data flow
• #backend - Server-side logic and APIs
• #frontend - Client-side components and flows
• #api - API endpoints and integration
• #ui - Components and pages
• #integrations - Third-party services
• #patterns - Code standards and patterns
• #mock-data - Current mock data sources to replace
• #testing - Testing patterns and guidelines
• #docker - Containerization and deployment
• #database - MongoDB models and operations

📊 Current Priorities

High Priority

1. Replace Mock Data: Convert hardcoded data to API-driven content
2. Photo Approval Workflow: Complete admin moderation system
3. Search Enhancement: Implement advanced search with filters
4. Real-time Features: Add notifications and live updates

Medium Priority

1. Payment Integration: Implement Stripe for premium features
2. Analytics: Add Google Analytics and custom tracking
3. Performance: Optimize images and implement caching
4. SEO: Add meta tags and structured data

Future Enhancements

1. Mobile App: React Native companion app
2. Multi-language: Internationalization support
3. Advanced Editor: Rich text editor for content creation
4. Social Features: Comments, likes, and social sharing

📞 Support

When implementing features, reference the documentation first. If patterns are unclear, check existing implementations in the codebase before asking for clarification. Always update documentation after implementation to maintain project knowledge. /Users/pranabpaul/Desktop/Blog/TravelBlogWeb/customchat.chatmode.md