Giter VIP home page Giter VIP logo

clhenrick / am-i-rent-stabilized Goto Github PK

View Code? Open in Web Editor NEW
34.0 2.0 13.0 7.99 MB

A web app to inform NYC residents about rent stabilization

Home Page: https://amirentstabilized.com

Shell 0.17% JavaScript 69.25% HTML 1.79% Handlebars 10.09% SCSS 13.32% Dockerfile 0.23% Python 2.11% Makefile 1.77% PLpgSQL 1.28%
civictech civic-tech nyc new-york-city rent-stabilization carto informs-nyc-residents housing-data pro-bono

am-i-rent-stabilized's Introduction

Am I Rent Stabilized?

A mobile friendly, multi-lingual web app that informs NYC residents about Rent Stabilization by simplifying the process of how to find out if their apartment may be rent stabilized, if they are paying too much rent, and what to do about it.

See it in action at amirentstabilized.com.

Develop

Requires familiarity with the Command Line Interface, as well as installations of NodeJS v16.13.2 and Yarn ~v1.22.

Note it is recommended to use Node Version Manager (nvm) to switch between different NodeJS versions in a shell.

Available Scripts

Note that the following commands assume to be run from the ./app directory.

First be sure to install the required 3rd party dependencies:

yarn install

To start have Webpack watch for changes and serve the site using Webpack Dev Server:

yarn start

To create a production optimized build (will output assets to the app/dist directory):

yarn prod

To run the tests in watch mode (highly recommended during development!):

yarn test:watch

To debug Webpack build issues, create a "debug" build by doing:

yarn webpack:debug

To serve the assets of the production build do:

yarn start:prod

Other

The handlebars-loader Webpack loader handles the .hbs file extension so Webpack won't complain. It will automatically look for any Handlebars partials in app/src/hbs_partials and helpers in app/src/hbs_helpers.

Note that any newly added Handlebars partials will need to be registered with Jest in order for the unit tests not to break. See src/setupJest.js for how this is done.

Updating the Site's Content:

The app uses Handlebars.JS for translating content between three supported languages: English, Spanish, and Chinese. Any changes made to any of the written content in any of the HTML pages will need to be reflected in the corresponding locales JSON and potentially the Handlebars template files.

These files are located as follows:

  • app/public/locales: JSON files for locales. The naming convention used is [page name]-[language code].json.
  • app/src/hbs_templates: Handlebars template files that correspond to the websites HTML pages

Note that in both sets of files main maps to index.html

Additionally, all supported languages are specified in app/src/constants/locales.js.

Adding a New Translation

Adding a new language translation will require:

  1. New locale JSON files for each corresponding HTML page
  2. Updating the constants LANG and IN_LANG in app/src/constants/locales.js
  3. Updating the UI to display the new language option. The corresponding UI files are:
    • The Handlebars language_toggle partial
    • The Components languageToggle.js and languageToggleButton.js in app/src/components.

If many languages are to be supported in the future, then a dropdown / select menu may be more appropriate than individual language toggle buttons.

Note that currently "right to left" languages are not supported in the UI.

Data Sources and Processing:

See the data/ directory for a Makefile and Docker container configurations for generating the app's data.

The processed data is hosted and publicly available for download on CARTO.

Credits

  • Big thanks to Caroline Woolard for suggesting the idea to me.

  • Jue Yang designed the awesome building graphics which informed the overall redesign of version 2 of the site.

  • Eric Brelsford and BetaNYC provided motivational and technical support.

  • Radish Lab contributed the design mockups for version 2.

  • John Krauss provided data for NYC properties that should have rent-stabilized apartments due to receiving tax exemptions from state programs such as 421a. (You can learn more on the the repo for nyc-stabilization-unit-counts).

Fullscreen Slides with GSAP's TweenLite, CSSPlugin and ScrollToPlugin Credit

Forked from Chrysto's Pen Fullscreen slides with TweenLite, CSSPlugin and ScrollToPlugin.

A Pen by Captain Anonymous on CodePen.

License.

LICENSE

Creative Commons Attribution-NonCommercial (CC BY-NC)

In other words: Not For Profit!

am-i-rent-stabilized's People

Contributors

aryanj-nyc avatar clhenrick avatar dependabot[bot] avatar jueyang avatar laurajbarros avatar mattfelsen avatar ryanhanwu avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar

am-i-rent-stabilized's Issues

Use new GeoSearch API

Hello! First of all, thank you for creating and maintaining this awesome tool. I just used it myself.

For what it's worth, I think we can improve the geocoding experience by using the new GeoSearch API that my team at DCP released. It is an autocomplete API like Google Maps (each keystroke is a new request to find possible matches). All suggested matches return a BBL, which can be used as a lookup in PLUTO. Currently, GeoSupport's API requires an additional step of selecting borough, and I think autocomplete is an overall better user experience.

Our team uses our new API in several in-production applications.

Thanks for your time, and if I can help, let me know! Happy to pull request.

fix mobile layout issues

Safari iOS:

  • fix position of search button for address form
  • allow scrolling on tenants rights modal
  • fix vertical centering on last slide and checking sprite
  • fix column height for when local tenants-rights groups == true

center map on marker

For some reason after multiple searches the map doesn't always center on the marker.

Reinstate local tenants rights group search

I didn't get around to this in #58 and it should be added back.

Requirements:

Data

  • tenants rights groups spatial search query made to the CARTO SQL API
  • redux boilerplate for fetching data, storing state
  • firing the redux action for the query after an address search has been made

Sample Query:

SELECT 
  name, 
  full_address, 
  email, 
  phone, 
  description, 
  service_area, 
  website_url 
FROM nyc_tenants_rights_service_areas
WHERE ST_Contains(
  the_geom,
  ST_GeomFromText(
    'POINT(' || -73.957585 || ' ' || 40.65803 ||  ')',
    4326
  )
)

UI

  • a modal component (could possibly combine with rent-history modal?)
  • logic to update the text in the slide that links to the modal
  • move the Handlebars template currently in the <script> tag in the index.html page to its own .hbs partial

When geocoding address search, check for "message": "NON-ADDRESSABLE PLACE NAME..."

When the GeoClient API doesn't recognize an address, it may still return a BBL which could result in an incorrectly geocoded address. It does however, return an error message such as:

"message": "NON-ADDRESSABLE PLACE NAME, BRIDGE, TUNNEL OR MISC STRUCTURE NOT FOUND"

The callback of the GET request to the GeoClient API should check for such a message, and if one is returned it should ask the user to try searching the address again:
https://github.com/clhenrick/am-i-rent-stabilized/blob/master/app/js/app/app.map.js#L68

Here's an example API call that returns such a response when searching for "One Metro Tech Center, Brooklyn":
https://api.cityofnewyork.us/geoclient/v1/address.json?houseNumber=One&street=Metro+Tech+Center&borough=Brooklyn&app_id=REDACTED&app_key=REDACTED

Problematic Scroll Behavior

Really impressed with your app! Thanks so much.

When using it I noticed a bit of a bug with the scroll behavior that makes it a bit difficult to use. The left side scroll indicators don't click and there is no ability to go back to change the address. Additionally if I use the scroll on my mouse it always bring me to the bottom of the page. No way back up.

I made a short video here: https://drive.google.com/file/d/1k0PSXm9RWbCdspoMPUoYvl58p7nnRS2X/view

These are small issues. I bring them up because the app is the best I've seen this for this information and I want more people to use and enjoy it!

Thanks again for this great project!

RFP: Replace Handlebars with vanilla HTML and a localization JS library

The benefits of ditching the HandlebarsJS based translation implementation and instead using vanilla HTML with a localization JS library such as i18next would be:

  1. The page would at least still load if JavaScript was disabled by the user
  2. A localization library could also help with supporting other important features relating to localization such as date/time formatting
  3. Would possibly make the HTML markup a bit easier to maintain?

Could probably keep/utilize the current implementation of the locales JSON files in app/public/locales

add FAQ and About pages

topics to include:

  • Rent Stabilization vs. Rent Control
  • Determining Rent Stabilization
  • Determining Rent Control
  • Governmental orgs: HPD, RGB, DHCR, HDC, TPU, etc.
  • Housing Rights Groups and Legal Services
  • How it's easy for landlords to lie / not register
  • Why file a complaint
  • Buyouts: why they're bad
  • Landlord Harassment& how to deal with it
  • Next steps / Get Involved

Responsive UI

Here are some break points that need to be designed around, probably will also benefit to dry-ify some CSS.

Tablet

Main Page:

Portrait View breakpoints:

  • map slide give more margin to top
  • fix address search slide
  • fix font size for options
  • more even spacing on last slide

Landscape View breakpoints:

  • fix elements on slide 2 for address search
  • fix spacing / size of elements on calendar slide

Mobile:

Main Page

Portrait View breakpoints:

  • Q: What is the best way to detect mobile? max-width or min-width?
  • 420px:
    • solution: using max-width 420px
  • Q: height varies a lot in mobile (eg: iPhone 4 vs. iPhone 6plus),
    should solution be to design multiple layouts based on mobile height?

Desktop

Main Page

Height based break points:

  • 565px:
    (small screens as well as landscape view on mobile)
    • bottom arrow crashes into text
    • last slide share icons disappear
  • < 640px: on slide 2 the 'select borough' dropdown goes below window.

Width based break points:

  • 980px nav bar lists crash into Title
    • solution: toggle hamburger icon
  • 980px address input crashes into progress circles
    • solution: stack input & drop down
  • 1100px: <h1> tags crash into language toggle
    • Q: how to balance this without stacking the text too much?
      make the font size smaller?

Why, How Resources Pages

Width breakpoints:

  • 980px: content crashes into side nav
    • fix by making flexible columns?

Fix mail to and tel links for DHCR

  • make email a mailto: link
    • prefill the subject and body with sensible defaults
  • make the telephone number a tel: link
  • explain what DHCR means

clean up URL hash for better site nav

The pages "why it matters", "how it works", and "resources" should appear in the url hash like amirentstabilized.com/how/, amirentstabilized.com/why/, amirentstabilized.com/resources/.

fix bug with address entry on android devices

On some android mobile devices when the user selects the address search, the keyboard display shortens the height of the browser's window causing the css media query to display the landscape message and thus not allowing the user to actually enter an address.

solution: Use media query to detect device rotation instead of height.

Add 404 page

will require translations (locales JSON files) and a Handlebars template

add Flatbush Tenant Coalition to tenants rights groups

"We are a program of Flatbush Development, but we run as our own unit within the organization. I'm wondering if you could add us to the resource section (same office as FDC) -- please feel free to use my email address and telephone number: ftcoalition [at] gmail [dot] com 718.635.2623"

Add Housing Orgs: Rentlogic & HRI

Rentlogic:

Rentlogic helps people find out everything about an apartment before they sign a lease, including mold, bedbugs, vermin or if the landlord has a history of tenant harassment

Rentlogic ayuda a la gente a encontrar todo lo necesario sobre un apartamento antes de firmar un contrato de arrendamiento incluyendo información sobre moho, chinches, bichos o si el propietario tiene una historia de acoso al inquilino.

在您签订租约之前,您可以借助Rentlogic了解您公寓的一切:房里是否有霉菌?臭虫?老鼠?抑或是房东是否对曾经的租户进行过*扰?

HRI:

HRI is a legal mobilization effort that systematically and proactively investigates rent fraud in rent stabilized buildings and connects tenants to legal support

HRI es un esfuerzo de movilización legal que investiga de manera sistemática y proactiva cualquier caso de renta fraudulenta en edificios de renta estabilizada y que conecta a los inquilinos con apoyo legal.

HRI是您随时随地的法律后援团,竭诚为您提供房租欺诈调查与法律支持的服务

fix links in resources page

  • somehow the URL's got out of order in the list of organizations starting at Make the Road NY.
  • there is a repeat of Eviction Intervention Services that links to the resources page, this should be removed completely.

disable user scrolling

Don't show all parts of the UI initially — you can scroll down to see things you shouldn't.

Add more examples of tenant harrassment

From http://www.neighborhoods.nyc/index.html > Tenant Protections:

It is illegal for building owners to force tenants to leave their apartments or surrender their rights. If you are a tenant in an apartment in the City who is being harassed by your landlord, you can get information and help. You may be eligible for free or low-cost legal assistance.
Harassment of tenants by landlords or owners can include:
Not offering leases or lease renewals, or repeatedly trying to pay you to move out.
Unjustified eviction notices or illegal lockouts.
Threats and intimidation, such as late-night phone calls.
Overcharging for a rent-regulated apartment.
Failure to provide necessary repairs or utilities.
Deliberately causing construction-related problems for tenants, such as working after hours, blocking entrances, or failing to remove excessive dust or debris.

add Stabilizing NYC to resources page

  • url: http://stabilizingnyc.org/
  • description: Stabilizing NYC is a coalition comprised of fourteen grassroots neighborhood-based organizations, a citywide legal service provider and a citywide housing advocacy organization who have come together to combat tenant harassment and preserve affordable housing for the New Yorkers who need it most. This project combines legal, advocacy and organizing resources into a citywide network to help tenants take their predatory equity landlords to task for patchwork repairs, bogus eviction cases, and affirmative harassment.
  • operates in: BK, MN, QN, & BX

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.