Welcome to the SunShot - RE-volv Reinvestment Improvement Challenge Part 2!

RE-volv is a solar energy crowdfunding platform.  The platform allows individuals to donate to solar energy projects.  RE-volv then re-invests the money the projects' saved by switching to solar into more solar energy projects.

In past challenge we have implemented new concept “Reinvestment Fund” where donors are given monthly funds from projects they funded to reinvest on active Re-volv projects.

In this challenge we are adding more features to support the new “Reinvestment Fund” concept and we will enable social network login and sharing.

Looking forward to seeing your submissions!

Challenge Requirements

For this challenge, we need to design the additional pages and functionality outlined below.

We don’t have available PSD for the existing site pages but you can copy the overall look and feel from existing website : https://revolv-stage.herokuapp.com/. You can screengrab the needed page as the background of your design and apply the additional requirements mentioned below.

General Notes

1. - Set up the RE-volv open-source code according to instructions found here: https://github.com/calblueprint/revolv#installation   You will need to use Vagrant to run the project while developing. Environment Variables setup mentioned here.

2. - Write all new Python code according to the PEP8 coding convention (https://www.python.org/dev/peps/pep-0008/) and using Python 2.7.10

3. - We don’t have an updated UI prototype for the changes requested, try to reuse existing UI components, and use your best judgement for how it should look like. You fixes should work in responsive view.

4. - Updated and new JS/python code should be well documented, use PEP257 for docstring conventions.

5. - Update README file if needed.

6. - Update Seed script for data generation.

7. - Please make sure to create helper/interface to include the common code/functionality.

8. - You can access CMS by navigating to /cms.

9. - You will need to set up a dummy paypal API key and add it to the .  Create a new paypal API key, and make sure it is set to go to the Paypal Sandbox when testing, so you won’t be charged.  Also note that on the RE-volv staging site (https://revolv-stage.herokuapp.com/) a credit card can be used and will not be charged. PayPal is set to testing mode on the staging site.  To run your development server with your paypal keys:

export PAYPAL_MODE=sandbox
export PAYPAL_CLIENT_ID=...your paypal id...
export PAYPAL_CLIENT_SECRET=...your paypal secret key...

Also please make sure your solution is flexible, use facade design pattern and adapter design pattern (and any other proper design pattern) to enable future extensibility of the solution.

Functional Requirements

Definitions

• - "Revolving funds": these are the funds that a given RE-Volv user has to to allocate to new projects on RE-Volv.  You should consult payments/models.py for information about how this works.  Every user who's backed a project has an amount, that varies month to month, that they can allocate to projects in the future.

• - “Donation”: an amount, in USD, that is pledged to a RE-volv project or to the Solar Seed Fund.  When a user makes a “donation” they are giving money directly to a project, or directly to the Solar Seed Fund.  This is different from pledging “Revolving funds” to a project, because pledging “Revolving funds” to a project does not cost the user any money.  Instead, pledging “Revolving funds” deducts from the user’s internal “Revolving funds” credit balance.

Dashboard page

The existing dashboard page (/dashboard/) should be altered in the following ways.  Here is a wireframe of the new dashboard layout:

Specific changes to the dashboard are:

• - The global page layout (header/navigation/footer), which is present on all other pages on the RE-volv site, should be used on the dashboard page.

• - The right column, which previously included a set of project areas (e.g. “Education”, “Faith”) to allocate “Revolving funds” to, should be removed.

• - The left column should be removed entirely.

• - The contribution statistics and graphics should be expanded to three items per row, and collapse responsively (as they do now).

• - A new “Reinvest your $X now!” button is included.  This button should be in the usual site-wide primary button style.  It should link to the “Reinvestment page”, and the button text should include the user’s current “Reinvestment funds” balance.

• - A new “Projects you’ve backed” area is included.  This area replaces the current “My projects” area.

  • - Each item listed in the “Projects you’ve backed” area should be a project the user backed on RE-volv.

  • - Each thumbnail displayed should be the same as the thumbnail on the projects page (/what-we-do/projects/), including completion status and statistics.

  • - Clicking on a project thumbnail takes the user to individual project page.

Emails to donors

• - On the first day of each month, every user who's ever donated to a project on RE-Volv receives an email. Only users who are marked as “subscribed_to_updates” are emailed. We have implemented this Email functionality in previous challenge. In this challenge we want to improve the Email layout.

• - In this challenge we want to improve the Email template :

  • - Subject: "You have $<X> to reinvest in RE-volv clean energy projects!"

  • - Email content (HTML): See wireframe below.

  • - Email content (HTML): The email should render reasonably well without images enabled or external assets fetched, e.g. how Gmail renders an email by default.

  • - Email content (HTML): The email should render well on small (mobile) viewports.  Do not use a table for the thumbnail layout, and ensure each thumbnail’s size does not exceed the smallest usual mobile viewport size, or if it does exceed the viewport size, it should scale responsively to fit. The <Reinvestment page url> should have button styling as in mockup shown below.

  • - Email content (plain text):

“””

From: RE-Volv Team

Subject: You have $<X> to reinvest in RE-volv clean energy projects!

You have $<X> in the Solar Seed Fund to reinvest! Pick a project to support solar energy in a new community.

Click here to back a project with your $X in funds:

<Reinvestment page URL>

“””

Sharing Feature

We want to add features to allow users share the Re-volv content and their donations, as follow :

• - Use ShareThis plugin to add “Side Bar” sharing widget, we want to supporting sharing from any page in the website.

  • - The sharing widget should be placed on left side.

  • - cms is excluded from this.

  • - The share properties should be :

    • - url : the url of the page

    • - title : the title of the page

    • - image : this should be set from the cms excluding project details page as it should the project image.

    • - summary : this will be set from the cms excluding project details page as it should be a caption from project description.

• - When user successfully donates to a project, a popup should be displayed with ShareThis buttons style to encourage user to share with their friends.

  • - The popup should have a text “Thanks for your donation! Could you please do a favor and share this with your friends?” and the ShareThis buttons below it.

  • - When user click on a share button the sharing properties will be populated as follow :

    • - url : url of the project

    • - title : title of the project

    • - image : the project image

    • - summary : use “I just donated $<X> to RE-volv in support of clean energy! Join me!”

Social Login Feature

We want to allow users to signup and login to website using their social network accounts, as follows :

• - We will support facebook and google

• - The facebook and google buttons will appear in both Signup and Login pages.

• - You can use available open source modules, i.e. http://psa.matiasaguirre.net/

• - Signup and Login logic :

  • - We will use OAuth2.0 for both Facebook and Google

  • - When user click on a social network the user will be redirected to the social network to authorize the app :

    • - The social network api keys and app ids should be configurable

    • - We will require minimum permissions, we want access to email and name.

  • - On successful authorization the users will be redirected back to the website, callback handler will do the following :

    • - If user with the social network user identity already exists then auto login the user.

    • - If user with email already exists then create social user entry and connect it to existing user then auto login.

    • - If user with email does not exist, then create new user record with information populated from the pulled information from social network :

      • - username will be the user email without the @xx.com section.

• - Under My Account menu add new entry “My Connections”

  • - This will open a page with same global page layout and will have a table, the table will list user social users/connections, it will contain a table with two columns :

    • - Social network : this column will list the providers we support.

    • - Action : this column will display a button : disconnect or connect depends on the status.

      • - When user click connect it will take the user in the oauth flow same as done in signup/login flow, the callback will create a connection with the user unless there is already a connection with that social user. There is no requirement here that the social user email to match the existing user email.

      • - When user click disconnect it will delete the social user entry from database.

• - You will update the models to have new model that persist the user social network connections, information to persist would be : provider, user id, user social id, first name, last name, email address, access token, and refresh token.

Browser Compatability

- IE10+

- Latest Google Chrome (Windows & Mac OS)

- Latest Safari (Windows & Mac OS)

- Latest Firefox (Windows & Mac OS)

- Latest iOS Safari

- Latest Android Browser

HTML

- Provide comments on the page elements to give clear explanation of the code usage. The goal is to help future developers understand the code.

- Please use clean INDENTATION for all HTML code so future developers can follow the code.

- All HTML code naming should not have any conflicts or errors.

- Element and Attribute names should be in lowercase and use a "-" to separate multiple-word classes (i.e.. "main-content")

- Use semantically correct tags- use H tags for headers, etc. Use strong and em tags instead of bold and italic tags.

- No inline CSS styles- all styles must be placed in an external stylesheet.

- Validate your code- reviewers may accept minor validation errors, but please comment your reason for any validation errors. Use the validators listed in the scorecard.

CSS

- Provide comments on the CSS code. We need CSS comments to give a clear explanation of the code usage. The goal is to help future developers understand the code.

- Please use clean INDENTATION for all CSS so developers can follow the code.

- All CSS naming should not have any conflicts.

- As possible use CSS3 style when create all styling.

- Use CSS to space out objects, not clear/transparent images (GIFs or PNGs) and use proper structural CSS to lay out your page.

- Only use table tags for tables of data/information and not for page layout.

- Use variables with well-chosen names. Use some sort of naming convention.

Github repository

- The source code exists in github https://github.com/deedee/revolv  

- The repo contains a very detailed deployment instructions for the application

Platforms

- HTML

- CSS

- Python

- Django

- PostgreSQL

Technologies

- HTML

- CSS

- Python

- Django

Final Submission Guidelines

Deliverable

- Git patch file of the changed code.

- Detailed deployment guide with verification steps.