A very minimalistic Airbnb clone app
Explore the docs »
View Demo
·
Report Bug
·
Request Feature
This is a very minimalistic Airbnb clone app that implements some basic functionalities of Airbnb and it user interface.
-
User registration and authentication
- Credential login with email and password
- Google authentication
- Github authentication
Registration is done with the use of credentials and third party authentication. Name, email and password are used for credential registration while just email and password are used for credential login. I also used google and github for thirdparty authentication(registration and login).
There is no special categories of logged in user or special admin role. There is no email verification during credential login and there is forget password option. Special user or admin role might be added in future for example I might add special admin role for users that can upload and delete movies or adding special user role to subscribed users. I might add other third party authentication option in the future. I might also add forget password and email verification for credential login - Pages and routes protection The packages I used for user authencation and routes protection are:
- Basic actions that users can perform include
-- Listing and deleting your property(O2bnb your home)
-- Property booking and cancellation
-- Favoriting and unfavoriting a listing
-- Check your bookings and reservations
-- Check all your listed properties
-- Search properties by different filter including category and location filter - Image upload using cloudinary
Your listing pictures are uploaded and stored with the use of cloudinary
- Advance property search
You can search properties by different query parameter. You can search properties by location, category, date property is available, number of room, number of guest and number of bathrooms.
- Property Listing
Registered users can listout their properties for rent(O2bnb your home). You select the category you want, the country the property is in, fill out the rest of the form and then create listing
- Responsive user interface
The user interface is made responsive with the use of tailwind css. I used tailwind css for this project because it is one of the best and most popular mobile first css library. 99.99% of the entire css was written exclusively with tail wind css.
- Global state management
I use zustand for global state magement. I used zustand for this project because zustand is light weight, compact, fast, scalable and does everything I need it to do in this project. Also zustand requires less code to use than redux and doesn't rely on a provider
- Database abstration tool
I used prisma for database abstration. I choose prisma because it is compatible with multiple database and it generate data types corresponding to my database schemas.
- Promised-based HTTP Client
I used axios for making http requests to my server. I choose axios because it is simple and easy to use, it is promised based and I can easily handle the errors. axios also has built in XSRF protection, download progress...
- Use of middleware
I used middleware.js file for page redirection for unauthorised users
This is the list of some of the plugins and frameworks I used, check the package.json for a complete list.
|-- components # Reusable UI components
|-- hooks # Custom React hooks
|-- lib # Prisma and server-side utilities
|-- app # Next.js pages, including API routes
| |-- api # API routes for server-side functionalities: it contains both protected and unprotected routes
| |-- auth # API routes for server-side authentication
| |-- components # website reusable UI components
| |-- favorites # website /favorites page: its a protected page
| |-- fonts # contains used font
| |-- hooks # hooks for fetching data
| |-- libs # contains the prisma global variable used
| |-- listings # the /listings page: its a protected page
| |-- properties # website /properties page: its a protected page
| |-- providers # website /providers page: its a protected page
| |-- reservations # website /reservations page: its a protected page
| |-- trips # website /trips page: its a protected page
| |-- types # contains the custom type declaration used
| |-- index.tsx # Main page (Billboard)
|-- prisma # Prisma schema for database models
|-- public # Public assets like images and favicon
|-- styles # Global CSS stylesTo get a local copy up and running follow these steps.
- npm
npm install npm@latest -g
- Clone the repo:
git clone https://github.com/p-hronesis/O2bnb.git
- Install NPM packages:
npm install
- Set up the environment variables:
DATABASE_URL="<your_mongodb_database_url>" NEXTAUTH_JWT_SECRET="<your_next_auth_jwt_secret>" NEXTAUTH_SECRET="<your_next_auth_secret>" NEXTAUTH_COOKIE_AUTH_NAME="next-auth.session-token" GITHUB_ID="<your_github_client_id>" GITHUB_SECRET="<your_github_client_secret>" GOOGLE_CLIENT_ID="<your_google_client_id>" GOOGLE_CLIENT_SECRET="<your_google_client_secret>" NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME="<your_cloudinary_cloud_name>"
- Change git remote url to avoid accidental pushes to base project
git remote set-url origin github_username/repo_name git remote -v # confirm the changes - Push the prisma schema to your database server
npx prisma db push
- In your cloudinary account you will need to create and use an upload present that is unsigned
This project allow users to rent properties and also put out their properties for rent, add a property to their favorite list, advance property search filter and algorithm, delete properties and bookings.
- Add search properties by key words in property description
- Create an algorithm to show user property feed based on their activities
- Integrate payment gateway for property reservation
- User verification before listing
- Verified badge for verified users
- Multi-language Support
- Mandarin
- Spanish
See the open issues for a full list of proposed features and known issues.
Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.
If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement". Don't forget to give the project a star! Thanks again!
- Fork the Project
- Create your Feature Branch (
git checkout -b feature/AmazingFeature) - Commit your Changes (
git commit -m 'Add some AmazingFeature') - Push to the Branch (
git push origin feature/AmazingFeature) - Open a Pull Request
Distributed under the MIT License. See LICENSE.txt for more information.
- Name: Dipe Kehinde
- Linkedin: (https://www.linkedin.com/in/dipekehinde)
- Email: [email protected]
Project Link: https://github.com/p-hronesis/O2bnb
Big thank you to Code with Anthonio