Travel-Book

To check the status of the servers (Frontend server and Backend server) - Click here

Repositories

• Backend: Travel-Book Backend Repository
• Frontend: Travel-Book Frontend Repository

Travel Book - Your Digital Travel Journal

📑 Table of Contents

• Quick Start for Contributors
  • Prerequisites
  • Setup Instructions
• Project Overview
• Project Structure
• Purpose & Vision
• Technology Stack
  • Frontend
  • Backend
  • Development & Deployment
• Key Features
• User Flow
• Mobile-First Approach
• Unique Selling Points
• Accessibility Features
• Contributing & Recognition
• Frontend Development Roadmap
• License
• Support

📑 Table of Contents

• Quick Start for Contributors
• Project Overview
• Project Structure
• Purpose & Vision
• Technology Stack
  • Frontend
  • Backend
  • Development & Deployment
• Key Features
  • User Authentication
  • Travel Story Management
  • Organization & Discovery
  • User Experience
  • Analytics & Insights
  • Social Features
  • AI Features
• User Flow
• Mobile-First Approach
• Unique Selling Points
• Accessibility Features
• Contributing & Recognition
• Frontend Development Roadmap
• License
• Support

Quick Start for Contributors

Prerequisites

Before you begin, ensure you have the following installed:

• Node.js (v16 or higher)
• npm or yarn package manager
• Git for version control
• MongoDB (for backend setup, or use MongoDB Atlas)

Setup Instructions

1. Fork both repositories

   Fork the Frontend and Backend repositories to your GitHub account.

2. Clone the repositories

   # Clone Frontend
   git clone https://github.com/YOUR_GITHUB_ID/Travel-Book.git
   cd Travel-Book
   
   # Clone Backend in a separate directory
   cd ..
   git clone https://github.com/YOUR_GITHUB_ID/Travel-Book-Backend.git

3. Set up the Backend

   cd Travel-Book-Backend
   npm install
   cp .env.example .env
   # Update .env with your configuration (MongoDB, Firebase, Cloudinary, etc.)
   npm run dev

   The backend will be running on http://localhost:3000 by default (or check your backend logs for the actual port).

4. Set up the Frontend

   In a new terminal window:

   cd Travel-Book
   npm install
   cp .env.example .env
   # Update the .env with your configuration (Google Maps API key, Firebase Config, etc.)
   npm run dev

   The frontend will be running on http://localhost:5173.

5. Access the application

   Open your browser and navigate to http://localhost:5173

Read the full contributor guide →

Project Overview

Travel Book is a modern web application designed to help users document, organize, and share their travel experiences. It serves as a digital travel journal where users can record memories, photos, and details about places they've visited. The platform provides a user-friendly interface for travelers to create a personal collection of travel stories, organize them by location and date, and optionally share them with others.

Project Structure

Travel-Book/
├── .github/
├── public/                    
│       ├── assets/images/
│       ├── robots.txt
│       └── sitemap.xml
├── src/
│       ├── assets/images/
│       ├── components/
│       │     ├── Auth/
│       │     ├── Cards/
│       │     ├── ChatBot/
│       │     ├── Footer/
│       │     ├── Input/
│       │     ├── Modals/
│       │     ├── Navbar/
│       │     ├── Onboarding/
│       │     ├── ThemeToggle/
│       │     ├── BackToTopButton.jsx
│       │     ├── Navbar.jsx
│       │     └── Toaster.jsx
│       ├── pages/
│       │     ├── Auth/
│       │     ├── Contributors/
│       │     ├── admin/
│       │     ├── hero/
│       │     ├── home/
│       │     ├── legal/
│       │     ├── profile/
│       │     └── mistake.jsx
│       ├── utils/
│       │     ├── AuthContext.jsx
│       │     ├── ProtectedRoute.jsx
│       │     ├── authErrorHandler.js
│       │     ├── axiosInstance.js
│       │     ├── constants.js
│       │     ├── firebase.js
│       │     ├── helper.js
│       │     └── uploadImage.js
│       ├── App.jsx
│       ├── index.css
│       ├── main.jsx
│       └── scrollbar.css             
├── .env.example              
├── .gitignore               
├── CODE_OF_CONDUCT.md                        
├── CONTRIBUTING.md   
├── CONTRIBUTORS_RECOGNITION_GUIDE.md            
├── LICENSE                
├── PROJECT_STRUCTURE.md                            
├── QUICKSTART.md
├── SECURITY.md    
├── eslint.config.js
├── index.html    
├── package.json    
├── postcss.config.js  
├── tailwind.config.js   
├── vercel.json                       
└── vite.config.js             

Purpose & Vision

The primary purpose of Travel Book is to give travelers a dedicated space to preserve their travel memories in a structured and visually appealing way. Rather than having travel photos scattered across different devices or social media platforms, Travel Book centralizes these experiences into a cohesive travel journal that can be accessed from anywhere.

Key goals of the platform include:

• Providing an intuitive way to document travel experiences
• Creating a searchable repository of personal travel memories
• Offering data visualization of travel patterns and statistics
• Supporting offline access for users on the go
• Delivering a responsive experience across all devices

Technology Stack

Frontend

• Framework: React.js
• Styling: Tailwind CSS with custom components
• State Management: React Context API and local state
• Animations: Framer Motion
• Routing: React Router
• UI Components: Custom components with responsive design
• Offline Support: PWA (Progressive Web App) capabilities with service workers
• Data Visualization: Chart.js and custom analytics

Backend

• Runtime: Node.js
• Framework: Express.js
• Database: MongoDB with Mongoose ODM
• Authentication: JWT (JSON Web Tokens) and Firebase
• File Upload: Multer with Cloudinary storage
• API: RESTful API design
• Email: Nodemailer for notifications
• AI Integration: Google Generative AI for chatbot

Development & Deployment

• Build Tool: Vite
• Frontend Deployment: Vercel
• Backend Deployment: AWS EC2 with Nginx and PM2
• Version Control: Git
• Package Management: npm

Key Features

User Authentication

• Email/password registration and login
• OTP verification for secure access
• Password reset functionality
• Firebase social authentication
• JWT-based session management

Travel Story Management

• Create, read, update, and delete travel stories
• Rich text editing for story content
• Image upload and management with Cloudinary
• Location tagging with map integration
• Date tracking for visits
• Favorite marking for important memories

Organization & Discovery

• Search functionality by title, content, or location
• Advanced filtering by date range and location
• Sort stories by various criteria
• Categorize stories as favorites
• View recent trips at a glance

User Experience

• Dark/light mode toggle with system preference detection
• Responsive design for all device sizes
• Smooth animations and transitions
• Swipe gestures on mobile devices
• Drag and drop interface for image uploads

Analytics & Insights

• Visual representation of travel statistics
• Location frequency analysis
• Travel timeline visualization
• Monthly/yearly travel patterns

Social Features

• Direct link sharing for stories
• Social media integration (Facebook, Twitter, WhatsApp)
• Customizable sharing messages
• Contributor recognition system

AI Features

• Chatbot powered by Google Generative AI
• Smart story suggestions and insights

User Flow

1. Onboarding:

   • User lands on the hero page with information about the platform
   • User registers or logs in through the authentication system
   • New users are welcomed with an introduction to the platform features

2. Core Experience:

   • Users can view their collection of travel stories on the home page
   • Adding a new story walks users through a step-by-step process
   • Existing stories can be viewed, edited, or deleted
   • Stories can be marked as favorites for quick access

3. Discovery & Organization:

   • Users can search for specific stories
   • Advanced filtering by date or location
   • Analytics section offers insights into travel patterns

4. Sharing & Community:

   • Stories can be shared via multiple platforms
   • Contributor recognition for active community members

Mobile-First Approach

Travel Book is designed with a mobile-first approach, recognizing that many users will document their travels while on the go:

• Touch-optimized interfaces with appropriate sizing for tap targets
• Swipe gestures for navigation between views
• Responsive layouts that adapt to different screen sizes
• Offline capabilities for areas with limited connectivity
• Optimized image handling for mobile bandwidth considerations
• Quick access to camera for adding travel photos directly

Unique Selling Points

1. Focused Purpose: Specifically designed for travel documentation
2. Privacy Control: Users have full control over their content
3. Structured Organization: Purpose-built system for travel memories
4. Visual Analytics: Unique insights into personal travel patterns
5. Offline First: Robust offline capabilities
6. Cross-Device Experience: Seamless experience across devices

Accessibility Features

• High contrast mode support via dark/light themes
• Keyboard navigation throughout
• ARIA attributes for screen reader compatibility
• Touch-friendly interfaces with appropriate sizing
• Text scaling support
• Color choices that consider color blindness

Contributing & Recognition

We welcome contributions! Travel Book features a comprehensive contributors recognition system to celebrate the efforts of our community members.

How to Contribute

1. Get Started: Follow our Contributing Guide for setup instructions
2. Make Your Mark: Implement features, fix bugs, or improve documentation
3. Get Recognition: Submit your contributions through our Contributors Application system

Contributors Recognition System

Once you've made meaningful contributions to the project, you can apply to be featured on our contributors page:

• Apply Online: Visit /contributors to see current contributors and apply for recognition
• Submission Form: Complete the form at /contribute with details about your contributions
• Review Process: Our team reviews applications within 3-5 business days
• Featured Display: Approved contributors are showcased on the main contributors page

Types of Contributions Recognized

We recognize various types of contributions including:

• Code contributions (features, bug fixes, performance improvements)
• Documentation improvements
• Design and UX enhancements
• Community support and engagement

Frontend Development Roadmap

Perfect opportunities for contributors to make meaningful impact!

UI/UX Enhancements

• Enhanced animations and transitions
• Theme customization options
• Accessibility improvements
• Mobile experience optimization

Component Library

• Story templates
• Interactive widgets
• Advanced photo gallery
• Custom map components

Features

• Smart search with auto-complete
• Bulk operations
• Advanced export options
• Keyboard shortcuts

Performance & PWA

• Offline enhancements
• Code splitting and lazy loading
• PWA feature improvements
• Loading state optimizations

License

This project is open source and available under the MIT License.

Support

If you have any questions or need help getting started, please:

• Check the Contributing Guide
• Open an issue on GitHub
• Join our community discussions

---

Happy traveling and happy coding!