reflectionsprojections / rp2017

Reflections|Projections 2017

React

Hi, surprise; we're migrating from Angular2 to React after some deliberation! I did my best to add useful npm scripts to the package.json, so read on to find out how to quickly and easily set up a development environment.

Setup

Clone this repository and run npm install to create the node_modules folder. You need to do this before attempting anything else.

Development

Run npm run dev for a dev server. Navigate to http://localhost:8080/. The app will automatically reload if you change any of the source files.

Build

Run npm run build to build the project. The build artifacts will be stored in the public/ directory.

Design

Design Drive

View Full Style Guide

Download Typefaces

• Roboto (Sans-serif)
• Roboto Slab
• Roboto Mono

View Full Color Guide

  ~ primary colors
  - red 2       #b32024     rgb(179,32,36);      Pantone Solid Coated 7621 C
  - red 5       #7a1216     rgb(122,18,22);      Pantone Solid Coated 1815 C
  - white       #ffffff     rgb(255,255,255);    Pantone Solid Coated  663 C
  - black       #000000     rgb(0,0,0);          Pantone Solid Coated Neutral Black C
  
  ~ secondary colors 
  - red 0       #e91d29     rgb(233,29,41);      Pantone Solid Coated  185 C
  - red 1       #cb2027     rgb(203,32,29);      Pantone Solid Coated  186 C
  - red 3       #a01d21     rgb(160,29,33);      Pantone Solid Coated 7628 C
  - red 4       #8f191c     rgb(143,25,28);      Pantone Solid Coated 7623 C
  - cool grey   #a0a3af     rgb(160,163,175);    Pantone Solid Coated 1815 C
  - warm grey   #4c4144     rgb(76,65,68);       Pantone Solid Coated 1815 C   

rp2017's Issues

Disable Swipe to Go back and Landscape Orientation

small mobile responsive issues

todo:

• on medium-size devices, the logo overlaps with "reflections" ever so slightly
• some text needs to be modified to be non-breaking spaces for certain screen sizes
• figure out a way to display some sort of title or abbreviation on mobile devices

i'm pretty busy this weekend so if anyone wants to tackle any of these, please do! otherwise I can do them once I finish my exams next week

Mobile: Title Disappears

On mobile, there's no title for the site!

Add a list of past speakers and links to the splash page

Include fonts & colors & logo assets in project

I'd recommend we put this information inside of the README for the repo

add link to /companies under the career fairs tab

Add a sponsor button that leads to the sponsorship pdf

support for more languages

Currently code golf only accepts Python submissions. Users should be able to submit their answers in (at least) Python, Java, and C++. This probably requires adding a language param to API resource AnswerResource, and creating shell scripts for running/compiling submissions in these languages to be called by subprocess.Popen in the function evaluate_user_code

Add a contact@ email in the footer

Put an index.html page please

Add HTTPS

Sponsors section

Begin scaffolding out the section for Sponsors.

Check the Drive for sponsor information! We want to have a display for all of the sponsors of the event; a card with the image, the name of the company, and scaling it according to the sponsor tier will do. Sponsors list isn't complete yet, so placeholder content is fine. Focus on visuals and responsiveness.

Refer to the Design docs for what the section should look like.

DISCUSSION: Do we want to use React + Foundation?

Foundation is a responsive front-end framework that comes with many components that have been built and styled and made responsive already by experienced frontend developers.

React + Foundation is a repackaging of Foundation into React components that we can use pretty easily.

Example:

Pros:

• The developers of Foundation are much more skilled at making responsive components than we are
• Less time wasted styling common use-case elements like text fields, text, buttons, info-containers, etc.

Cons:

• Not everyone has experience with Foundation
• I don't want to make the project too beginner-unfriendly.

Overall, I think it could save us a lot of time though.

Thoughts?

https://react.foundation

After Signup, the 'return to our website' goes to the wrong page.

After signing up for updates, clicking 'return to our website' redirects to https://acm.illinois.edu/conference/ instead of https://reflectionsprojections.org/

TODO: Configure React Router for the R|P homepage

Create the route reflectionsprojections.com/#/home so we can begin scaffolding out & developing the full site (speakers, events, etc etc.)

Once the site is complete we'll replace reflectionsprojections.com with /home.

Convert site to React-Bootstrap

Events section

Begin scaffolding out the section for Events.

We don't have information on the upcoming events yet so making placeholder content is fine! Focus on visuals and responsiveness.

Refer to the Design docs for what the section should look like.

Speakers section

Begin scaffolding out the section for Speakers.

We don't have information on the upcoming speakers yet so making placeholder content is fine! Focus on visuals and responsiveness.

Refer to the Design docs for what the section should look like.

Open Graph Tags and Images

Frameworks & Libraries (Discussion)

Let's keep external frameworks to a minimum. Here are some initial thoughts:

• We can use React since it's really maintainable and modular, but it might be overkill.
• Sass might be cool
• We might not need a grid system since flexbox is nice

Favicon