teacherfund / teacherfund_next

A website to fund teachers discretionary spending because the government sucks at it

---

TeacherFund is a charity to support teachers in a way that encourages great teachers to stay, and potentially great teachers to choose teaching as a career path. This includes providing supplemental funds and supplies to school teachers in need.

This repository contains the code for the main TeacherFund website

macOS

To build and view the site locally:

brew update
brew install node
npm install
echo -e echo -e "NEXT_PUBLIC_DEVELOPMENT=1\nENCRYPTION_SECRET=<the_space_needle_is_gorgeous_this_time_of_year>" >> .env.local
npm run dev

The generated site is available at `http://localhost:3001`

Contributing

We welcome any contributions to this project!!

If you're interested in fixing bugs or implementing new features, please see the document How to Contribute.

Building & Viewing

cd into the directory where you cloned this repository, update brew with the latest node version with brew update then install node with brew install node. Then install the node packet manager with npm install.

`It might take around 5 minutes at first if you do not have node or have a deprecated version on your system'

create a local environment file with echo -e "NEXT_PUBLIC_DEVELOPMENT=1\nENCRYPTION_SECRET=<the_space_needle_is_gorgeous_this_time_of_year>" >> .env.local You can swap the provided encryption secret with any 32 bit char string.

Start the server in the current directory

npm run dev

The generated site is available at http://localhost:3001

Styles

1. Types
2. References

Types

• 1.1 Primitives: You must work directly on its value when you access a primitive type.

License

MIT

teacherfund_next's Issues

add in global font specifics according to style guide

Header: Oswald medium, 20 pt font, 24 pt leading
Text: Lato regular, 12 pt font, 16 pt leading
Pull Quote: Lato light, 40 pt font, 50 pt leading

Audit styles

Make sure our global styles make sense for a top level mobile first project and audit for duplicate styles

move text transformations into css

instead of 'home'.toUpperCase() we can use something more like { text-transform: uppercase }

Donate page IMG conflicting with the rest of the page.

On the donate page the image seems to be conflicting with the whole layout. The ".absolute" class and "position", look to be part of the culprit. This is blocking out the donate form and any other information that might be on the page.

Use blurhash to quickly load images

Use blurhash to quickly load images from DB while larger images are downloaded

https://github.com/woltapp/blurhash

this will need backend support

Figure out where to host images

cdn or compressed within build?

should we load smaller images on mobile first?

Footer does not redirect to /aboutus page

I will create a PR in a moment to fix this.

Make apply and donate buttons clickable on index page (get involved section)

For some reason the two buttons aren't clickable (i'm assuming it's because of some z-index garbage). code is in index.js Get Involved section

screenshot:

Style donate page mobile first

for mobile: no background image, just some room to breath around "donate form" and no subtext section

for desktop: donate form on left and subtext section on right with background image of /static/images/pencils.jpg

Option 1 and option 2 toggle to be used on login / register page as well as donate page

make home page mobile friendly

style up the mobile first styles of the index.js page

Create blog page

Create blog page with similar design to https://www.charitywater.org/stories/

(specifically this portion of the page)

with a list of blog posts with a one sentence summary + picture, then a read more link to take user to a full page with the full blog post plus multiple pictures rendered.

this should be a page for blog posts and pictures for TeacherFund updates.

Add mobile nav menu

Once the width of the screen is too small we need a navigation change for the nav component.

Let's decide what kind of layout / menu we want. I am proposing:

Logo on left and a hamburger icon on right that when clicked displays a dropdown with the menu items with flex-column

Do accessibility audit (screen readers) of the site

Make sure our site meets a11y standards (https://www.w3.org/WAI/standards-guidelines/wcag/)

implement register form component

Rough design. DO NOT need 13 year old consent or "I'm signing up for...." dropdown.

find hourglass react component

Fine hourglass react component to display on our work page as to how much money is in our coffers

Add underscore to partial scss files.

Refactor with an "_" before the file name for any styles that are being imported.

For example aboutus.scss -> _aboutus.scss

in main.scss @import 'partials/_aboutus.scss';

Explanation from sass site

A partial is simply a Sass file named with a leading underscore. You might name it something like _partial.scss. The underscore lets Sass know that the file is only a partial file and that it should not be generated into a CSS file. Sass partials are used with the @import directive.

add linting

Add npm run lint support and potentially lint pre-push or pre-commit.

Audit desktop design

This issue can be closed once a careful eye has examined the current website and confirmed that it conforms to the design.

• The main page
• The donate page

Any deviations from the design can be logged and fixed as a part of this issue.

Add paypal button to donate page

Add OR donate with paypal button to donate page

set body of donate page to 100%

Set body of donate page to 100% so the footer is by default below the view port

Email list form needs better validation

The subscribe method in index.js does not have any validation for the inputs. Right now it is assuming there will be a first and last name typed into one input, i feel like that could cause some issues for us and we might want to change how that works (open to discuss).

The email definitely needs a regex validation before submit so that would be the first definite task.

Add list view of all donations in account.js

account.js page currently has a modal with how much a user has donated

change that to a list that renders a list of dummy data (date, amount: number, status: string)

to test: can access the page by running the app and forcing the url to /account. dummy data can live within account.js

Refactor SCSS structure

This project could really benefit from using BEM styling across all styles.

I would avoid having all of the classes be camel case.

Part One

A lot of the scss files are just css inside a scss file. One big thing is minimal to no nesting. donate.scss almost follows these guidelines but does not have any nesting.

For example in emailcapture.scss:

Currently

.emailCaptureContent {}
.captureInput {}
.captureButton {}
.captureInput > input {}

Should Be

.email-capture {
    &__content {
        @media screen and (max-width: 600px) {}
    }
    &__input {
        input {}
    }
    &__button {
        @media screen and (max-width: 600px) {}
    }
 }

Part Two

Use variables as much as possible. Definitely want to use:

$small-screen: 600px
vs typing that value across the app

Update readme

update readme with up to date info about the project, goals, how to debug, how to test, and how to contribute

add tests / testing framework

choose a testing framework and get some basic component unit tests written

Fix responsive styles

Fix main header section:

• adjust section width on small and medium screens
• Address x-small width mobile styling
• Fix "what we provide" content image from 500px to ~740px
• add same content image on small screen

implement table for our work page with all payout and payment info

create basic table with all info of cash inflows and outflows pulled from the API. this belongs as a component to be used in the ourwork.js page

ensure footer is always at bottom of page (initially off screen) for each page

Fix styling like this where the footer is on page initially when it should be off

add background image to login/signup page

add abc_blackboard image to fill background of signup/login page.

TwoItemSwitcher text camouflaged with the background

Hi there! I'm a student hoping to get into some open source development. I've built the project and was looking at the SCSS structure issue, but realized that the TwoItemSwitcher text's color was matching with the white background making it impossible for me to see the option. Small issue, but I've made a pull request anyways to change the text color.

Create different size images

Currently our images are too big. The header image we're using is 4mb. Loading on mobile is slow.

Acceptance criteria:

• There are small, medium, and large versions of each image
• All images are compressed to the highest amount that does not affect human-eye quality
• Which size image is loaded is based on the screen size of the website user

In the near future, there may be different images for different screen sizes (not just different image sizes), but this is a good step to take in the interim.

Componentize repeating elements

We have a lot of elements that can be turned into components in order to DRY up the codebase.

For example:
Any of the info / statistic cards

Todo:

• Turn any common element into a reusable component
• Make component styling consistent

add post-login and post-registration pages

Since registration/login are both email based, we need a page to redirect to after each that tells the user to expect an email.

Pass query string param of login type on nav button clicks to load login form on right setting

Currently, if I click "I'm a teacher" within the nav, the login form loads but with the default setting of "i'm a donor" selected in the toggle above the sign in form.

let's pass a query string param ?type=teacher with the navigation with "I'm a teacher" is selected, and then grab it off the query string param in the login page and pass it in as a prop to the loginForm component.

Make site fully responsive

Complete styling by making sure design works on medium mobile screens and that the site is fully responsive when window is resized

wrap authenticated routes in a redirecter

currently you can directly access /account (not sure what other pages assume a logged in state). it should instead redirect to either the home page or the login page. this might be able to be baked into the existing HOC.

implement react google maps for our work page

Implement basic outline of react google map for the "our work" page

https://tomchentw.github.io/react-google-maps/#introduction

the map should belong in a component which can be used in the ourwork.js page as well as the account.js page (coming soon). it should take in markers to display as props

show password does not work

In the \signinregister page in password field when typed a password show button doesn't work. I can try and see if i can do a PR for this.

make API singleton

create an api singleton for all API calls

Make two item switcher button text vertically centered

Center vertically the two item switcher text

code in: twoItemSwitcher.js
screenshot of bug:

Make the stripe info input the same width as the other donate form divs

Styling issue -> use taychons.io/docs

The width of the stripe input is slightly too large. using the taychon styles, align the width with the other inputs in components/donateForm.js

See screenshot for bug:

Implement small screen design

We have designs for medium sized screens:

• The main page design
• The menu
• The donate page

Acceptance criteria:

• theteacherfund.com, when loaded on small sized screen (viewport size 375x666), conforms to the designs linked above

Improve SEO of site

Use basic methods outlined in this site to improve SEO via the head component

https://moz.com/blog/the-ultimate-guide-to-seo-meta-tags

implement twitter "Spread the word" tweet feature

When a user donates, our app takes them to the /success page. here, we want a button that says "Spread the word" (currently commented out) which will redirect them to twitter with a pre-filled tweet saying

"I just donated to The Teacher Fund, check it out at theteacherfund.com"

Anti pattern for account buttons

• The buttons array is outside the component, so changes to it will persist across app state changes (logging in and out / changing pages does not reset the buttons array)
• The splicing of the buttons array happens in the component's render function, which is called on every state change or props change -- for instance, opening/closing the drawer would re-call the render function and if the user is still logged in, re-remove and re-add the Account button to the buttons array

TeacherFund_next/components/nav.js

Line 40 in 0b11ed5

buttons.splice(1, 1, { key: 'nav-link-/account-account', href: '/account', label: 'Account' })

Implement login form component

implement login page for donors or teachers

should have a toggle at the top for "Teacher" or "Donor"

form input for email, password
button for "Sign in".toUpperCase()

and link below for "forgot password"

Implement medium screen design

We have designs for medium sized screens:

• The main page design
• The menu
• The donate page

Acceptance criteria:

• theteacherfund.com, when loaded on medium sized screen (viewport size 768x1024), conforms to the designs linked above

add in production api src link for google map src link in ourwork.js

make linting a little easier

We should update npm run lint to run standard --fix so spacing issues are solved automatically.

Up for discussion, we could add a pre-push hook that runs the linter (and any unit tests) as well.