Here’s a README with animation elements using markdown to make it engaging:
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.
- 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
- 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 💬
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
Make sure you have Node.js and MongoDB installed. If not, install them first. Then, run:
npm install
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
To start the server, run:
npm start
Now the application will be running on http://localhost:8080
. 🎉
.
├── 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
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.
- Users can sign up and log in to manage listings and reviews.
- Sessions ensure that logged-in users have access to protected routes.
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)
-
Loading Spinners: A loading spinner can be shown while the page loads.
<div class="spinner"> <div class="spinner-bounce"></div> </div>
-
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; }
-
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; } }
- 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.