https://github.com/muhammadm1998/nuxtbnb

An Airbnb-like website. Built with Nuxt.js and using Algolia, Mapbox, Stripe, Firebase Auth and more.
https://github.com/muhammadm1998/nuxtbnb

algolia cloudinary css firebase-auth heroku html javascript mapbox-gl-js mobile-first nuxt railway-app stripe taliwindcss vue vuex webpack

Last synced: 6 months ago
JSON representation

An Airbnb-like website. Built with Nuxt.js and using Algolia, Mapbox, Stripe, Firebase Auth and more.

• Host: GitHub
• URL: https://github.com/muhammadm1998/nuxtbnb
• Owner: MuhammadM1998
• Created: 2022-06-11T00:24:04.000Z (over 3 years ago)
• Default Branch: main
• Last Pushed: 2022-12-11T20:28:04.000Z (almost 3 years ago)
• Last Synced: 2025-02-06T05:43:54.581Z (8 months ago)
• Topics: algolia, cloudinary, css, firebase-auth, heroku, html, javascript, mapbox-gl-js, mobile-first, nuxt, railway-app, stripe, taliwindcss, vue, vuex, webpack
• Language: Vue
• Homepage: https://nuxtbnb.up.railway.app/
• Size: 7.92 MB
• Stars: 2
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# NuxtBnB

An Airbnb-like website. Built with Nuxt.js and using Algolia, Mapbox, Stripe, Firebase Auth and more.

![Website Mockup](./static/Website-Screenshot.png)

### 🔗 Links

- [Live Site](https://nuxtbnb.up.railway.app/)

- [Source Repo](https://github.com/MuhammadM1998/NuxtBnB)

### 🔨 Changelog

This project is built during the Mastering Nuxt course. I used different tools and modified things due to several reasons.

- Made the website responsive on all screens instead of desktop only.

- Enabled searching without start & end date.

- `Firebase Auth` instead of `Google Auth`.

- `Mapbox GL JS` instead of `Google Maps`.

- `Mapbox Geocoder` instead of `Google Places`.

- `Railway` instead of `Vercel`.

### 💰 Test Payment with Stripe

You can request your apartment from the site now, you can use this info for stripe checkout page.

- `Card Number`: `4242 4242 4242 4242`

- `CVC`: Enter any three numbers

- `Expiry Date`: Enter any date in the future.

### ‍💻 Stack

![Nuxtjs](https://img.shields.io/badge/Nuxt-002E3B?style=for-the-badge&logo=nuxtdotjs&logoColor=#00DC82)

![Tailwind CSS](https://img.shields.io/badge/-TailwindCSS-%231a202c?style=for-the-badge&logo=tailwind-css)

![Firebase](https://img.shields.io/static/v1?label=&message=Firebase%20Auth&color=039be5&style=for-the-badge&logo=firebase)

![Cloudinary](https://img.shields.io/badge/Cloudinary-2C39BD?style=for-the-badge&logo=Cloudways&logoColor=white)

![Algolia](https://img.shields.io/badge/Algolia-5468FF?style=for-the-badge&logo=Algolia&logoColor=white)

![Mapbox](https://img.shields.io/badge/Mapbox-4285F4?style=for-the-badge&logo=Algolia&logoColor=white)

![Stripe](https://img.shields.io/badge/Stripe-008CDD?style=for-the-badge&logo=Stripe&logoColor=white)

![Railway](https://img.shields.io/static/v1?label=&message=Railway&color=0B0D0E&style=for-the-badge&logo=Railway)

![Webpack](https://img.shields.io/badge/webpack-%238DD6F9.svg?style=for-the-badge&logo=webpack&logoColor=black)

![VS Code](https://img.shields.io/badge/-VSCode-%23007ACC?style=for-the-badge&logo=visual-studio-code)

![Mobile-First Design](https://img.shields.io/static/v1?label=&message=Mobile-First-Design&color=gray&style=for-the-badge)

Feedback is always appreciated 📝🙏