Read the instructions thoroughly before starting your project.
git clonethis repocdinto it.yarn installcd client && yarn install
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 fromcreate-react-appwill 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.
NOTE: Heroku specifically runs npm start, so don't remove that from your package.json file.
heroku create your-app-namegit push heroku master
- 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 |
- Fanciful animations and transitions
- Incorporate multiple APIs into a single app
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.