Inspired by Airbnb, VacayNStays is a single page marketplace app where users can book vacations at luxurious and unique spots. Users can search for spots and either book stays at these spots, create their own spot or leave reviews for spots.
- Enhanced user experience by utilizing Google Maps API to dynamically display the location on a map as well as additional map functionality such as directions, zooming, and panning on the map based on user input
- Incorporated Redux architecture's unidirectional data flow with React for predictable state and reliable DOM rendering
- Implemented CRUD features for Spots, Bookings, and Reviews
- Used Werkzeug to hash user passwords and store them in the database to implement access control lists
- Managed scheduling and booking CRUD through custom transactional database operations using PostgreSQL
- Connected the Python back end to AWS S3 for media storage and organization while maintaining content security with AWS IAM
- Created relational databases using Python and SQLAlchemy to easily sort and find related table information
-
Clone this repository
git clone git@github.com:Kxvin1/vacay-n-stays.git
-
Install dependencies
pipenv install --dev -r dev-requirements.txt && pipenv install -r requirements.txt -
Create a .env file based on the example with proper settings for your development environment
-
Setup your PostgreSQL user, password and database and make sure it matches your .env file
-
Get into your pipenv, migrate your database, seed your database, and run your flask app
pipenv shell
flask db upgrade
flask seed all
flask run
-
To run the React App in development, checkout the README inside the
react-appdirectory.
IMPORTANT! psycopg2-binary MUST remain a dev dependency because you can't install it on alpine-linux. There is a layer in the Dockerfile that will install psycopg2 (not binary) for us.
- A User that isn't logged in can browse the catalog of spots.
- A User that isn't logged is not able to click and view the details of the spot.
- The User will be redirected to a 403 FORBIDDEN page if they attempt to access a page they are not allowed to until they log in.
- Users can log into an existing account or sign up. Alternatively, users can test the site with the Demo Login feature.
- A User that is logged in will gain additional links to their navigation bar: My Spots, Trips, Post A Spot. The footer will also disappear.
- When hovering over a spot arrows appear so the user can easily view all of the images of the spot.
- In addition, if the User's cursor stays hovered on an image, every 2.5 seconds the image will auto slide to the next without having to click.
- When a User clicks on a Spot, they are directed to the Spot details page.
- This page contains a cover image, an image gallery, a booking calendar, a map of the spot, and a reviews section.
- On the left is a clickable image gallery that pops up an image modal to display all of that Spot's images.
- On the right is a calendar that allows a User to book a stay at this spot.
- Below those two is a Google Map displaying the location of the spot.
- Image Modal
- The Spot's reviews are shown here and all the User reviews are calculated to display an average via the ratings bar.
- To achieve a cleaner look on the site, the edit and delete icons only show when the logged in User wrote the comment themselves.
- Users can leave a review rating here, as well as leave a comment.
- When clicking on 'My Spots' the user is redirected to a page that contains a list of all the logged in User's created spots.
- When a User hovers over a marker on the map and clicks it an image modal pops up with details of that specific spot.
- When a user hovers over a spot, 3 buttons appear: Click to view on map, an Edit button, and a Delete button.
- Clicking on the red Click to view on map will pan the map to that specific spot
- In 'Post A Spot' a User can create their own listing.
- Users can add images via drag and drop
- Address and latitude and longitude are automatically filled out via Google Maps API
- A User can also edit a spot
- The layout and functionality is similar to the Post A Spot page
- When clicking on 'Trips' the user is redirected to a page that contains a list of all their upcoming and previous bookings.
- When hovered over a specific trip and the trip is under Upcoming Trips, 2 buttons appear: A Delete button (trash icon) and a Get Directions button
- When hovered over a specific trip and the trip is under Where You've Been, no buttons appear. These past trips can't be deleted.
- When in 'Trips' page and the User clicks on Get Directions, the User is taken to a page that lets them input a location to show how far away the Booking Spot is from that origin.
- This is the page that displays when a user accesses the search bar.
- On the left, they are shown a list of all the results of the search that met their criteria.
- On the right is a Google Map of all the spots with their respective locations marked on the map that display as that spot's price per night.
- When a User hovers over a marker on the map and clicks it an image modal pops up with details of that specific spot.
- When hovering over a specific spot, a clickable button appears "Click to view on map" that will zoom into the map to that specific spot.
- The map zooms and pans to that spot to show the surroundings and any nearby shops that might interest the user.
- If a User navigates to a page that doesn't exist, they are met with a Page Not Found and are given links to redirect them to different pages of the site.
