justinrusso/apartment-navigator

An apartment listing website created for educational purposes

Hello, my name is

Justin Russo

I'm a full-stack software engineer.

I'm a passionate software engineer driven by the desire to create new, amazing experiences. Since creating my first application for Twitch and seeing it in action, I was obsessed with creating solutions to solve problems and enhance users' experiences.

Connect with me:

My work at a glance:

Languages:

Frameworks, Platforms and Libraries:

Other Technologies:

apartment-navigator's Issues

As a landlord, I want to post my property to attract new renters

• A POST /api/properties route is created
• The data sent to the backend is validated
• A new property is created if the data is valid and the new property is returned
• A /properties/new frontend route displays a form to create the new property
• A button in the navbar is displayed to logged-in users "Add new property"
• The submitted data is csrf protected

As a potential renter, I want to know the sq ft of the units

As a potential renter, I want to know the sq ft of the units so I know the size of the unit and help make better comparisons and purchase decisions.

• Add a new sq ft column to unit_prices and property_units
• Update to_dict() for both models
• Update type defs for the API responses

As a user, I want to search for properties within a radius of a location

As a user, I want to search for properties within a radius of a location to make searching for relevant properties easier.

• When searching, the key is used just for the name of the property.
• Name matches are displayed in a dropdown as the user types
• If a match is clicked, the user is directed to the properties' page
• If the search is submitted, the input data is converted into latitude & longitude and a query based on radius is performed on the database
• A dropdown is shown on /search that allows the user to increase the radius

As a user, I want to register for the website

• A signup button appears on the navbar
• The signup button opens a modal on the current page
• The sign-up page displays a box centered on the page with an email, password, and confirm password form.
• When submitted with valid data the account is created and the user is logged in
• When submitted with invalid data, errors are displayed under each form input field
• A button is displayed on the login page that directs the user to the sign-up page
• Forms are checked for csrf tokens
• The email form has validation to ensure that the input is an email
• The password form has validation to ensure that minimum requirements are met
• The modal closes when the user is logged in

As a user, I want to filter properties by type

• A section in the filter drawer displays "Property Type"
• Inside the section, "Multi-Unit" and "Single Unit" options can be checked

As a user, I want to filter properties by amenities

This depends on #41 to be implemented first.

• A filter button is displayed on the /search page
• When clicked, a drawer slides out displaying all amenities to filter by
• When the filter is applied, the query parameters are updated with amenities with a comma-separated list of ids
• GET /api/properties handles the amenities parameter and filters the query
• The number of filters applied are displayed

As a user, I want to see reviews on properties

As a user, I want to see reviews on properties to make better decisions of what property I might want to rent.

• A list of reviews are displayed on /properties/:propertyId
• An average rating is displayed on the properties' card
• An average rating is displayed on the properties' page

As a user, I want to search for properties by name

• A search bar appears in the home page's Hero section
• A search bar appears in the navbar when not on the home page
• Query parameters are supported in the GET /api/properties route for name
• When the search is submitted, the user is directed to /search with the query parameters that should be passed to the backend

As a user, I want to view available properties to rent

• Models and migrations are created for properties, property_categories, property_units, property_images, unit_prices, and unit_categories are created.
• A seed is created for property_categories with Single Unit and Multiple Units
• A seed is created for unit_categories with Studio, 1 Bedroom, (2-6 ) Bedrooms, and 7+ Bedrooms
• 6 seeds are created at minimum for properties
• A GET /api/properties route is created that returns all properties on the website as an array
• Property cards are added below the Home Page's Hero section displaying all the properties

As a user, I want to view floor plans in a lightbox

As a user, I want to view plans in a lightbox to make viewing them quicker and less obtrusive.

• The floor plan is displayed in a lightbox.
• Clicking elsewhere closes the lightbox.

As an authorized user, I want to save properties of interest

As an authorized user, I want to save properties of interest to easily come back to them later.

• A heart icon is displayed on the properties page and in the properties' card
• If the property is saved, the icon becomes filled instead of outlined
• In the profile dropdown in the navbar, there is a new list item "Saved Properties" directing the user to /properties/saved
• All properties are listed, and can be clicked to direct the user to the properties' page

As a user, I want to see all details about a property

• When a card is clicked, the user is directed to /properties/:propertyId
• All details of the property are displayed
• A historical price chart is displayed Moved to #25
• Pictures of the property are displayed
• Units with floor plans are clickable and will display the floor plan in a lightbox. The image can be clicked again to open in a new tab Moved to #26
• A Contact button appears that opens the user's default email client

Property unit table breaks responsive layout at small screen sizes

The table currently has a min-width that causes the responsive layout to break once that width is met.

As a guest, I want to log in as a demo user to try out the web site to its full extent

• A backend route is created that automatically logs in the demo user
• A button in the login form is displayed that automatically logs in the guest as the demo user

Cannot use decimals in price

As an authed user, I want to edit reviews left by me

• A button next to the review opens a dropdown menu. The menu displays an "Edit" item that opens a modal
• A modal displays a rating star and textarea fields
• A "Update review" button is displayed
• A "cancel" button is displayed
• The data submitted is csrf protected

As a user with saved bookmarks, I want to see them displayed on a map

As a user with saved bookmarks, I want to see them displayed on a map to see where they are relative to myself and other properties.

• The /properties/saved displays a list of properties and a map
• All properties display as a marker on the map
• When the marker is clicked, the properties' card is scrolled to and focused in the list

As a user, I want to search for properties in a specific town or state

As a user, I want to search for properties in a specific town or state to make searching for relevant properties easier.

• The name parameter is changed to key
• The key parameter searches the name, city, and state

As an authorized user, I want to delete my review

• The "more" button next to the review opens a dropdown also displaying a "Delete" item that opens a confirmation modal
• On confirmation, the data is deleted
• The action is csrf protected

As a user, I want the price history of units

As a user, I want the price history of units so I can make better renting decisions

• A historical price chart is displayed
• An average price is used for multi-unit properties per unit category
• The price change over a 6 month period is displayed (+ or - an amount, colored)

As a user, I want to see amenities provided by the property

• property_amentities and amenities database tables are created
• The amenities table is seeded with any amenities we want to support
• In the create and edit forms, an option to add and remove multiple amenities is provided
• In the properties' page, the amenities are displayed

As a user, I want the search bar pre-filled with my current location

As a user, I want the search bar pre-filled with my current location for easier search starts.

• The backend uses the client's request IP to get a general location
• The backend returns that string and populates the search field

As a user, I want to see search results displayed on a map

As a user, I want to see search results displayed on a map to see where they are relative to myself and other properties.

• The /search route displays a list of properties and a map
• All properties in the result are displayed as a marker on the map
• When the marker is clicked, the properties' card is scrolled to and focused in the list

As a landlord, I want to remove my property from the site

• A delete icon appears on the cards on the /properties/manage page
• When the delete icon is clicked, a modal appears to confirm the action
• The delete action is csrf protected
• The deletion of the property cascades to delete all relevant database data

As a user, I want to log into the website with my account

• A button in the navbar is displayed
• The login button opens a modal on the current page
• The login page displays a box centered on the page with an email and password form
• When submitted with valid data, the user is logged in and a session is created
• The user's basic information is stored in the redux store
• When submitted with invalid data, an "Invalid Credentials" error is displayed
• Forms are checked for csrf tokens
• The modal closes when the user is logged in

As a user, I want to upload images directly to the site

As a user, I want to upload images directly to the site instead of providing a link from a 3rd party so I can add images quicker and more easily.

Create Property page

• A box is displayed in place of the url input. The box displays "Drag & Drop to Upload Image <br>or<br><button>Browse Files</button>" with a border and an icon.
• When the "Browse Files" button is clicked, the OS's file browse is displayed and allows the user to select multiple files.
• When the user attempts to drag a file or files, the entire window "glows" indicating the input is detected. Dropping will cause the file(s) to be added.
• Only image files are permitted
• Once files are added, previews of each images are displayed with a delete icon to remove it.
• Additional drag & drops or Browse Files actions will append additional files to an array
• Once submitted, the files are sent to the backend with the other form data and processed as normal. Images are uploaded to S3.

Property Management

• When clicking the modal to add an image, a box is displayed in place of the url input. The box displays "Drag & Drop to Upload Image <br>or<br><button>Browse Files</button>" with a border and an icon.
• When the "Browse Files" button is clicked, the OS's file browse is displayed and allows the user to select only one file.
• When the user attempts to drag a file, the entire window "glows" indicating the input is detected. Dropping will cause the file to be added.
• Only image files are permitted
• Once a file is added, additional drag & drops or Browse Files actions will replace the currently pending image with the newly selected one.
• Once submitted, the file is sent to the backend and uploaded to S3.

As a landlord, I want to give my property a name

As a landlord, I want to give my property a name so my property can be found by its brand name instead of just address.

• A new nullable name column is added to the properties table and migration is created.
• An optional form input is displayed on the Add New Property page

Once implemented, the name should be preferred over using the address1 value if it exists.

As an authorized user, I want to leave a review

As an authorized user, I want to leave a review so other users can make better renting decisions.

• A "Leave a review" button appears on the /properties/:propertyId page
• A new component renders with a textarea and rating stars
• A "Post review" button submits the data
• The data submitted is csrf protected

As a landlord, I want to edit my property listing

As a landlord, I want to edit my property listing so potential renters have the latest information

• A /properties/manage route renders a list of all properties owned by a user. Clicking one directs the user to /properties/:propertyId/edit
• A /properties/:propertyId/edit route renders a page to edit property details
• A button in the navbar directs the user to /properties/manage
• The submitted data is csrf protected

As a user with saved bookmarks, I want to remove bookmarks

As a user with saved bookmarks, I want to remove bookmarks to remove properties I am no longer interested in looking at.

• The heart icon can be clicked to un-bookmark a property.
• From the /properties/saved page, users can un-bookmark a property.