Skip to content

Latest commit

 

History

History
66 lines (49 loc) · 3.75 KB

README.md

File metadata and controls

66 lines (49 loc) · 3.75 KB
Raw

Node / Create-React-App mashup

Read the instructions thoroughly before starting your project.

Setup

  • git clone this repo
  • cd into it.
  • yarn install
  • cd client && yarn install

Available build commands

  • yarn dev: Runs BOTH your Express.JS and React developer environment locally at the same time. Any logs coming from Express will be prefaced with [0], any logs from create-react-app will be prefaced with [1].
  • yarn server: Runs JUST your Express.JS server.
  • yarn client: Runs JUST your front-end React app.

Open http://localhost:3000 to view your local React app in the browser. The page will reload if you make edits.

To deploy

NOTE: Heroku specifically runs npm start, so don't remove that from your package.json file.

  • heroku create your-app-name
  • git push heroku master

Project Requirements

  • Your project should pull data from an API. There are lots of options here and here.
    • Avoid any APIs that require OAuth (we'll talk about that later).
    • Many APIs require an API key. Just sign up for an account and attach the key to your URL. Please make sure not to share your secret keys in a public GitHub repo.
    • Some APIs don't allow Cross-Origin Resource Sharing (CORS), meaning you can't make AJAX requests to them. You can get around this by proxying your requests with your Express server.
  • Your project should render a list of data from the API.
    • Your project should allow the list to be filtered or searched.
  • Your project should show details about a single resource when clicked.
  • Your project should look (really) pretty!
  • You and your team should employ good Git and GitHub collaboration practices.
  • Your project must have a README.md file explaining what the project does and why it matters. Here's an example of a great README.md template.
Rubric Criterion Points
Ability to search or filter, use of React Router 10
Code formatting and quality: indentation, variable and file naming conventions, etc. 10
No unused variables or imports, compiler errors 10
Proper use of environment variables for API keys or CORS proxy if needed 10
Overall look and feel of application, well organized CSS files 10
Well written documentation 10
Use of GitHub issues, branches and commit messages 10
Look and feel of demo slide deck 10
Ability to explain code decisions in demo 10
Ability to defend code decisions in response to panel questions 10

Bonus

  • Fanciful animations and transitions
  • Incorporate multiple APIs into a single app

Demo Requirements

Create a slide deck for the technical panel. (Here's an example.)

  • It should focus on how you built the app.
  • Include code snippets with brief explanations. Or, specific references to the location of the code in your GitHub repo.
  • It should emphasize your technical setbacks and solutions.
  • Get straight to the point.
  • Be prepared to answer questions.