Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/bryancastillo10/airbnb-clone
Airbnb Clone: Imitating the core features of Airbnb for onine booking transactions to enhance my frontend development skills
https://github.com/bryancastillo10/airbnb-clone
full-stack-web-development mongodb nextjs react tailwindcss typescript
Last synced: 5 days ago
JSON representation
Airbnb Clone: Imitating the core features of Airbnb for onine booking transactions to enhance my frontend development skills
- Host: GitHub
- URL: https://github.com/bryancastillo10/airbnb-clone
- Owner: bryancastillo10
- Created: 2024-06-10T05:50:12.000Z (8 months ago)
- Default Branch: master
- Last Pushed: 2024-09-02T11:31:28.000Z (5 months ago)
- Last Synced: 2024-11-20T17:51:40.880Z (2 months ago)
- Topics: full-stack-web-development, mongodb, nextjs, react, tailwindcss, typescript
- Language: TypeScript
- Homepage: https://airbnb-testclone.vercel.app
- Size: 607 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
### Airbnb Clone
## Full Stack Web Application Using NextJS, Tailwind, TypeScript, and MongoDB### Project Preview:
![alt text](image.png)Deployed at: https://airbnb-testclone.vercel.app/
### Tech Stack Learned in this Project
This full stack web application projects mimics the core features of the popular hotel & leisure accomodation
booking app utilizing different tools/technologies:![Static Badge](https://img.shields.io/badge/Next_JS-%23111000?style=flat-square&logo=nextdotjs)
This popular frontend-framework combines the nature of both traditional and modern web development. It enhances search engine optimization through its default server-side rendering while allowing the developer to customize some components to client side rendering which then gives developers a faster way to build UI and virtual DOM manipulation by React.
![Static Badge](https://img.shields.io/badge/Tailwind_CSS-%23111000?style=flat-square&logo=tailwindcss&logoColor=%2306B6D4)
Utility-based styling of the website which is a more pragmatic approach than the traditional CSS. Through this tool/tech stack, developers can use the fundamental styling with CSS with pre-built classes and customize. There could be a disadvantage to this such as it can make the codebase unreadable when several utility classes were applied yet you can refactor those codes to be in a modularized .css file.
![Static Badge](https://img.shields.io/badge/Typescript-%23111000?style=flat-square&logo=typescript&logoColor=%233178C6)
The superset of Javascript which restricts the developer to provide data types or interfaces to every function, component, or variables ensuring to reduce some runtime errors when the code base proceeds to production. Another key benefit of Typescript, is whenever the developer had written hundreds to thousands of variable declarations, it provides a hint on what is the data type and structure of the data allowing readability for maintenance and for future improvements of a project.
![Static Badge](https://img.shields.io/badge/Mongo_DB-%23111000?style=flat-square&logo=mongodb&logoColor=%2347A248)
One of the most popular No-SQL database or a document-oriented database which offers a faster production-ready capability for developers working on small to medium-scale projects. One of the key benefits of this is it provides a free tier of a cloud-based platform in Atlas to allow developers learn with convenience of making their projects ready for production.
![Static Badge](https://img.shields.io/badge/Prisma-%23111000?style=flat-square&logo=prisma&logoColor=%23F4F3F2)
Versatile and robust object relational mapping tool that can be used for either SQL or No-SQL type of database which allows developer provide queries with ease. As a developer with only have the fundamental knowledge on SQL queries, I can maximize my database operations into intermediate to complex ones utilizing a friendly-tool like Prisma.
![Static Badge](https://img.shields.io/badge/Leaflet_JS-%23111000?style=flat-square&logo=leaflet&logoColor=%23199900)
A popular open-source Javascript library for building interactive maps and was also used recently on the data science field. Through this library, I was able to add some hypothetical locations with an interactive UI map to my project. This allows user of Airbnb clone to pick their country in Airbnb your home options.