FireBnB

Navigation

Live Site

API Docs

Portfolio

Airbnb

Overview

Firebnb is a full-stack clone of Airbnb. Firebnb has a web based component utilizing PERN (PostgreSQL, Expres.js, React, Node.js). Firebnb also has a mobile based component utilizing React-Native, Redux, Axios, Express.js, and Node.js. Both projects utilize Typescript across the entire stack.

The project aims to replicate the user experience and design of Airbnb's mobile and web applications, while utilizing modern technologies and best practices.

Team:

• Anthony Bronca
• Krystal Kimmel
• Alexi Bettinger

DockerImage:

API image: docker.io/anthonybronca/firebnb-api:latest Deployed image: docker.io/anthonybronca/firebnb

Tech Stack:

• Frontend: React with TypeScript, ensuring type safety and maintainability.
• Mobile: React-Native with Typescript, ensuring type safety and maintainability.
• Backend: Node.js and Express.js, utilizing TypeScript for server-side development.
• Database: PostgreSQL for efficient relational data storage and retrieval.
• Authentication: Implementing secure authentication using industry-standard practices such as hashing and CSRF.
• DevOps: Docker for containerized deployment utilizing multi-stage images, and Amazon Web Services for Image storage.

Features

• Pixel-Perfect Design: Crafted with attention to detail, Firebnb provides a seamless and visually appealing experience, mimicking the aesthetic of Airbnb.
• Mobile and Web based applications
• User Authentication: Secure user authentication and authorization system to ensure data privacy and protection.
• Property Listings: Users can browse through a comprehensive list of property listings with detailed information, high-quality images, and interactive maps.
• Booking System: Implementing a robust booking system, allowing users to easily book properties for specified dates.
• User Reviews and Ratings: Enable users to leave reviews and ratings for properties, contributing to a dynamic and trustworthy community-driven platform.
• Responsive Design: Ensuring a consistent and optimal user experience across various devices and screen sizes.

How to Clone

1. Clone this project. You can also clone a specific branch using: git clone --branch <branchname>

2. Set up Postgres:

   • Ensure you have Post Bird installed
   • Create a Postgres database running the following commands in the terminal:

     psql -c "CREATE USER <username> WITH PASSWORD '<password>'"

     psql -c "CREATE DATABASE <databasename>"

3. Create a .env file in the backend folder and fill it out to match the .env.example file

4. Run npm install in the backend

5. Run npm start to build your migrations, seed data, and get the api started

6. In the Frontend directory, run npm install

7. Then run npm start

Note: For AWS S3 storage, you will also need to follow the below steps

1. Make an account on AWS
2. Make a bucket with a unique name. Make sure to disable ALCs
3. Make an IAM User for this project
4. Add custom policy and apply this .json value:

   {
   "Version": "2012-10-17",
   "Statement": [
   {
     "Sid": "Stmt1420751757000",
     "Effect": "Allow",
     "Action": ["s3:*"],
     "Resource": "arn:aws:s3:::<NAME OF BUCKET>/*"
   }
   ]
   }

5. Attach the policy to the IAM User
6. Add security to your User and grab the API key and Secret key to fill in the .env file within the /backend folder of this project.

For more detailed instructions please see this repo:

AWS PERN Demo Repo

Acknowledgments

• Inspired by Airbnb
• Icons by Font Awesome