Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
17 changes: 17 additions & 0 deletions .eslintrc.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
{
"extends": ["next/core-web-vitals", "eslint:recommended"],
"env": {
"node": true,
"es6": true
},
"parserOptions": {
"ecmaVersion": 2021,
"sourceType": "module"
},
"rules": {
"semi": [2, "never"],
"indent": ["error", 2],
"quotes": ["error", "single"],
"no-unused-vars": "warn"
}
}
36 changes: 36 additions & 0 deletions .gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.

# dependencies
/node_modules
/.pnp
.pnp.js

# testing
/coverage

# next.js
/.next/
/out/

# production
/build

# misc
.DS_Store
*.pem

# debug
npm-debug.log*
yarn-debug.log*
yarn-error.log*
.pnpm-debug.log*

# local env files
.env*.local
.env

# vercel
.vercel

# typescript
*.tsbuildinfo
8 changes: 8 additions & 0 deletions .prettierrc
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
{
"tabWidth": 2,
"useTabs": false,
"semi": false,
"singleQuote": true,
"jsxSingleQuote": true,
"trailingComma": "none"
}
36 changes: 1 addition & 35 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,35 +1 @@
# The Boxscore Challenge
The Boxscore is the goto widget on any sports site to get quick information about a game. ESPN, Fox Sports, theScore, and many others have solutions.

![Boxscore Design Example](https://chumley.barstoolsports.com/wp-content/uploads/2018/12/21/boxscore.png)

Here is ESPN’s solution. They even went ahead and added pitchers info: [Boxscore](http://www.espn.com/mlb/boxscore?gameId=380715102)

The Boxscore challenge gives you the opportunity to use newer concepts and forces you to use best practices when it comes to its design and engineering.

### We want you to do the following:
* Build an API using NodeJS to consume the Feeds below.
* NBA game: https://chumley.barstoolsports.com/dev/data/games/6c974274-4bfc-4af8-a9c4-8b926637ba74.json
* MLB game: https://chumley.barstoolsports.com/dev/data/games/eed38457-db28-4658-ae4f-4d4d38e9e212.json
* Each feed should be hit at most every 15 seconds by our API, therefore...
* The data needs to be cached in a database. (Suggestion: MongoDB)
* Each request to our API should check the database for cached data: If it's last updated time is < 15 seconds then return it. Otherwise fetch fresh data from the feed and cache it in the database.
* Build a small React project.
* Some HTML markup is provided. Feel free to extend this or write your own.
* Your markup and stylesheet should be valid, scalable and maintainable.
* You can use the suggested design above or put your own spin on it.

### Things to Consider
* The various states that the box score widget would be in during the lifespan of the game. (ie. pre-game, in-game, and post-game)
* The types of data displayed and how data is organized for different types of sports. (ie. football has 4 quarters and displays the total score, while baseball has 9 innings, sometimes more, and displays not only the total score, but hits and errors.)
* The assets, elements, and concepts shared between the box scores for any number of different types of sports. (ie. all sports have two teams playing against one another. The away is on top, and the home team is on the bottom. There is always a spot that communicates the progress of the game (Top 3rd, 1st Qtr, 3rd Period, Final).

### Deliverables
Links to both the NodeJS Server repo, and the React App repo.
* The NodeJS Server should:
* Consume and store the feed data from the feeds above, in a database.
* Contain endpoints that allowing the React app to consume data from the database.
* Be simple and straightforward to run. Think `yarn start` or `npm start`.
* The React app should:
* Consume the NodeJS API, and will feed data into the components.
* Also, be simple and straighforward to get running.
https://www.youtube.com/watch?v=cEeoJjDx-HY
143 changes: 0 additions & 143 deletions index.html

This file was deleted.

5 changes: 5 additions & 0 deletions next-env.d.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
/// <reference types="next" />
/// <reference types="next/image-types/global" />

// NOTE: This file should not be edited
// see https://nextjs.org/docs/basic-features/typescript for more information.
10 changes: 10 additions & 0 deletions next.config.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
/** @type {import('next').NextConfig} */
const nextConfig = {
reactStrictMode: true,
swcMinify: true,
images: {
domains: ['i.imgur.com']
}
}

module.exports = nextConfig
Loading