Skip to content

Wanderlust is a travel-based platform inspired by Airbnb, where users can browse and book various listings, leave reviews, and manage their profiles. The website allows users to explore different locations, book accommodations, and interact with the community.

Notifications You must be signed in to change notification settings

alisabir16767/WanderLust

Repository files navigation

Here’s a README with animation elements using markdown to make it engaging:


WanderLust

Wanderlust is a travel-based platform inspired by Airbnb, where users can browse and book various listings, leave reviews, and manage their profiles. The website allows users to explore different locations, book accommodations, and interact with the community.

🛠️ Technologies Used

  • Node.js: JavaScript runtime for backend
  • Express: Web framework for Node.js
  • MongoDB: NoSQL database for storing data
  • Mongoose: ODM (Object Data Modeling) library for MongoDB
  • EJS: Templating engine for rendering HTML views
  • Passport.js: Authentication middleware
  • method-override: Allows the use of HTTP methods such as PUT and DELETE in forms
  • cookie-parser: Middleware to parse cookies
  • express-session: Session management
  • connect-flash: Flash messages for notifications
  • connect-mongo: MongoDB-backed session store

🚀 Features

  • User Authentication: Sign up, login, and session management with Passport.js 🗝️
  • Listings & Reviews: Create, read, update, and delete listings and reviews 🏙️
  • Session Storage: Using MongoDB to store user sessions 🌱
  • Flash Messages: Show success and error messages for better user experience 💬

🔧 Installation

To get started with this project, clone it to your local machine:

git clone https://github.com/your-username/project-name.git
cd project-name

1. Install Dependencies

Make sure you have Node.js and MongoDB installed. If not, install them first. Then, run:

npm install

2. Set Up Environment Variables

Create a .env file in the root directory of the project with the following variables:

MONGO_URL=your-mongodb-url
SESSION_SECRET=your-secret-key
PORT=8080

3. Start the Application

To start the server, run:

npm start

Now the application will be running on http://localhost:8080. 🎉

📁 Project Structure

.
├── app.js            # Main application file
├── models/           # Mongoose models (user, listings, reviews)
├── routes/           # Express routes
│   ├── listing.js
│   ├── review.js
│   └── user.js
├── views/            # EJS views
│   ├── layouts/
│   ├── includes/
│   └── error.ejs
└── .env              # Environment variables

🔒 Authentication

This app uses Passport.js for user authentication. The LocalStrategy is used to authenticate users based on username and password. Sessions are stored in MongoDB using connect-mongo for persistent sessions.

Sign Up & Log In

  • Users can sign up and log in to manage listings and reviews.
  • Sessions ensure that logged-in users have access to protected routes.

🚨 Error Handling

The application uses a custom error handler ExpressError to handle errors gracefully.

  • 404 - Page Not Found (Custom error page rendered)
  • 500 - Internal Server Error (Generic error message)

✨ Animations

  1. Loading Spinners: A loading spinner can be shown while the page loads.

    <div class="spinner">
      <div class="spinner-bounce"></div>
    </div>
  2. Button Hover Effect: Add this CSS to animate buttons when hovered.

    .btn {
      transition: all 0.3s ease;
    }
    .btn:hover {
      transform: scale(1.1);
      background-color: #5cb85c;
    }
  3. Flash Message Fade In: This CSS can make flash messages appear smoothly:

    .flash-message {
      animation: fadeIn 2s ease-in-out;
    }
    @keyframes fadeIn {
      0% {
        opacity: 0;
      }
      100% {
        opacity: 1;
      }
    }

💡 Usage

  • Go to /listings to view all listings
  • Visit /user/login to log in and access user-specific features
  • Use /user/signup to create a new account

Feel free to contribute to this project or raise any issues. Happy coding! ✨🚀


You can use this as a basic template for your README file, incorporating animations as visual cues to engage users.

About

Wanderlust is a travel-based platform inspired by Airbnb, where users can browse and book various listings, leave reviews, and manage their profiles. The website allows users to explore different locations, book accommodations, and interact with the community.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published