Blocked by:

• #4
• #5
• #6

Create a react component that contains all footer components.
It should work on mobile and desktop.

Design screenshot/assets to be attached here.

Any page that hasn't been created needs to be commented out or disabled so we don't serve 404s.

There may be some form fields that we don't want to be autocompleted.

There should be a prop for this that defaults to 'on'.

See https://developer.mozilla.org/en-US/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion for more info.

Design screenshot/assets to be attached here.

Design screenshot/assets to be attached here.

This page should use the sign up component in #27

Create a react component to display various links in our footer. This component should

• Be configured by a hash
• Work on mobile/desktop

Resources:

• https://github.com/ericgrosse/task-runner-bundler-comparison

This is our most visited page behind /, and probably our biggest source of search traffic.

This page should display a list of code schools taken from https://api.operationcode.org/api/v1/code_schools.

VA approved code schools should be displayed up top.
Following that code schools should be listed be state.

The list should be easily navigable. It's currently implemented with drawers but we don't have to stick to that design.

From OperationCode/operationcode_old_site#730:

As a visitor,
When I visit /gala
There should be a page highlighting our Gala fundraiser, including, location, date & time, quick summary, planning committee co-chairs & members (along w/ their Slack handle), sponsorship prospectus, a way for companies to pay for a table or seats.

Initial info for copy:

Nov 10, 2017
Governor's Ballroom, Sentinel Hotel
Portland, Oregon

See the current error message below:

When a form fails to submit the error message should stand out more. In the screenshot above the error text is There was an error joining operation code: email: can't be blank password: can't be blank.

Maybe it can be bold? Or Red? Or have a bulleted list of problems. Feel free to reach out in #design or #oc-projects for help with design.

A new section should be added to the README with the goal of getting a new user started and contributing to this repo.

It should be written assuming the reader has 0 experience with programming and has nothing installed on their machine.

Blocked by having a better understanding of webpack and NPM scripts.

Getting the README with contribution instructions is critical for consistent, distributed development.

Create a react component that displays a menu. The menu should:

• contain the Operation Code logo
• contain the links in the attached screen shot
• contain a 'Join' link
• be styled as in the attached screen shot
• automatically highlight/have emphasis based on the page you're on
• work on mobile displays
• be configured easily via a hash

Example menu:

When a field is incorrect (eg blank email, invalid password complexity, no zip) the outline of the field should be red.

You can use bootstrap validations for inspiration:
https://v4-alpha.getbootstrap.com/components/forms/#examples

This is a good example: http://www.adelantemujeres.org/financial-statements/..

Anyone visiting any HTTP URL should be redirected from HTTP to HTTPS with the same URL and query params.

The line RUN npm install --quiet

Should be changed to yarn install --production --silent --no-progress

Create a react app with the following (or equivalent) items:

• app server (npm I assume)
• react library
• a way to GET and POST data
• testing framework

Stretch goals:

• Dockerfile (for deployment)
• docker-compose.yml (for request mocking?)
• Makefile (for easy running of common tasks (see operationcode/operationcode)

Design screenshot/assets to be attached here.

Horizontal centering is a bit off:

Landing page heading not filled by background image of the family:

We currently have a burger menu media query, but clicking it does not produce a menu. The navigation component needs to be updated to display a stacked menu on click.

No code change required.

Blocked until the MVP milestone is complete.

See https://github.com/OperationCode/operationcode/blob/master/app/views/layouts/_header.html.erb#L78-L79

and

https://github.com/OperationCode/operationcode/blob/master/app/views/layouts/application.html.erb#L68

References OperationCode/operationcode_old_site#579 @tpham045

• hardware issuance program

Design screenshot/assets to be attached here.

I just need to do a bit of research into how Create-React-App targets scripts and stylesheets so that we can organize our project in a more sustainable manner than just "App.js, App.css" etc.

@rickr @RobKriner, I recall we were using Split for this before - https://github.com/splitrb/split

We should be sending the password/password_confirmation fields to the users API but we're currently only sending email and zip.

See:
https://github.com/OperationCode/operationcode_frontend/blob/master/src/scenes/home/signup/signup.js#L54

This component should:

• take an email address and zip code.
• post to an API endpoint
• check for errors and render the message on the field if they exist
• if successful redirect to the links.self key

• Setup travis
• Setup rancher
• Add new DNS record

Create a signup page that uses the component from #27

To be backwards compatible this page should be accessible from /join and /sign_up

This will be unblocked when #27 is completed.

On the signup page (/signup) when a user clicks the submit button there should be some kind of feedback that the user has clicked the button and a network request was made. This can be a spinner, or maybe just changing the text of the button to something like 'Joining...'.

Create a react component to display the logo and copyright styled similar to the attached screenshot (center of the footer).

It should not be active in development mode.

Our tracker id is UA-75642413-1

This page will showcase the Operation Code mentors. It could contain:

• Areas the mentor "mentors" people in
• Cross-links to squads and other OC pieces they are involved with
• Where they live, in case a face-to-face is ever an option (as well as relative time zones)
• Some of the mentors history and experience, so they are more relatable
• Etc.

Some benefits are:

• Empowers the users to make more educated decisions when choosing a mentor (when applicable)
• Gives "props" to the mentors for volunteering their time
• Highlights the talent that Operation Code has to offer

After some discussion, we'd like to emulate the interface that Bloc uses here.

Create a react component to display our social media icons.

This component should:

• Be configured by a hash
• Work on mobile and destop
• Use the icons in the screenshot below

The logo/menu should be responsive.

Currently looks like this:

I noticed a couple of areas on the Sign Up page that could be improved on mobile.
Screenshots are from an emulated iPhone 5 (screen width 320px) on Chrome DevTools, but the same UI was also observed on an actual Android device w/ similar screen width.

We need to make sure that we can get some text and a CTA above the fold but the current hero image takes up the entire page.

It should be reduced in height. Keep in mind how it looks on mobile devices.

See https://github.com/OperationCode/operationcode/blob/master/app/views/layouts/application.html.erb#L7-L10

Create a page that lists our staff. See below for the page design.

The following pages list the current staff:
https://github.com/OperationCode/operationcode/blob/a0eec2c9f681040942e3537e49e79dead759d58d/app/views/pages/board.html.erb
https://github.com/OperationCode/operationcode/blob/a0eec2c9f681040942e3537e49e79dead759d58d/app/views/pages/staff.html.erb

The current menu text is hard to read and a bit too small.
It should also be horizontally aligned with the logo.

Edited 1/15/2018:
See Here For A Good Wireframe

See Here For Extra Direction

See Here For Wireframe Edits

Create src/scenes/home/getInvolved.js and src/scenes/home/getInvolved.css.

Utilize components from src/shared/components to resemble the wireframe relatively closely (keeping in mind other instructions in the thread).

See https://github.com/OperationCode/operationcode/blob/master/app/views/layouts/application.html.erb#L7-L10

It currently looks like this:

This ticket is a task and should have no code changes associated with it.

We should look at the main content of our newly designed pages and see if we can distill any common themes. If we notice some and are able to name them they should be created as react components so we can easily build out the rest of the site.

Please enumerate common components in the comments.

After a user signs up they should be directed to a page where they can update their info.

Profile fields can be found here:
https://docs.google.com/document/d/1NET6RmBiCgc2IUJvjYRzdykjcwAMG-859ShsOhMmVqU/edit#