Challenge Overview
RE-volv is a solar energy crowdsourcing 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.
For this challenge, the goal is to expand our campaign system to accommodate multiple, concurrent solar energy campaigns, as well as to allow members of the public to propose a new solar energy campaign.
Challenge Requirements
You will address the following in this challenge
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 PEP 257 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.
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
1. Multiple campaigns
- After setting up the project, you'll notice that on the homepage there is a single featured solar energy campaign. You will adapt the project to support multiple, concurrent solar energy campaigns.
- If there’s only one campaign active, the one campaign should display in the place where “Our current project” is now, and in the same style as it is now.
- If there are multiple projects with status ACTIVE, they should be displayed in a grid on the home page, where “Our current project” is now. Each project listed in the grid should contain all of the same information that’s currently listed in “Our current project”. The heading should instead now read “Our current projects”. The grid should have at most 6 campaigns in it.
- In the project grid, in the case of there being multiple ACTIVE projects, the detail text in the thumbnail should be hidden and only the heading tag should be shown. The heading should be scaled down and the thumbnail shrunk to 33% of its original size (to fit in the grid). See Image 1 below.
- If there is more than one ACTIVE project, the “Our current projects” area should end with an a centered button that reads “View Projects,” which links to the “Projects page”. This button should be the same blue color (#11ade5) as the stroke color that’s present in the “% funded” circle in the project thumbnail.
Image 1
2. Projects page
- Create a new "projects page", which lists *all* projects with status ACTIVE in a visual grid, using thumbnails as used on the homepage.
- Each project thumbnail should link to the project details page.
- Add a new button in the center of the bottom of the projects page that is in the same style as the "Join the movement.. <donate>" button on the homepage, but instead says: "Join the movement.. <Fund a new project>".
- The "<Fund a new project>" button should link to the "new project creation page".
3. New project creation page
- This page currently exists when logged in as an ambassador at https://revolv-stage.herokuapp.com/project/create. Your task is to make this page accessible to all users.
- If visiting this page *before* being logged in, first prompt the user to log in, then redirect back to the project creation page.
- Use the Django form system for this, including CSRF validation.
- On submission, the form should create a new `Project` model, but set in `DRAFTED` status.
- On successful submission, redirect the user to the project details page.
- The `DRAFTED` project should not be displayed on the site to other users, but should be visible to the user who submitted after submission.
- Navigating to e.g. `/project/<project id>/` when logged in as a the user who created the new project should display the `DRAFTED` project. There will be no UI to directly get to the user’s posted projects at the moment, so you should keep track of this URL after creating the project.
- Users are `RevolvUserProfile` models.
- The new project should not have an `ambassador` attribute set yet.
- The project model should be extended to have a new `created_by_user` attribute, which should be a foreign key to a `RevolvUserProfile` representing the user who created the new project.
4. Project details page
- This page already exists and it represents the individual project page used to view project details.
- route to page is /project/<project-id> i.e. https://revolv-stage.herokuapp.com/project/5/
- For non ACTIVE project: Users who are not the created user should not see project when navigating to this page. If the viewing user is the user who created the project, they should be able to view the project. If the viewing user `is_ambassador()` or `is_admin()`, they should be able to view the project.
- There should be dialog present when viewing the DRAFT (none ACTIVE) project page indicating that the project is in “Pending” status. It should read: “This project is currently pending approval. For assistance, please email sarah at re-volv.org”.
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/calblueprint/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
Winner will be asked to perform a final fixes (if needed!) based on review results.
Deliverable
- Git patch file of the changed code.
- Detailed deployment guide with verification steps.