🌍 Travlog - Travel Website

A modern, responsive travel website built with Next.js, featuring authentication, database integration, and beautiful UI components.

✨ Features

• 🎨 Modern Design - Beautiful, responsive travel website
• 🔐 Authentication - User registration and login with NextAuth
• 🗄️ Database Integration - Prisma ORM with SQLite/PostgreSQL
• 📱 Responsive - Works perfectly on all devices
• ⚡ Fast Performance - Optimized with Next.js 15
• 🎯 SEO Ready - Proper meta tags and structure
• 🛡️ Error Handling - Comprehensive error boundaries
• 🎨 UI Components - Reusable Button and Card components

🚀 Quick Start

Prerequisites

• Node.js 18+
• npm or yarn

Installation

1. Clone the repository:

   git clone <your-repo-url>
   cd travlog-website

2. Install dependencies:

   npm install

3. Set up environment variables:

   cp .env.local.example .env.local

   Add your environment variables:

   NEXTAUTH_URL=http://localhost:3000
   NEXTAUTH_SECRET=your-secret-key
   DATABASE_URL="file:./dev.db"

4. Set up the database:

   npx prisma generate
   npx prisma db push

5. Run the development server:

   npm run dev

6. Open your browser: Navigate to http://localhost:3000

🏗️ Project Structure

travlog-website/
├── app/                    # Next.js App Router
│   ├── api/               # API routes
│   │   ├── auth/          # Authentication endpoints
│   │   └── register/      # Registration endpoint
│   ├── components/        # React components
│   │   ├── auth/          # Authentication components
│   │   └── ui/            # UI components
│   ├── globals.css        # Global styles
│   ├── layout.tsx         # Root layout
│   └── page.tsx           # Home page
├── components/            # Shared components
│   ├── auth/              # Auth modals
│   └── ui/                # UI components
├── prisma/                # Database schema
├── types/                 # TypeScript declarations
└── public/                # Static assets

🎨 Components

UI Components

• Button - Versatile button component with variants
• Card - Flexible card component for content display

Authentication Components

• LoginModal - User login modal with form validation
• SignupModal - User registration modal with validation

🔧 Configuration

Environment Variables

Variable	Description	Required
NEXTAUTH_URL	Your application URL	Yes
NEXTAUTH_SECRET	Secret key for NextAuth	Yes
DATABASE_URL	Database connection string	Yes

Database Setup

The project uses Prisma ORM with support for:

• SQLite (development)
• PostgreSQL (production)

🚀 Deployment

Quick Deploy to Vercel

1. Push to GitHub:

   git add .
   git commit -m "Ready for deployment"
   git push origin main

2. Deploy to Vercel:

   • Go to vercel.com
   • Connect your GitHub repository
   • Add environment variables
   • Deploy!

Other Deployment Options

• Netlify - Drag and drop deployment
• Railway - Full-stack deployment platform
• Heroku - Traditional hosting platform

For detailed deployment instructions, see DEPLOYMENT.md

🛠️ Development

Available Scripts

npm run dev          # Start development server
npm run build        # Build for production
npm run start        # Start production server
npm run lint         # Run ESLint

Database Commands

npx prisma generate  # Generate Prisma client
npx prisma db push   # Push schema to database
npx prisma studio    # Open Prisma Studio

🎯 Features in Detail

Authentication System

• User registration with email/password
• Secure password hashing with bcrypt
• JWT-based sessions
• Form validation and error handling

Travel Website Sections

• Hero Section - Eye-catching landing area
• Services - Tour guide and booking features
• Destinations - Popular travel destinations
• Statistics - Company achievements
• Features - Key service highlights
• Testimonials - Customer reviews
• Newsletter - Email subscription
• Footer - Social links and branding

Responsive Design

• Mobile-first approach
• Tailwind CSS for styling
• Optimized for all screen sizes
• Smooth animations and transitions

🔒 Security

• Password hashing with bcrypt
• JWT token-based authentication
• Environment variable protection
• Input validation and sanitization
• Error boundary protection

📱 Performance

• Next.js 15 optimization
• Static generation where possible
• Optimized images with Next.js Image
• Minimal bundle size
• Fast loading times

🤝 Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Add tests if applicable
5. Submit a pull request

📄 License

This project is licensed under the MIT License.

🆘 Support

If you encounter any issues:

1. Check the deployment guide
2. Review the Next.js documentation
3. Check the Prisma documentation

---

Built with ❤️ using Next.js, Prisma, and Tailwind CSS