Skip to content

coderskamrul/Travel-Website-Nextjs

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

5 Commits
 
 
 
 

Repository files navigation

Here is a professional GitHub README file for your travel website project:


🌍 Travel Website

A fully responsive and visually captivating travel website built with Next.js and Tailwind CSS, designed to inspire and simplify travel planning. The website includes a wide range of features like booking functionality, user authentication, and customizable themes for a seamless user experience.

Live Link: Live Demo Link

🚀 Features

1. Responsive Navigation Bar

  • Links to all major sections: Home, About, Destinations, Booking, Contact Us, Login, Signup.
  • Sticky navigation that dynamically changes style on scroll.
  • Fully mobile-friendly with a collapsible menu.

2. Hero Section

  • Eye-catching hero with a stunning background image.
  • Welcome message and a clear call-to-action button (e.g., "Start Your Adventure").
  • Optimized for all screen sizes.

3. Footer

  • Social media links, contact information, and quick access to Privacy Policy and Terms of Service.
  • Clean and responsive design.

4. Contact Us Page

  • Interactive contact form with fields for:
    • Name
    • Email
    • Subject
    • Message
  • Form validation and user-friendly success/error messages.

5. Booking Page

  • Booking system with options to:
    • Select travel dates.
    • Choose a destination.
    • Specify the number of travelers.
  • Booking summary section for confirmation.

6. Authentication

  • Login Page: Email and password fields with a link to signup.
  • Signup Page: Form includes username, email, password, and confirm password fields, with validation rules.

7. Responsive Design

  • Fully responsive layout, ensuring usability on devices of all sizes.
  • Leveraging Tailwind CSS for consistent and elegant styling.

8. Dark Mode Support

  • Integrated theme provider for seamless dark/light mode switching.

9. Performance & Optimization

  • Client-side and server-side logic for:
    • Form submissions.
    • User authentication.
    • Booking management.
  • API routes powered by Next.js for enhanced performance.

📂 Project Structure

├── app/
│   ├── layout.tsx         # Main layout component
│   ├── page.tsx           # Home page
│   ├── destinations/      # Destinations page
│   ├── booking/           # Booking page
│   ├── contact/           # Contact page
│   ├── login/             # Login page
│   ├── signup/            # Signup page
├── components/
│   ├── Navbar.tsx         # Navigation bar component
│   ├── Footer.tsx         # Footer component
│   ├── HeroSection.tsx    # Hero section component
│   ├── ThemeProvider.tsx  # Dark mode provider
├── styles/                # Tailwind CSS configuration
├── public/                # Static assets (images, icons)
└── package.json           # Project dependencies

🛠️ Getting Started

Prerequisites

  • Node.js (v18.12.1 or higher recommended)
  • npm or yarn

Installation

  1. Clone the repository:

    git clone https://github.com/coderskamrul/Travel-Website-Nextjs.git
    cd travel-website
  2. Install dependencies:

    npm install
  3. Run the development server:

    npm run dev
  4. Open your browser and navigate to:

    http://localhost:3000
    

🔧 Technologies Used

  • Next.js: React framework for server-side rendering and routing.
  • Tailwind CSS: Utility-first CSS framework for styling.
  • TypeScript: Static typing for better development experience.
  • Recharts.js (optional): For creating beautiful charts (if needed for analytics).
  • ESLint & Prettier: Code linting and formatting.

🌟 Contributing

Contributions are welcome! Feel free to open issues or submit pull requests to enhance the project.

Steps to Contribute:

  1. Fork the repository.
  2. Create a new branch:
    git checkout -b feature/your-feature-name
  3. Make your changes and commit them:
    git commit -m "Add your message here"
  4. Push to your branch:
    git push origin feature/your-feature-name
  5. Open a pull request.

🎉 Acknowledgments

  • Inspired by the passion for travel and adventure.

About

A fully responsive and visually captivating travel website built with Next.js and Tailwind CSS, designed to inspire and simplify travel planning.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors

Languages