Read the instructions thoroughly before starting your project.
git clone
this repocd
into it.yarn install
cd 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-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.
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
- 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.