Inspired by Yelp, Filter is a single page app which publish crowd-sourced reviews about coffee shop businesses. Users can interact with the webapp via searching for coffee shop businesses, or writing reviews on a specific coffee shop's business page.
- Utilized Google Maps API to dynamically display business locations on a map and provide directions to the business based on user input
- Used Redux to create a single page app to dynamically render React components without a refresh
- Stored image uploads in the cloud using AWS S3, reducing server load and allowing app to scale gracefully
- Conducted authorization checks using React hooks, redirecting users to secure paths based on credentials
- Created relational databases using Python and SQLAlchemy to easily sort and find related table information
- Adhered to React and ES6 best practices to generate a true single page reactive web app experience
- Reduced needed PostgreSQL database tables by 25% and heavily DRYed up backend code by utilizing one-to-many tables on the database level
-
Clone this repository
git clone https://github.com/Kxvin1/filter.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 must log in in order to access the website
-
Users can log into an existing account or sign up. Alternatively, users can test the site with the Demo Login feature.
-
Login Modal
- Signup Modal
- A User that is logged in will gain additional links to their navigation bar: Home, Add Business, Quick Search, and Log Out. The footer will also disappear.
- Home Page
- When hovering over a listing a shadow will appear to let the user know which shop is the point of focus.
- Clicking on 'Business Details' will redirect the user to that specific shop's details page.
- When a User clicks on a Business, they are directed to the Business details page.
- This page contains a cover image, an image gallery, a google map of the business' location, a reviews section, a container on the right that scrolls with the page. The container displays a clickable link to the business' website, their phone number, and a link to a different page in case the user wants to get directions to the business (explained in the 'Directions' section below).
-
If the logged in user does not own the business, this is the page they see and the functionality of the page.
- On the left are two buttons 'Write Review' and 'See Photos'
- If Write Review is clicked the user is scrolled to the review section.
- If See Photos is clicked the user is redirected to a page containing of all the business' photos.
- On the right is a section that displays the business' website, phone number, and directions to their business address.
- Below those two is an interactive Google Map displaying the location of the business that the user can interact with.
-
Top Section
- Photos Page
- Amenities Section (Yelp Style)
- Reviews Section
-
To achieve a cleaner look on the site, the edit and delete icons only show when the logged in User wrote the comment themselves.
- Wrote the review
- Did not write the review
-
Users can leave a rating here, as well as leave a review.
- Edit Review Modal
- Delete Review Modal
-
If the logged in user does own the business, they gain additional functionality in addition to all the functionality as a non owner:
- Business owners can edit the business listing details
- Business owners can delete the business listing
- If a business owner clicks on 'See Photos' they are redirected to the same page but this time can delete any photo even if they are not the owner of the photo
-
Top Section (additional buttons as an owner)
- See Photos Section
- Edit Business
- In 'Add a Business' a User can create their own Business listing.
- Users can add images via drag and drop
- Address, latitude and longitude are automatically filled out via Google Maps API once the user selects a location
- Proper error handling to ensure all information is input correctly and within the site boundaries
- A User that owns the business listing can also edit the business details
- The layout and functionality is similar to the Add a Business page and has the same error handling to prevent incorrect inputs after a business listing has already been created
-
When on any Business page and the User clicks on the address link below 'Get Directions', the User is taken to a page that lets them input a location to show how far away the business is from a user specified origin.
-
Without origin input
- With origin input (auto zooms and pans to make viewing easier)
- If a User doesn't want to type anything in the search bar and just wants to see the best coffee shops, they can click 'Quick Search' at the top
- Quick Search displays Filter's top coffee businesses sorted by their rating
- Displays a 404 page if a user lands on a page that doesn't exist while logged out
- Displays a 404 page if a user lands on a page that doesn't exist while logged out with relevant links since they are logged in
