Coder Social home page Coder Social logo

hackforla / spare Goto Github PK

View Code? Open in Web Editor NEW
32.0 15.0 14.0 77.89 MB

Spare connects people in need of clothing and other essentials with people in the community who have things to spare. It is like a one-on-one Goodwill. We are hoping the donation can be a mechanism for building these connections throughout our community.

Home Page: http://whatcanyouspare.org/

CSS 5.68% HTML 8.29% JavaScript 32.07% Python 50.12% Dockerfile 0.73% Shell 0.73% HCL 1.37% Makefile 1.02%
hack-for-la code-for-america homeless homelessness unhoused django react donation giving donations

spare's Introduction

👕 Spare App Build Status

A project that connects people in need of clothing and other essentials with people in the community who have things to spare. It's kind of like one on one Goodwill. The main objective is to foster interactions between the housed and unhoused. The donation is the mechanism for building these connections throughout our community. \o/

Table of Contents

Project Status

We are currently aiming to launch Spare sometime in late 2019.

Milestones

  1. Complete core functionality required for launch (In Progress)
  2. Prepare demo of app to be presented to partner organizations (TBD)
  3. Launch app and begin accepting requests (TBD)

Ways to Contribute

Also, ping us on the Hack for LA Slack on the #spare channel if you can help. We'd love to have you!

Setup Instructions

1. Clone project repo

git clone https://github.com/hackforla/spare
cd spare

2. Create local env variable file

Copy .env to .env.dev, then edit dev file to change SECRET_KEY value.

(Note the SECRET_KEY value, used by django, can be any string you choose)

cp .env .env.dev

3. Install Docker and Docker Compose

Docker

https://docs.docker.com/install/

Docker-Compose

http://docs.docker.com/compose/install/

Create the docker group and add your user

https://docs.docker.com/install/linux/linux-postinstall/

Add the docker group

sudo groupadd docker

Add your user to the docker group

sudo usermod -aG docker $USER

4. Build Docker images

make build

5. Run Docker containers

make up

At any point, Ctrl-C stops the containers.

Note: On first setup, the server may sometimes start before the database, causing an error. In this case, Ctrl-C to stop all containers and re-run Docker Compose.

6. Run initial migrations and create default superuser and demo data

make init

7. Start local Django server

make serve

8. Log in to Django Admin

You can now log in to the Django Admin for your user at:

http://localhost:8000/admin/

Important URLs

Deployment

Staging

https://hackforla-spare-staging.herokuapp.com/

Changes to staging branch are automatically deployed to above staging server.

Production

https://www.whatcanyouspare.org/

Changes to master branch are automatically deployed to above production server.

Product and Design Contributors

Our project brief is on Google Drive. We are using Github issues to track work that needs to be done. Ping Lex Roman on Slack if you are interested in contributing on the product or design side.

Spare Team

Join our #spare Slack channel - http://hackforla-slack.herokuapp.com/

Spare Team is

spare's People

Contributors

allicolyer avatar calexity avatar cuevaskoch avatar epikkoder avatar j-kusel avatar jimthoburn avatar ltimin avatar markmatney avatar matikin9 avatar ndanielsen avatar ozymandias9000 avatar pmfabel avatar rbhenao avatar shawnadelic avatar thong-pham avatar tonymichaelhead avatar vonetta 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

Watchers

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

Forkers

shawnadelic spare-app haydenbetts gabrielgrover ndanielsen pmfabel tmax818 michaelkma ahrgnuts bullettrang zachurban engr-hasanuzzaman brianscottjones edena1a

spare's Issues

Front End: Add hover to header and confirmation buttons

Add hover state to

  1. top CTAs (request + donate)
  2. confirmation CTAs (request + donate)

Hover state is reverse of button's default state. For example:

  • Brown background button becomes white background with border and colored text

Email (Donor) - Confirmation of donation

Implement email for the donors

When I select an item to donate
Then I receive an email telling me

  • what I'm donating
  • date/time
  • where (location/directions)
  • name/contact info for recipient
  • info about process
  • contact email for Spare team

NOTE

  • If possible, please link location address to Google Maps
  • Please link email addresses to "mailto: [email protected]"
  • Look for [] and make sure any of those that need links are linked

SUBJECT LINE:
Here's the details of your donation!

COPY IS:
Hi there,

Thank you for being a Spare donor! Please meet your recipient on [full date] at [time]. You'll meet at:

[Location name]
[Full location address]

Note: [any additional directions]

As a reminder, you're donating:

  • Item: [Item type]
  • Size: [Size]

Here's who you'll be meeting:

  • Name: [First name]
  • Phone: [Phone]
  • Email: [Email]
    Please keep this information confidential and don't post it anywhere online

If you can no longer make it, PLEASE EMAIL US AS SOON AS POSSIBLE: [[email protected]]. Someone is counting on you.

If you are running late, PLEASE CALL the recipient (if there is a contact number above in this email).

If the recipient does not come within 15 minutes, you can leave the item with The Shower of Hope staff, you can give it to another person receiving shower services or you can take it home with you and try to find another match.

Thank you,
The Spare Team
[[email protected]]

Spare connects people in need with people who have spare stuff. Find us at [whatcanyouspare.org] and on Twitter [@WhatCanYouSpare].

Request Items Form: You should be able to set a "size" for some requested items

  1. Users should be able to request a size for all clothing items except for socks and hats. These items are:
    Shirts, Dresses + Skirts, Pants, Shorts, Jackets + Sweaters, Shoes

  2. A drop-down should accept a user's size input. This dropdown will provide different size options for different items @calexity will provide these lists?:
    Here are the required dropdown items

Shirts: "XXS", "XS", "S", "M", "L", XL", "XXL"
Dresses + Skirts: "XXS", "XS", "S", "M", "L", XL", "XXL"
Pants:

  • Women: "2", "4", "6", "8", "10", "12", "14"
  • Men: "Waist Size 26-28", "Waist Size 28-30", "Waist Size 30-32", "Waist Size 32-34",
    "Waist Size 34-36", "Waist Size 36-38", "Waist Size 38-40"

Shorts:

  • Women: "2", "4", "6", "8", "10", "12", "14"
  • Men: "Waist Size 26-28", "Waist Size 28-30", "Waist Size 30-32", "Waist Size 32-34", "Waist Size 34-36", "Waist Size 36-38", "Waist Size 38-40"

Jackets + Sweaters: "XXS", "XS", "S", "M", "L", XL", "XXL"
Shoes:

  • Women: "4", "5", "6", "7", "8", "9", "10", "11"
  • Men: "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15"
    screenshot 2018-06-26_20-18-52

  1. The size inputted here should update the size attribute in the model

  2. The size should appear here
    screenshot 2018-06-26_20-28-38

Design - Create About page

Design the "About" page. It should include information about:

  • Why this project/website exists
  • The need and homelessness in LA
  • Hack for LA
  • Who's on Our Team

Design - Add more detail to Request Confirmation

Request confirmation needs more clarity on how

  • you will receive the item (who will drop it off/when/where)
  • how we'll notify you that someone is ready to donate
  • how you contact us if there's a problem

Back End: Set up Mailgun backend

I've created an account for Mailgun, which gives us 10,000 free emails per month.

There is some verification that needs to be done (DNS, etc) to get everything set up.

Back End: Add model for drop off times/locations

We probably want to be able to support adding/removing different drop-off times and locations. Probably on the backend since we wouldn't want this hardcode on the frontend.

Not 100% sure how this should work right now, but would probably need the following fields at least:

organization_name
location_name
neighborhood
street address 1
street address 2
city
state
zip
neighborhood
phone
website
frequency (maybe just hardcode weekly for now)
dropoff_times
unavailable_times

dropoff_times will probably relate to another model that stores a time or time range within the week (not a specific date) and would look something like:

date (Monday, Tuesday, etc.)
time (12:00pm), or maybe this would be a start/end time range

We will also probably need a model to store dates to skip or make unavailable (for example, holidays). Not sure exactly how this should be stored.

Neighborhood will be a foreign key to a Neighborhood model, to make requesting as easy as possible.

A link to Google Maps directions or something might be useful too.

All upcoming and available meetup times (within the next 2 weeks) would be exposed via an endpoint that would be fetched by client in order to render the options within the form.

Design - Create Contact page

Design the Contact page. Can be very simple.

Should have:

  • A note about who to contact (aka our Hack for LA team)
  • A way to get in touch with us (probably an email)

Front End: Handle sizes on request submission

We probably don't want to show the size option for all categories when making donation requests.

Ideally, with things like soap, shampoo, etc, the size field should be hidden by default.

We can also restrict sizes based on what type of item (dropdown for S, M, L, XL, XXL, etc.), or we may want to leave it blank for now.

I think will probably involve some changes to constants.js. At the very least, we will need to add a allowSizes boolean to our itemInfo objects. If we want to have pre-defined sizes, we will also need to hardcode those somewhere.

Design - Create a logo for Spare

We need a Spare logo! Would be good if it was more rectangular (meaning not equal height and width - does not actually have to be in a rectangle.)

We'll need an SVG and a fallback PNG.

Copy - Email (Donor) - Confirmation of Donation

Copy for email for the donors

When I select an item to donate
Then I receive an email telling me

  • what I'm donating
  • date/time
  • where (location/directions)
  • name/contact info for recipient
  • info about process
  • contact email for Spare team

Copy is in #90

Front End: About page styling and fix up grid on homepage

Doing as one ticket per @JRKoch

  1. Fix up grid on homepage to be more closely spaced

  2. About page clean up

Front End: Set up about page

This is a little dependent on this design task (#43), but we could at least get one set up for now (I believe there is already a route set up).

Request an item functionality does not work as intended

Here is how the request an item workflow works for 'cat food'

  1. User attempts to request Cat Food.
  2. The following form appears:
    cat_food

Currently, the requested item value that this form submits is (#2) - "Shoes", the value in the drop down.
The user expects this form to submit #1 - "Cat Food"

Per @calexity, the form field listed in #2 should not exist. This drop down should not designate the type of requested item.

Back End: Add more contact fields to DonationRequest model

Here is the prototype for the request form, there is an option to indicate who the donation request is for (yourself or someone else):

https://projects.invisionapp.com/share/YKH1L8TAB56#/screens/291941063

We currently don't have a field to store this info, so our data model needs to be updated.

Not sure if we should store a boolean value indicated whether it's a self-request (something like is_self_request), as well as an additional field for the requester's name, or just the requester's name, which could either leave blank or fill in with their name if it is a self-request.

I'm leaning toward the former option since it gives more info.

Back End - Set up email backend

We will be emailing confirmation links for requests and fulfillments, so we will need something set up on the backend.

Mailgun has a free tier, so that's probably worth a try (https://www.mailgun.com/pricing-features), although they apparently sometimes have a problem with blacklists, so we should make sure emails are going through.

As for how to set this up, for dev/testing purposes, we probably want an environment variable (EMAIL_BACKEND = 'mailgun' or EMAIL_BACKEND = 'console') that will select the appropriate backend, with 'console' as the default.

API keys, etc, should also be set via environment variables.

EDIT:

Just to clarify the implementation a little bit:

Django's email system makes use of email "backends," which implement some common email functionality. Some basic backends are provided out-of-the-box, as well as some which can be used for dev purposes.

For example, the super-handy console backend will print out any "sent" email contents to the server output instead of delivering an actual email to your inbox. This is obviously helpful for dev purposes, since you don't fill your personal inbox with test emails, but you also don't have to wait for your email to be delivered, etc.

Email backends are also available for specific email services (Mailgun, SparkPost, SES, etc.) with the Django Anymail package. Django also has a built-in SMTP email backend, although it doesn't offer as many features as Anymail since it's intended to be more generic. The link above includes some documentation on examples on setting up the email backends.

To do this, we probably want to add some variables to our environment variables files (.env and your local .env.dev). For example, we probably want to create an environment variable EMAIL_BACKEND which could either be set to either 'console' or 'mailgun', the latter would also probably require some additional environment variables (i.e., MAILGUN_API_KEY, etc). This might be a little confusing, since the actual value we're going to set for the EMAIL_BACKEND setting is the full path to the email backend (i.e., "anymail.backends.mailgun.EmailBackend") but the env variable would have a value of "mailgun", mostly to keep our env settings simple.

These variables would then be read in the Django settings file (probably /server/spare/settings/base.py), using Python's "os" library's os.environ dictionary to grab the value of the environment variable and using that to configure the various settings (see SECRET_KEY in base.py for an example of how this is done).

Settings are documented here: https://anymail.readthedocs.io/en/stable/esps/mailgun/

I was thinking it would look something like this:

import os if os.environ.get('EMAIL_BACKEND') == 'mailgun': EMAIL_BACKEND = "anymail.backends.mailgun.EmailBackend" ANYMAIL = { 'MAILGUN_API_KEY': os.environ['MAILGUN_API_KEY'], } # Other settings, etc. elif os.environ.get('EMAIL_BACKEND') == 'console': EMAIL_BACKEND = 'django.core.mail.backends.console.EmailBackend'
And the env variable files would contain EMAIL_BACKEND, and also a MAILGUN_API_KEY, which would only be read/required if using the mailgun backend.

This is kind of a nice setup because it allows you to easily switch between the two backends by just editing your .env.dev EMAIL_BACKEND value, even if you keep the API key value in your env file.

BTW, environment variable changes usually require you to restart your Docker container.

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.