├── 01.4 Add a Navbar ├── src │ ├── App.css │ ├── pages │ │ ├── Game.js │ │ ├── Home.js │ │ ├── GameOver.js │ │ └── HighScores.js │ └── index.css ├── public │ ├── robots.txt │ ├── favicon.ico │ ├── logo192.png │ └── logo512.png └── .gitignore ├── 01.2 Create Starter React Project ├── src │ ├── App.css │ ├── App.js │ └── index.css ├── public │ ├── robots.txt │ ├── favicon.ico │ ├── logo192.png │ └── logo512.png └── .gitignore ├── 01.3 Add Routing with React Router ├── src │ ├── App.css │ ├── pages │ │ ├── Game.js │ │ ├── Home.js │ │ ├── GameOver.js │ │ └── HighScores.js │ └── index.css ├── public │ ├── robots.txt │ ├── favicon.ico │ ├── logo192.png │ └── logo512.png └── .gitignore ├── 02.1 Introduction to Styled Components ├── src │ ├── App.css │ ├── pages │ │ ├── Game.js │ │ ├── Home.js │ │ ├── GameOver.js │ │ └── HighScores.js │ └── index.css ├── public │ ├── robots.txt │ ├── favicon.ico │ ├── logo192.png │ └── logo512.png └── .gitignore ├── 06.6 Display High Scores ├── .env.sample ├── public │ ├── robots.txt │ ├── favicon.ico │ ├── logo192.png │ └── logo512.png ├── netlify.toml ├── src │ ├── styled │ │ ├── Main.js │ │ ├── Container.js │ │ ├── HighScores.js │ │ ├── CTA.js │ │ ├── Global.js │ │ └── Random.js │ ├── index.css │ └── pages │ │ └── Home.js ├── functions │ └── helloWorld.js └── .gitignore ├── 10.1 Styling and Cleanup ├── .env.sample ├── public │ ├── robots.txt │ ├── favicon.ico │ ├── logo192.png │ └── logo512.png ├── netlify.toml ├── src │ ├── utils │ │ └── history.js │ ├── auth_config.json │ ├── styled │ │ ├── Main.js │ │ ├── Container.js │ │ ├── HighScores.js │ │ ├── Buttons.js │ │ ├── CTA.js │ │ ├── Loader.js │ │ ├── Themes.js │ │ └── Random.js │ ├── index.css │ └── pages │ │ └── Home.js ├── functions │ └── helloWorld.js └── .gitignore ├── 06.5 Setup Evironment Vairbles ├── .env.sample ├── public │ ├── robots.txt │ ├── favicon.ico │ ├── logo192.png │ └── logo512.png ├── netlify.toml ├── src │ ├── styled │ │ ├── Main.js │ │ ├── Container.js │ │ ├── CTA.js │ │ ├── Global.js │ │ └── Random.js │ ├── pages │ │ ├── HighScores.js │ │ └── Home.js │ └── index.css ├── functions │ └── helloWorld.js └── .gitignore ├── 09.4 Create Use Theme Hook ├── .env.sample ├── public │ ├── robots.txt │ ├── favicon.ico │ ├── logo192.png │ └── logo512.png ├── netlify.toml ├── src │ ├── utils │ │ └── history.js │ ├── auth_config.json │ ├── styled │ │ ├── Main.js │ │ ├── Container.js │ │ ├── HighScores.js │ │ ├── CTA.js │ │ ├── Themes.js │ │ └── Random.js │ ├── hooks │ │ └── useTheme.js │ ├── index.css │ └── pages │ │ └── Home.js ├── functions │ └── helloWorld.js └── .gitignore ├── 06.9 Save High Score in Game Over ├── .env.sample ├── public │ ├── robots.txt │ ├── favicon.ico │ ├── logo192.png │ └── logo512.png ├── netlify.toml ├── src │ ├── styled │ │ ├── Main.js │ │ ├── Container.js │ │ ├── HighScores.js │ │ ├── CTA.js │ │ ├── Global.js │ │ └── Random.js │ └── index.css ├── functions │ └── helloWorld.js └── .gitignore ├── 07.3 Add Authentication in React ├── .env.sample ├── public │ ├── robots.txt │ ├── favicon.ico │ ├── logo192.png │ └── logo512.png ├── netlify.toml ├── src │ ├── utils │ │ └── history.js │ ├── auth_config.json │ ├── styled │ │ ├── Main.js │ │ ├── Container.js │ │ ├── HighScores.js │ │ ├── CTA.js │ │ ├── Global.js │ │ └── Random.js │ └── index.css ├── functions │ └── helloWorld.js └── .gitignore ├── 06.2 Netlify Init and Setup ├── netlify.toml ├── public │ ├── robots.txt │ ├── favicon.ico │ ├── logo192.png │ └── logo512.png ├── src │ ├── styled │ │ ├── Main.js │ │ ├── Container.js │ │ ├── CTA.js │ │ ├── Global.js │ │ └── Random.js │ ├── pages │ │ ├── HighScores.js │ │ └── Home.js │ └── index.css └── .gitignore ├── 06.8 Refactoring Common Airtable Code ├── .env.sample ├── public │ ├── robots.txt │ ├── favicon.ico │ ├── logo192.png │ └── logo512.png ├── netlify.toml ├── src │ ├── styled │ │ ├── Main.js │ │ ├── Container.js │ │ ├── HighScores.js │ │ ├── CTA.js │ │ ├── Global.js │ │ └── Random.js │ └── index.css ├── functions │ └── helloWorld.js └── .gitignore ├── 08.3 Retrieve and Parse Access Token ├── .env.sample ├── public │ ├── robots.txt │ ├── favicon.ico │ ├── logo192.png │ └── logo512.png ├── netlify.toml ├── src │ ├── utils │ │ └── history.js │ ├── styled │ │ ├── Main.js │ │ ├── Container.js │ │ ├── HighScores.js │ │ ├── CTA.js │ │ ├── Global.js │ │ └── Random.js │ ├── auth_config.json │ └── index.css ├── functions │ └── helloWorld.js └── .gitignore ├── 09.2 Create CSS Variables for Theming ├── .env.sample ├── public │ ├── robots.txt │ ├── favicon.ico │ ├── logo192.png │ └── logo512.png ├── netlify.toml ├── src │ ├── utils │ │ └── history.js │ ├── auth_config.json │ ├── styled │ │ ├── Main.js │ │ ├── Container.js │ │ ├── HighScores.js │ │ ├── CTA.js │ │ └── Random.js │ └── index.css ├── functions │ └── helloWorld.js └── .gitignore ├── 06.10 Game Over Bug Fix and Extra Styling ├── .env.sample ├── public │ ├── robots.txt │ ├── favicon.ico │ ├── logo192.png │ └── logo512.png ├── netlify.toml ├── src │ ├── styled │ │ ├── Main.js │ │ ├── Container.js │ │ ├── HighScores.js │ │ ├── CTA.js │ │ ├── Global.js │ │ └── Random.js │ └── index.css ├── functions │ └── helloWorld.js └── .gitignore ├── 09.3 Use the Styled Components Theme Provider ├── .env.sample ├── public │ ├── robots.txt │ ├── favicon.ico │ ├── logo192.png │ └── logo512.png ├── netlify.toml ├── src │ ├── utils │ │ └── history.js │ ├── auth_config.json │ ├── styled │ │ ├── Main.js │ │ ├── Container.js │ │ ├── HighScores.js │ │ ├── CTA.js │ │ ├── Themes.js │ │ └── Random.js │ └── index.css ├── functions │ └── helloWorld.js └── .gitignore ├── 09.5 Persisting Theme Choice in Local Storage ├── .env.sample ├── public │ ├── robots.txt │ ├── favicon.ico │ ├── logo192.png │ └── logo512.png ├── netlify.toml ├── src │ ├── utils │ │ └── history.js │ ├── auth_config.json │ ├── styled │ │ ├── Main.js │ │ ├── Container.js │ │ ├── HighScores.js │ │ ├── CTA.js │ │ ├── Themes.js │ │ └── Random.js │ └── index.css ├── functions │ └── helloWorld.js └── .gitignore ├── 10.2 Final Deploy Configurations in Netlify ├── .env.sample ├── public │ ├── robots.txt │ ├── favicon.ico │ ├── logo192.png │ └── logo512.png ├── src │ ├── utils │ │ └── history.js │ ├── auth_config.json │ ├── styled │ │ ├── Main.js │ │ ├── Container.js │ │ ├── HighScores.js │ │ ├── Buttons.js │ │ ├── CTA.js │ │ ├── Loader.js │ │ ├── Themes.js │ │ └── Random.js │ └── index.css ├── netlify.toml ├── functions │ └── helloWorld.js └── .gitignore ├── 02.3 Style the Navbar ├── public │ ├── robots.txt │ ├── favicon.ico │ ├── logo192.png │ └── logo512.png ├── src │ ├── styled │ │ ├── Random.js │ │ ├── Main.js │ │ ├── Container.js │ │ └── Global.js │ ├── pages │ │ ├── Game.js │ │ ├── Home.js │ │ ├── GameOver.js │ │ └── HighScores.js │ └── index.css └── .gitignore ├── 06.7 Create Save High Score Serverless Function ├── .env.sample ├── public │ ├── robots.txt │ ├── favicon.ico │ ├── logo192.png │ └── logo512.png ├── netlify.toml ├── src │ ├── styled │ │ ├── Main.js │ │ ├── Container.js │ │ ├── HighScores.js │ │ ├── CTA.js │ │ ├── Global.js │ │ └── Random.js │ └── index.css ├── functions │ └── helloWorld.js └── .gitignore ├── 08.2 Include Access Token in Save Score Request ├── .env.sample ├── public │ ├── robots.txt │ ├── favicon.ico │ ├── logo192.png │ └── logo512.png ├── netlify.toml ├── src │ ├── utils │ │ └── history.js │ ├── auth_config.json │ ├── styled │ │ ├── Main.js │ │ ├── Container.js │ │ ├── HighScores.js │ │ ├── CTA.js │ │ ├── Global.js │ │ └── Random.js │ └── index.css ├── functions │ └── helloWorld.js └── .gitignore ├── 02.4 Style the Home Page ├── public │ ├── robots.txt │ ├── favicon.ico │ ├── logo192.png │ └── logo512.png ├── src │ ├── styled │ │ ├── Main.js │ │ ├── Container.js │ │ ├── CTA.js │ │ ├── Random.js │ │ └── Global.js │ ├── pages │ │ ├── Game.js │ │ ├── GameOver.js │ │ ├── HighScores.js │ │ └── Home.js │ └── index.css └── .gitignore ├── 02.5 Style the Game Page ├── public │ ├── robots.txt │ ├── favicon.ico │ ├── logo192.png │ └── logo512.png ├── src │ ├── styled │ │ ├── Main.js │ │ ├── Container.js │ │ ├── CTA.js │ │ ├── Global.js │ │ └── Random.js │ ├── pages │ │ ├── GameOver.js │ │ ├── HighScores.js │ │ └── Home.js │ └── index.css └── .gitignore ├── 03.1 Intro to React Hooks ├── public │ ├── robots.txt │ ├── favicon.ico │ ├── logo192.png │ └── logo512.png ├── src │ ├── styled │ │ ├── Main.js │ │ ├── Container.js │ │ ├── CTA.js │ │ ├── Global.js │ │ └── Random.js │ ├── pages │ │ ├── GameOver.js │ │ ├── HighScores.js │ │ └── Home.js │ └── index.css └── .gitignore ├── 04.1 Intro to React Hooks ├── public │ ├── robots.txt │ ├── favicon.ico │ ├── logo192.png │ └── logo512.png ├── src │ ├── styled │ │ ├── Main.js │ │ ├── Container.js │ │ ├── CTA.js │ │ ├── Global.js │ │ └── Random.js │ ├── pages │ │ ├── GameOver.js │ │ ├── HighScores.js │ │ └── Home.js │ └── index.css └── .gitignore ├── 05.1 Intro to Airtable ├── public │ ├── robots.txt │ ├── favicon.ico │ ├── logo192.png │ └── logo512.png ├── src │ ├── styled │ │ ├── Main.js │ │ ├── Container.js │ │ ├── CTA.js │ │ ├── Global.js │ │ └── Random.js │ ├── pages │ │ ├── HighScores.js │ │ └── Home.js │ └── index.css └── .gitignore ├── 08.4 Validate Access Token ├── public │ ├── robots.txt │ ├── favicon.ico │ ├── logo192.png │ └── logo512.png ├── netlify.toml ├── .env.sample ├── src │ ├── utils │ │ └── history.js │ ├── styled │ │ ├── Main.js │ │ ├── Container.js │ │ ├── HighScores.js │ │ ├── CTA.js │ │ ├── Global.js │ │ └── Random.js │ ├── auth_config.json │ ├── index.css │ └── pages │ │ └── Home.js ├── functions │ └── helloWorld.js └── .gitignore ├── 03.3 Create Time Functionality ├── public │ ├── robots.txt │ ├── favicon.ico │ ├── logo192.png │ └── logo512.png ├── src │ ├── styled │ │ ├── Main.js │ │ ├── Container.js │ │ ├── CTA.js │ │ ├── Global.js │ │ └── Random.js │ ├── pages │ │ ├── GameOver.js │ │ ├── HighScores.js │ │ └── Home.js │ └── index.css └── .gitignore ├── 05.2Airtable Workspace and API ├── public │ ├── robots.txt │ ├── favicon.ico │ ├── logo192.png │ └── logo512.png ├── src │ ├── styled │ │ ├── Main.js │ │ ├── Container.js │ │ ├── CTA.js │ │ ├── Global.js │ │ └── Random.js │ ├── pages │ │ ├── HighScores.js │ │ └── Home.js │ └── index.css └── .gitignore ├── 02.2 Create Base Styled Components ├── public │ ├── robots.txt │ ├── favicon.ico │ ├── logo192.png │ └── logo512.png ├── src │ ├── styled │ │ ├── Main.js │ │ ├── Container.js │ │ └── Global.js │ ├── pages │ │ ├── Game.js │ │ ├── Home.js │ │ ├── GameOver.js │ │ └── HighScores.js │ └── index.css └── .gitignore ├── 03.4 Track User Input on Keypress ├── public │ ├── robots.txt │ ├── favicon.ico │ ├── logo192.png │ └── logo512.png ├── src │ ├── styled │ │ ├── Main.js │ │ ├── Container.js │ │ ├── CTA.js │ │ ├── Global.js │ │ └── Random.js │ ├── pages │ │ ├── GameOver.js │ │ ├── HighScores.js │ │ └── Home.js │ └── index.css └── .gitignore ├── 06.1 Intro to Serverless Functions ├── public │ ├── robots.txt │ ├── favicon.ico │ ├── logo192.png │ └── logo512.png ├── src │ ├── styled │ │ ├── Main.js │ │ ├── Container.js │ │ ├── CTA.js │ │ ├── Global.js │ │ └── Random.js │ ├── pages │ │ └── HighScores.js │ └── index.css └── .gitignore ├── 03.5 Update User Score Based on Input ├── public │ ├── robots.txt │ ├── favicon.ico │ ├── logo192.png │ └── logo512.png ├── src │ ├── styled │ │ ├── Main.js │ │ ├── Container.js │ │ ├── CTA.js │ │ ├── Global.js │ │ └── Random.js │ ├── pages │ │ ├── GameOver.js │ │ └── HighScores.js │ └── index.css └── .gitignore ├── 03.3 Track Score with Your First React Hook ├── public │ ├── robots.txt │ ├── favicon.ico │ ├── logo192.png │ └── logo512.png ├── src │ ├── styled │ │ ├── Main.js │ │ ├── Container.js │ │ ├── CTA.js │ │ ├── Global.js │ │ └── Random.js │ ├── pages │ │ ├── GameOver.js │ │ └── HighScores.js │ └── index.css └── .gitignore ├── 04.2 Track User's Score Between Components ├── public │ ├── robots.txt │ ├── favicon.ico │ ├── logo192.png │ └── logo512.png ├── src │ ├── styled │ │ ├── Main.js │ │ ├── Container.js │ │ ├── CTA.js │ │ ├── Global.js │ │ └── Random.js │ ├── pages │ │ └── HighScores.js │ └── index.css └── .gitignore ├── 06.3 Creating Your First Serverless Function ├── public │ ├── robots.txt │ ├── favicon.ico │ ├── logo192.png │ └── logo512.png ├── netlify.toml ├── src │ ├── styled │ │ ├── Main.js │ │ ├── Container.js │ │ ├── CTA.js │ │ ├── Global.js │ │ └── Random.js │ ├── pages │ │ └── HighScores.js │ └── index.css ├── functions │ └── helloWorld.js └── .gitignore └── 06.4 Serverless Function to Retrieve High Scores ├── public ├── robots.txt ├── favicon.ico ├── logo192.png └── logo512.png ├── netlify.toml ├── src ├── styled │ ├── Main.js │ ├── Container.js │ ├── CTA.js │ ├── Global.js │ └── Random.js ├── pages │ └── HighScores.js └── index.css ├── functions └── helloWorld.js └── .gitignore /01.4 Add a Navbar/src/App.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /01.2 Create Starter React Project/src/App.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /01.3 Add Routing with React Router/src/App.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /02.1 Introduction to Styled Components/src/App.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /06.6 Display High Scores/.env.sample: -------------------------------------------------------------------------------- 1 | AIRTABLE_API_KEY= 2 | AIRTABLE_BASE= 3 | AIRTABLE_TABLE= -------------------------------------------------------------------------------- /10.1 Styling and Cleanup/.env.sample: -------------------------------------------------------------------------------- 1 | AIRTABLE_API_KEY= 2 | AIRTABLE_BASE= 3 | AIRTABLE_TABLE= -------------------------------------------------------------------------------- /06.5 Setup Evironment Vairbles/.env.sample: -------------------------------------------------------------------------------- 1 | AIRTABLE_API_KEY= 2 | AIRTABLE_BASE= 3 | AIRTABLE_TABLE= -------------------------------------------------------------------------------- /09.4 Create Use Theme Hook/.env.sample: -------------------------------------------------------------------------------- 1 | AIRTABLE_API_KEY= 2 | AIRTABLE_BASE= 3 | AIRTABLE_TABLE= -------------------------------------------------------------------------------- /06.9 Save High Score in Game Over/.env.sample: -------------------------------------------------------------------------------- 1 | AIRTABLE_API_KEY= 2 | AIRTABLE_BASE= 3 | AIRTABLE_TABLE= -------------------------------------------------------------------------------- /07.3 Add Authentication in React/.env.sample: -------------------------------------------------------------------------------- 1 | AIRTABLE_API_KEY= 2 | AIRTABLE_BASE= 3 | AIRTABLE_TABLE= -------------------------------------------------------------------------------- /06.2 Netlify Init and Setup/netlify.toml: -------------------------------------------------------------------------------- 1 | [build] 2 | publish = "/build" 3 | command = "npm run build" -------------------------------------------------------------------------------- /06.8 Refactoring Common Airtable Code/.env.sample: -------------------------------------------------------------------------------- 1 | AIRTABLE_API_KEY= 2 | AIRTABLE_BASE= 3 | AIRTABLE_TABLE= -------------------------------------------------------------------------------- /08.3 Retrieve and Parse Access Token/.env.sample: -------------------------------------------------------------------------------- 1 | AIRTABLE_API_KEY= 2 | AIRTABLE_BASE= 3 | AIRTABLE_TABLE= -------------------------------------------------------------------------------- /09.2 Create CSS Variables for Theming/.env.sample: -------------------------------------------------------------------------------- 1 | AIRTABLE_API_KEY= 2 | AIRTABLE_BASE= 3 | AIRTABLE_TABLE= -------------------------------------------------------------------------------- /06.10 Game Over Bug Fix and Extra Styling/.env.sample: -------------------------------------------------------------------------------- 1 | AIRTABLE_API_KEY= 2 | AIRTABLE_BASE= 3 | AIRTABLE_TABLE= -------------------------------------------------------------------------------- /09.3 Use the Styled Components Theme Provider/.env.sample: -------------------------------------------------------------------------------- 1 | AIRTABLE_API_KEY= 2 | AIRTABLE_BASE= 3 | AIRTABLE_TABLE= -------------------------------------------------------------------------------- /09.5 Persisting Theme Choice in Local Storage/.env.sample: -------------------------------------------------------------------------------- 1 | AIRTABLE_API_KEY= 2 | AIRTABLE_BASE= 3 | AIRTABLE_TABLE= -------------------------------------------------------------------------------- /10.2 Final Deploy Configurations in Netlify/.env.sample: -------------------------------------------------------------------------------- 1 | AIRTABLE_API_KEY= 2 | AIRTABLE_BASE= 3 | AIRTABLE_TABLE= -------------------------------------------------------------------------------- /01.4 Add a Navbar/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /02.3 Style the Navbar/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /06.7 Create Save High Score Serverless Function/.env.sample: -------------------------------------------------------------------------------- 1 | AIRTABLE_API_KEY= 2 | AIRTABLE_BASE= 3 | AIRTABLE_TABLE= -------------------------------------------------------------------------------- /08.2 Include Access Token in Save Score Request/.env.sample: -------------------------------------------------------------------------------- 1 | AIRTABLE_API_KEY= 2 | AIRTABLE_BASE= 3 | AIRTABLE_TABLE= -------------------------------------------------------------------------------- /02.4 Style the Home Page/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /02.5 Style the Game Page/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /03.1 Intro to React Hooks/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /04.1 Intro to React Hooks/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /05.1 Intro to Airtable/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /06.6 Display High Scores/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /08.4 Validate Access Token/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /09.4 Create Use Theme Hook/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /10.1 Styling and Cleanup/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /03.3 Create Time Functionality/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /05.2Airtable Workspace and API/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /06.2 Netlify Init and Setup/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /06.5 Setup Evironment Vairbles/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /01.2 Create Starter React Project/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /01.3 Add Routing with React Router/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /02.2 Create Base Styled Components/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /03.4 Track User Input on Keypress/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /06.1 Intro to Serverless Functions/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /06.6 Display High Scores/netlify.toml: -------------------------------------------------------------------------------- 1 | [build] 2 | publish = "/build" 3 | command = "npm run build" 4 | functions = "functions" -------------------------------------------------------------------------------- /06.9 Save High Score in Game Over/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /07.3 Add Authentication in React/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /08.3 Retrieve and Parse Access Token/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /08.4 Validate Access Token/netlify.toml: -------------------------------------------------------------------------------- 1 | [build] 2 | publish = "/build" 3 | command = "npm run build" 4 | functions = "functions" -------------------------------------------------------------------------------- /09.4 Create Use Theme Hook/netlify.toml: -------------------------------------------------------------------------------- 1 | [build] 2 | publish = "/build" 3 | command = "npm run build" 4 | functions = "functions" -------------------------------------------------------------------------------- /10.1 Styling and Cleanup/netlify.toml: -------------------------------------------------------------------------------- 1 | [build] 2 | publish = "/build" 3 | command = "npm run build" 4 | functions = "functions" -------------------------------------------------------------------------------- /02.1 Introduction to Styled Components/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /03.5 Update User Score Based on Input/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /06.10 Game Over Bug Fix and Extra Styling/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /06.5 Setup Evironment Vairbles/netlify.toml: -------------------------------------------------------------------------------- 1 | [build] 2 | publish = "/build" 3 | command = "npm run build" 4 | functions = "functions" -------------------------------------------------------------------------------- /06.8 Refactoring Common Airtable Code/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /08.4 Validate Access Token/.env.sample: -------------------------------------------------------------------------------- 1 | AIRTABLE_API_KEY= 2 | AIRTABLE_BASE= 3 | AIRTABLE_TABLE= 4 | 5 | AUTH0_DOMAIN= 6 | AUTH0_AUDIENCE= -------------------------------------------------------------------------------- /09.2 Create CSS Variables for Theming/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /03.3 Track Score with Your First React Hook/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /04.2 Track User's Score Between Components/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /06.3 Creating Your First Serverless Function/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /06.9 Save High Score in Game Over/netlify.toml: -------------------------------------------------------------------------------- 1 | [build] 2 | publish = "/build" 3 | command = "npm run build" 4 | functions = "functions" -------------------------------------------------------------------------------- /07.3 Add Authentication in React/netlify.toml: -------------------------------------------------------------------------------- 1 | [build] 2 | publish = "/build" 3 | command = "npm run build" 4 | functions = "functions" -------------------------------------------------------------------------------- /08.3 Retrieve and Parse Access Token/netlify.toml: -------------------------------------------------------------------------------- 1 | [build] 2 | publish = "/build" 3 | command = "npm run build" 4 | functions = "functions" -------------------------------------------------------------------------------- /08.4 Validate Access Token/src/utils/history.js: -------------------------------------------------------------------------------- 1 | import { createBrowserHistory } from 'history'; 2 | export default createBrowserHistory(); 3 | -------------------------------------------------------------------------------- /09.3 Use the Styled Components Theme Provider/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /09.4 Create Use Theme Hook/src/utils/history.js: -------------------------------------------------------------------------------- 1 | import { createBrowserHistory } from 'history'; 2 | export default createBrowserHistory(); 3 | -------------------------------------------------------------------------------- /09.5 Persisting Theme Choice in Local Storage/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /10.1 Styling and Cleanup/src/utils/history.js: -------------------------------------------------------------------------------- 1 | import { createBrowserHistory } from 'history'; 2 | export default createBrowserHistory(); 3 | -------------------------------------------------------------------------------- /10.2 Final Deploy Configurations in Netlify/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /06.10 Game Over Bug Fix and Extra Styling/netlify.toml: -------------------------------------------------------------------------------- 1 | [build] 2 | publish = "/build" 3 | command = "npm run build" 4 | functions = "functions" -------------------------------------------------------------------------------- /06.4 Serverless Function to Retrieve High Scores/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /06.7 Create Save High Score Serverless Function/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /06.8 Refactoring Common Airtable Code/netlify.toml: -------------------------------------------------------------------------------- 1 | [build] 2 | publish = "/build" 3 | command = "npm run build" 4 | functions = "functions" -------------------------------------------------------------------------------- /07.3 Add Authentication in React/src/utils/history.js: -------------------------------------------------------------------------------- 1 | import { createBrowserHistory } from 'history'; 2 | export default createBrowserHistory(); 3 | -------------------------------------------------------------------------------- /08.2 Include Access Token in Save Score Request/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /09.2 Create CSS Variables for Theming/netlify.toml: -------------------------------------------------------------------------------- 1 | [build] 2 | publish = "/build" 3 | command = "npm run build" 4 | functions = "functions" -------------------------------------------------------------------------------- /06.3 Creating Your First Serverless Function/netlify.toml: -------------------------------------------------------------------------------- 1 | [build] 2 | publish = "/build" 3 | command = "npm run build" 4 | functions = "functions" -------------------------------------------------------------------------------- /08.3 Retrieve and Parse Access Token/src/utils/history.js: -------------------------------------------------------------------------------- 1 | import { createBrowserHistory } from 'history'; 2 | export default createBrowserHistory(); 3 | -------------------------------------------------------------------------------- /09.2 Create CSS Variables for Theming/src/utils/history.js: -------------------------------------------------------------------------------- 1 | import { createBrowserHistory } from 'history'; 2 | export default createBrowserHistory(); 3 | -------------------------------------------------------------------------------- /09.3 Use the Styled Components Theme Provider/netlify.toml: -------------------------------------------------------------------------------- 1 | [build] 2 | publish = "/build" 3 | command = "npm run build" 4 | functions = "functions" -------------------------------------------------------------------------------- /09.5 Persisting Theme Choice in Local Storage/netlify.toml: -------------------------------------------------------------------------------- 1 | [build] 2 | publish = "/build" 3 | command = "npm run build" 4 | functions = "functions" -------------------------------------------------------------------------------- /06.4 Serverless Function to Retrieve High Scores/netlify.toml: -------------------------------------------------------------------------------- 1 | [build] 2 | publish = "/build" 3 | command = "npm run build" 4 | functions = "functions" -------------------------------------------------------------------------------- /06.7 Create Save High Score Serverless Function/netlify.toml: -------------------------------------------------------------------------------- 1 | [build] 2 | publish = "/build" 3 | command = "npm run build" 4 | functions = "functions" -------------------------------------------------------------------------------- /08.2 Include Access Token in Save Score Request/netlify.toml: -------------------------------------------------------------------------------- 1 | [build] 2 | publish = "/build" 3 | command = "npm run build" 4 | functions = "functions" -------------------------------------------------------------------------------- /02.3 Style the Navbar/src/styled/Random.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | export const Accent = styled.span` 4 | color: #e16365; 5 | `; 6 | -------------------------------------------------------------------------------- /08.2 Include Access Token in Save Score Request/src/utils/history.js: -------------------------------------------------------------------------------- 1 | import { createBrowserHistory } from 'history'; 2 | export default createBrowserHistory(); 3 | -------------------------------------------------------------------------------- /09.3 Use the Styled Components Theme Provider/src/utils/history.js: -------------------------------------------------------------------------------- 1 | import { createBrowserHistory } from 'history'; 2 | export default createBrowserHistory(); 3 | -------------------------------------------------------------------------------- /09.5 Persisting Theme Choice in Local Storage/src/utils/history.js: -------------------------------------------------------------------------------- 1 | import { createBrowserHistory } from 'history'; 2 | export default createBrowserHistory(); 3 | -------------------------------------------------------------------------------- /10.2 Final Deploy Configurations in Netlify/src/utils/history.js: -------------------------------------------------------------------------------- 1 | import { createBrowserHistory } from 'history'; 2 | export default createBrowserHistory(); 3 | -------------------------------------------------------------------------------- /01.4 Add a Navbar/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jamesqquick/React-and-Serverless-Fullstack-Web-Development/HEAD/01.4 Add a Navbar/public/favicon.ico -------------------------------------------------------------------------------- /01.4 Add a Navbar/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jamesqquick/React-and-Serverless-Fullstack-Web-Development/HEAD/01.4 Add a Navbar/public/logo192.png -------------------------------------------------------------------------------- /01.4 Add a Navbar/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jamesqquick/React-and-Serverless-Fullstack-Web-Development/HEAD/01.4 Add a Navbar/public/logo512.png -------------------------------------------------------------------------------- /07.3 Add Authentication in React/src/auth_config.json: -------------------------------------------------------------------------------- 1 | { 2 | "domain": "learn-build-type-jqq.auth0.com", 3 | "clientId": "Pd3tPwbxTgzWs9287vz1ejdJBIUhnDP8" 4 | } 5 | -------------------------------------------------------------------------------- /02.3 Style the Navbar/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jamesqquick/React-and-Serverless-Fullstack-Web-Development/HEAD/02.3 Style the Navbar/public/favicon.ico -------------------------------------------------------------------------------- /02.3 Style the Navbar/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jamesqquick/React-and-Serverless-Fullstack-Web-Development/HEAD/02.3 Style the Navbar/public/logo192.png -------------------------------------------------------------------------------- /02.3 Style the Navbar/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jamesqquick/React-and-Serverless-Fullstack-Web-Development/HEAD/02.3 Style the Navbar/public/logo512.png -------------------------------------------------------------------------------- /05.1 Intro to Airtable/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jamesqquick/React-and-Serverless-Fullstack-Web-Development/HEAD/05.1 Intro to Airtable/public/favicon.ico -------------------------------------------------------------------------------- /05.1 Intro to Airtable/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jamesqquick/React-and-Serverless-Fullstack-Web-Development/HEAD/05.1 Intro to Airtable/public/logo192.png -------------------------------------------------------------------------------- /05.1 Intro to Airtable/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jamesqquick/React-and-Serverless-Fullstack-Web-Development/HEAD/05.1 Intro to Airtable/public/logo512.png -------------------------------------------------------------------------------- /02.4 Style the Home Page/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jamesqquick/React-and-Serverless-Fullstack-Web-Development/HEAD/02.4 Style the Home Page/public/favicon.ico -------------------------------------------------------------------------------- /02.4 Style the Home Page/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jamesqquick/React-and-Serverless-Fullstack-Web-Development/HEAD/02.4 Style the Home Page/public/logo192.png -------------------------------------------------------------------------------- /02.4 Style the Home Page/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jamesqquick/React-and-Serverless-Fullstack-Web-Development/HEAD/02.4 Style the Home Page/public/logo512.png -------------------------------------------------------------------------------- /02.5 Style the Game Page/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jamesqquick/React-and-Serverless-Fullstack-Web-Development/HEAD/02.5 Style the Game Page/public/favicon.ico -------------------------------------------------------------------------------- /02.5 Style the Game Page/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jamesqquick/React-and-Serverless-Fullstack-Web-Development/HEAD/02.5 Style the Game Page/public/logo192.png -------------------------------------------------------------------------------- /02.5 Style the Game Page/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jamesqquick/React-and-Serverless-Fullstack-Web-Development/HEAD/02.5 Style the Game Page/public/logo512.png -------------------------------------------------------------------------------- /03.1 Intro to React Hooks/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jamesqquick/React-and-Serverless-Fullstack-Web-Development/HEAD/03.1 Intro to React Hooks/public/favicon.ico -------------------------------------------------------------------------------- /03.1 Intro to React Hooks/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jamesqquick/React-and-Serverless-Fullstack-Web-Development/HEAD/03.1 Intro to React Hooks/public/logo192.png -------------------------------------------------------------------------------- /03.1 Intro to React Hooks/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jamesqquick/React-and-Serverless-Fullstack-Web-Development/HEAD/03.1 Intro to React Hooks/public/logo512.png -------------------------------------------------------------------------------- /04.1 Intro to React Hooks/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jamesqquick/React-and-Serverless-Fullstack-Web-Development/HEAD/04.1 Intro to React Hooks/public/favicon.ico -------------------------------------------------------------------------------- /04.1 Intro to React Hooks/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jamesqquick/React-and-Serverless-Fullstack-Web-Development/HEAD/04.1 Intro to React Hooks/public/logo192.png -------------------------------------------------------------------------------- /04.1 Intro to React Hooks/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jamesqquick/React-and-Serverless-Fullstack-Web-Development/HEAD/04.1 Intro to React Hooks/public/logo512.png -------------------------------------------------------------------------------- /06.6 Display High Scores/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jamesqquick/React-and-Serverless-Fullstack-Web-Development/HEAD/06.6 Display High Scores/public/favicon.ico -------------------------------------------------------------------------------- /06.6 Display High Scores/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jamesqquick/React-and-Serverless-Fullstack-Web-Development/HEAD/06.6 Display High Scores/public/logo192.png -------------------------------------------------------------------------------- /06.6 Display High Scores/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jamesqquick/React-and-Serverless-Fullstack-Web-Development/HEAD/06.6 Display High Scores/public/logo512.png -------------------------------------------------------------------------------- /10.1 Styling and Cleanup/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jamesqquick/React-and-Serverless-Fullstack-Web-Development/HEAD/10.1 Styling and Cleanup/public/favicon.ico -------------------------------------------------------------------------------- /10.1 Styling and Cleanup/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jamesqquick/React-and-Serverless-Fullstack-Web-Development/HEAD/10.1 Styling and Cleanup/public/logo192.png -------------------------------------------------------------------------------- /10.1 Styling and Cleanup/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jamesqquick/React-and-Serverless-Fullstack-Web-Development/HEAD/10.1 Styling and Cleanup/public/logo512.png -------------------------------------------------------------------------------- /06.2 Netlify Init and Setup/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jamesqquick/React-and-Serverless-Fullstack-Web-Development/HEAD/06.2 Netlify Init and Setup/public/favicon.ico -------------------------------------------------------------------------------- /06.2 Netlify Init and Setup/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jamesqquick/React-and-Serverless-Fullstack-Web-Development/HEAD/06.2 Netlify Init and Setup/public/logo192.png -------------------------------------------------------------------------------- /06.2 Netlify Init and Setup/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jamesqquick/React-and-Serverless-Fullstack-Web-Development/HEAD/06.2 Netlify Init and Setup/public/logo512.png -------------------------------------------------------------------------------- /08.4 Validate Access Token/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jamesqquick/React-and-Serverless-Fullstack-Web-Development/HEAD/08.4 Validate Access Token/public/favicon.ico -------------------------------------------------------------------------------- /08.4 Validate Access Token/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jamesqquick/React-and-Serverless-Fullstack-Web-Development/HEAD/08.4 Validate Access Token/public/logo192.png -------------------------------------------------------------------------------- /08.4 Validate Access Token/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jamesqquick/React-and-Serverless-Fullstack-Web-Development/HEAD/08.4 Validate Access Token/public/logo512.png -------------------------------------------------------------------------------- /09.4 Create Use Theme Hook/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jamesqquick/React-and-Serverless-Fullstack-Web-Development/HEAD/09.4 Create Use Theme Hook/public/favicon.ico -------------------------------------------------------------------------------- /09.4 Create Use Theme Hook/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jamesqquick/React-and-Serverless-Fullstack-Web-Development/HEAD/09.4 Create Use Theme Hook/public/logo192.png -------------------------------------------------------------------------------- /09.4 Create Use Theme Hook/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jamesqquick/React-and-Serverless-Fullstack-Web-Development/HEAD/09.4 Create Use Theme Hook/public/logo512.png -------------------------------------------------------------------------------- /03.3 Create Time Functionality/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jamesqquick/React-and-Serverless-Fullstack-Web-Development/HEAD/03.3 Create Time Functionality/public/favicon.ico -------------------------------------------------------------------------------- /03.3 Create Time Functionality/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jamesqquick/React-and-Serverless-Fullstack-Web-Development/HEAD/03.3 Create Time Functionality/public/logo192.png -------------------------------------------------------------------------------- /03.3 Create Time Functionality/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jamesqquick/React-and-Serverless-Fullstack-Web-Development/HEAD/03.3 Create Time Functionality/public/logo512.png -------------------------------------------------------------------------------- /05.2Airtable Workspace and API/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jamesqquick/React-and-Serverless-Fullstack-Web-Development/HEAD/05.2Airtable Workspace and API/public/favicon.ico -------------------------------------------------------------------------------- /05.2Airtable Workspace and API/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jamesqquick/React-and-Serverless-Fullstack-Web-Development/HEAD/05.2Airtable Workspace and API/public/logo192.png -------------------------------------------------------------------------------- /05.2Airtable Workspace and API/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jamesqquick/React-and-Serverless-Fullstack-Web-Development/HEAD/05.2Airtable Workspace and API/public/logo512.png -------------------------------------------------------------------------------- /06.5 Setup Evironment Vairbles/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jamesqquick/React-and-Serverless-Fullstack-Web-Development/HEAD/06.5 Setup Evironment Vairbles/public/favicon.ico -------------------------------------------------------------------------------- /06.5 Setup Evironment Vairbles/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jamesqquick/React-and-Serverless-Fullstack-Web-Development/HEAD/06.5 Setup Evironment Vairbles/public/logo192.png -------------------------------------------------------------------------------- /06.5 Setup Evironment Vairbles/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jamesqquick/React-and-Serverless-Fullstack-Web-Development/HEAD/06.5 Setup Evironment Vairbles/public/logo512.png -------------------------------------------------------------------------------- /01.2 Create Starter React Project/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jamesqquick/React-and-Serverless-Fullstack-Web-Development/HEAD/01.2 Create Starter React Project/public/favicon.ico -------------------------------------------------------------------------------- /01.2 Create Starter React Project/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jamesqquick/React-and-Serverless-Fullstack-Web-Development/HEAD/01.2 Create Starter React Project/public/logo192.png -------------------------------------------------------------------------------- /01.2 Create Starter React Project/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jamesqquick/React-and-Serverless-Fullstack-Web-Development/HEAD/01.2 Create Starter React Project/public/logo512.png -------------------------------------------------------------------------------- /03.4 Track User Input on Keypress/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jamesqquick/React-and-Serverless-Fullstack-Web-Development/HEAD/03.4 Track User Input on Keypress/public/favicon.ico -------------------------------------------------------------------------------- /03.4 Track User Input on Keypress/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jamesqquick/React-and-Serverless-Fullstack-Web-Development/HEAD/03.4 Track User Input on Keypress/public/logo192.png -------------------------------------------------------------------------------- /03.4 Track User Input on Keypress/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jamesqquick/React-and-Serverless-Fullstack-Web-Development/HEAD/03.4 Track User Input on Keypress/public/logo512.png -------------------------------------------------------------------------------- /06.9 Save High Score in Game Over/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jamesqquick/React-and-Serverless-Fullstack-Web-Development/HEAD/06.9 Save High Score in Game Over/public/favicon.ico -------------------------------------------------------------------------------- /06.9 Save High Score in Game Over/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jamesqquick/React-and-Serverless-Fullstack-Web-Development/HEAD/06.9 Save High Score in Game Over/public/logo192.png -------------------------------------------------------------------------------- /06.9 Save High Score in Game Over/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jamesqquick/React-and-Serverless-Fullstack-Web-Development/HEAD/06.9 Save High Score in Game Over/public/logo512.png -------------------------------------------------------------------------------- /07.3 Add Authentication in React/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jamesqquick/React-and-Serverless-Fullstack-Web-Development/HEAD/07.3 Add Authentication in React/public/favicon.ico -------------------------------------------------------------------------------- /07.3 Add Authentication in React/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jamesqquick/React-and-Serverless-Fullstack-Web-Development/HEAD/07.3 Add Authentication in React/public/logo192.png -------------------------------------------------------------------------------- /07.3 Add Authentication in React/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jamesqquick/React-and-Serverless-Fullstack-Web-Development/HEAD/07.3 Add Authentication in React/public/logo512.png -------------------------------------------------------------------------------- /01.3 Add Routing with React Router/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jamesqquick/React-and-Serverless-Fullstack-Web-Development/HEAD/01.3 Add Routing with React Router/public/favicon.ico -------------------------------------------------------------------------------- /01.3 Add Routing with React Router/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jamesqquick/React-and-Serverless-Fullstack-Web-Development/HEAD/01.3 Add Routing with React Router/public/logo192.png -------------------------------------------------------------------------------- /01.3 Add Routing with React Router/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jamesqquick/React-and-Serverless-Fullstack-Web-Development/HEAD/01.3 Add Routing with React Router/public/logo512.png -------------------------------------------------------------------------------- /02.2 Create Base Styled Components/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jamesqquick/React-and-Serverless-Fullstack-Web-Development/HEAD/02.2 Create Base Styled Components/public/favicon.ico -------------------------------------------------------------------------------- /02.2 Create Base Styled Components/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jamesqquick/React-and-Serverless-Fullstack-Web-Development/HEAD/02.2 Create Base Styled Components/public/logo192.png -------------------------------------------------------------------------------- /02.2 Create Base Styled Components/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jamesqquick/React-and-Serverless-Fullstack-Web-Development/HEAD/02.2 Create Base Styled Components/public/logo512.png -------------------------------------------------------------------------------- /06.1 Intro to Serverless Functions/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jamesqquick/React-and-Serverless-Fullstack-Web-Development/HEAD/06.1 Intro to Serverless Functions/public/favicon.ico -------------------------------------------------------------------------------- /06.1 Intro to Serverless Functions/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jamesqquick/React-and-Serverless-Fullstack-Web-Development/HEAD/06.1 Intro to Serverless Functions/public/logo192.png -------------------------------------------------------------------------------- /06.1 Intro to Serverless Functions/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jamesqquick/React-and-Serverless-Fullstack-Web-Development/HEAD/06.1 Intro to Serverless Functions/public/logo512.png -------------------------------------------------------------------------------- /02.1 Introduction to Styled Components/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jamesqquick/React-and-Serverless-Fullstack-Web-Development/HEAD/02.1 Introduction to Styled Components/public/favicon.ico -------------------------------------------------------------------------------- /02.1 Introduction to Styled Components/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jamesqquick/React-and-Serverless-Fullstack-Web-Development/HEAD/02.1 Introduction to Styled Components/public/logo192.png -------------------------------------------------------------------------------- /02.1 Introduction to Styled Components/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jamesqquick/React-and-Serverless-Fullstack-Web-Development/HEAD/02.1 Introduction to Styled Components/public/logo512.png -------------------------------------------------------------------------------- /03.5 Update User Score Based on Input/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jamesqquick/React-and-Serverless-Fullstack-Web-Development/HEAD/03.5 Update User Score Based on Input/public/favicon.ico -------------------------------------------------------------------------------- /03.5 Update User Score Based on Input/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jamesqquick/React-and-Serverless-Fullstack-Web-Development/HEAD/03.5 Update User Score Based on Input/public/logo192.png -------------------------------------------------------------------------------- /03.5 Update User Score Based on Input/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jamesqquick/React-and-Serverless-Fullstack-Web-Development/HEAD/03.5 Update User Score Based on Input/public/logo512.png -------------------------------------------------------------------------------- /06.8 Refactoring Common Airtable Code/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jamesqquick/React-and-Serverless-Fullstack-Web-Development/HEAD/06.8 Refactoring Common Airtable Code/public/favicon.ico -------------------------------------------------------------------------------- /06.8 Refactoring Common Airtable Code/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jamesqquick/React-and-Serverless-Fullstack-Web-Development/HEAD/06.8 Refactoring Common Airtable Code/public/logo192.png -------------------------------------------------------------------------------- /06.8 Refactoring Common Airtable Code/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jamesqquick/React-and-Serverless-Fullstack-Web-Development/HEAD/06.8 Refactoring Common Airtable Code/public/logo512.png -------------------------------------------------------------------------------- /08.3 Retrieve and Parse Access Token/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jamesqquick/React-and-Serverless-Fullstack-Web-Development/HEAD/08.3 Retrieve and Parse Access Token/public/favicon.ico -------------------------------------------------------------------------------- /08.3 Retrieve and Parse Access Token/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jamesqquick/React-and-Serverless-Fullstack-Web-Development/HEAD/08.3 Retrieve and Parse Access Token/public/logo192.png -------------------------------------------------------------------------------- /08.3 Retrieve and Parse Access Token/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jamesqquick/React-and-Serverless-Fullstack-Web-Development/HEAD/08.3 Retrieve and Parse Access Token/public/logo512.png -------------------------------------------------------------------------------- /09.2 Create CSS Variables for Theming/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jamesqquick/React-and-Serverless-Fullstack-Web-Development/HEAD/09.2 Create CSS Variables for Theming/public/favicon.ico -------------------------------------------------------------------------------- /09.2 Create CSS Variables for Theming/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jamesqquick/React-and-Serverless-Fullstack-Web-Development/HEAD/09.2 Create CSS Variables for Theming/public/logo192.png -------------------------------------------------------------------------------- /09.2 Create CSS Variables for Theming/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jamesqquick/React-and-Serverless-Fullstack-Web-Development/HEAD/09.2 Create CSS Variables for Theming/public/logo512.png -------------------------------------------------------------------------------- /02.3 Style the Navbar/src/styled/Main.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | export const Main = styled.div` 4 | margin: 0; 5 | background-color: #f9f9f9; 6 | min-height: 100vh; 7 | `; 8 | -------------------------------------------------------------------------------- /02.4 Style the Home Page/src/styled/Main.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | export const Main = styled.div` 4 | margin: 0; 5 | background-color: #f9f9f9; 6 | min-height: 100vh; 7 | `; 8 | -------------------------------------------------------------------------------- /02.5 Style the Game Page/src/styled/Main.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | export const Main = styled.div` 4 | margin: 0; 5 | background-color: #f9f9f9; 6 | min-height: 100vh; 7 | `; 8 | -------------------------------------------------------------------------------- /03.1 Intro to React Hooks/src/styled/Main.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | export const Main = styled.div` 4 | margin: 0; 5 | background-color: #f9f9f9; 6 | min-height: 100vh; 7 | `; 8 | -------------------------------------------------------------------------------- /03.3 Track Score with Your First React Hook/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jamesqquick/React-and-Serverless-Fullstack-Web-Development/HEAD/03.3 Track Score with Your First React Hook/public/favicon.ico -------------------------------------------------------------------------------- /03.3 Track Score with Your First React Hook/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jamesqquick/React-and-Serverless-Fullstack-Web-Development/HEAD/03.3 Track Score with Your First React Hook/public/logo192.png -------------------------------------------------------------------------------- /03.3 Track Score with Your First React Hook/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jamesqquick/React-and-Serverless-Fullstack-Web-Development/HEAD/03.3 Track Score with Your First React Hook/public/logo512.png -------------------------------------------------------------------------------- /04.1 Intro to React Hooks/src/styled/Main.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | export const Main = styled.div` 4 | margin: 0; 5 | background-color: #f9f9f9; 6 | min-height: 100vh; 7 | `; 8 | -------------------------------------------------------------------------------- /04.2 Track User's Score Between Components/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jamesqquick/React-and-Serverless-Fullstack-Web-Development/HEAD/04.2 Track User's Score Between Components/public/favicon.ico -------------------------------------------------------------------------------- /04.2 Track User's Score Between Components/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jamesqquick/React-and-Serverless-Fullstack-Web-Development/HEAD/04.2 Track User's Score Between Components/public/logo192.png -------------------------------------------------------------------------------- /04.2 Track User's Score Between Components/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jamesqquick/React-and-Serverless-Fullstack-Web-Development/HEAD/04.2 Track User's Score Between Components/public/logo512.png -------------------------------------------------------------------------------- /05.1 Intro to Airtable/src/styled/Main.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | export const Main = styled.div` 4 | margin: 0; 5 | background-color: #f9f9f9; 6 | min-height: 100vh; 7 | `; 8 | -------------------------------------------------------------------------------- /06.10 Game Over Bug Fix and Extra Styling/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jamesqquick/React-and-Serverless-Fullstack-Web-Development/HEAD/06.10 Game Over Bug Fix and Extra Styling/public/favicon.ico -------------------------------------------------------------------------------- /06.10 Game Over Bug Fix and Extra Styling/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jamesqquick/React-and-Serverless-Fullstack-Web-Development/HEAD/06.10 Game Over Bug Fix and Extra Styling/public/logo192.png -------------------------------------------------------------------------------- /06.10 Game Over Bug Fix and Extra Styling/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jamesqquick/React-and-Serverless-Fullstack-Web-Development/HEAD/06.10 Game Over Bug Fix and Extra Styling/public/logo512.png -------------------------------------------------------------------------------- /06.6 Display High Scores/src/styled/Main.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | export const Main = styled.div` 4 | margin: 0; 5 | background-color: #f9f9f9; 6 | min-height: 100vh; 7 | `; 8 | -------------------------------------------------------------------------------- /08.4 Validate Access Token/src/styled/Main.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | export const Main = styled.div` 4 | margin: 0; 5 | background-color: #f9f9f9; 6 | min-height: 100vh; 7 | `; 8 | -------------------------------------------------------------------------------- /10.1 Styling and Cleanup/src/auth_config.json: -------------------------------------------------------------------------------- 1 | { 2 | "domain": "learn-build-type-jqq.auth0.com", 3 | "clientId": "Pd3tPwbxTgzWs9287vz1ejdJBIUhnDP8", 4 | "audience": "https://learnbuildtypejqqapi/" 5 | } 6 | -------------------------------------------------------------------------------- /10.2 Final Deploy Configurations in Netlify/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jamesqquick/React-and-Serverless-Fullstack-Web-Development/HEAD/10.2 Final Deploy Configurations in Netlify/public/favicon.ico -------------------------------------------------------------------------------- /10.2 Final Deploy Configurations in Netlify/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jamesqquick/React-and-Serverless-Fullstack-Web-Development/HEAD/10.2 Final Deploy Configurations in Netlify/public/logo192.png -------------------------------------------------------------------------------- /10.2 Final Deploy Configurations in Netlify/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jamesqquick/React-and-Serverless-Fullstack-Web-Development/HEAD/10.2 Final Deploy Configurations in Netlify/public/logo512.png -------------------------------------------------------------------------------- /01.4 Add a Navbar/src/pages/Game.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | export default function Game() { 4 | return ( 5 |
6 |

Game

7 |
8 | ); 9 | } 10 | -------------------------------------------------------------------------------- /01.4 Add a Navbar/src/pages/Home.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | export default function Home() { 4 | return ( 5 |
6 |

Home

7 |
8 | ); 9 | } 10 | -------------------------------------------------------------------------------- /02.3 Style the Navbar/src/pages/Game.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | export default function Game() { 4 | return ( 5 |
6 |

Game

7 |
8 | ); 9 | } 10 | -------------------------------------------------------------------------------- /02.3 Style the Navbar/src/pages/Home.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | export default function Home() { 4 | return ( 5 |
6 |

Home

7 |
8 | ); 9 | } 10 | -------------------------------------------------------------------------------- /03.3 Create Time Functionality/src/styled/Main.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | export const Main = styled.div` 4 | margin: 0; 5 | background-color: #f9f9f9; 6 | min-height: 100vh; 7 | `; 8 | -------------------------------------------------------------------------------- /05.2Airtable Workspace and API/src/styled/Main.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | export const Main = styled.div` 4 | margin: 0; 5 | background-color: #f9f9f9; 6 | min-height: 100vh; 7 | `; 8 | -------------------------------------------------------------------------------- /06.2 Netlify Init and Setup/src/styled/Main.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | export const Main = styled.div` 4 | margin: 0; 5 | background-color: #f9f9f9; 6 | min-height: 100vh; 7 | `; 8 | -------------------------------------------------------------------------------- /06.3 Creating Your First Serverless Function/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jamesqquick/React-and-Serverless-Fullstack-Web-Development/HEAD/06.3 Creating Your First Serverless Function/public/favicon.ico -------------------------------------------------------------------------------- /06.3 Creating Your First Serverless Function/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jamesqquick/React-and-Serverless-Fullstack-Web-Development/HEAD/06.3 Creating Your First Serverless Function/public/logo192.png -------------------------------------------------------------------------------- /06.3 Creating Your First Serverless Function/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jamesqquick/React-and-Serverless-Fullstack-Web-Development/HEAD/06.3 Creating Your First Serverless Function/public/logo512.png -------------------------------------------------------------------------------- /06.5 Setup Evironment Vairbles/src/styled/Main.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | export const Main = styled.div` 4 | margin: 0; 5 | background-color: #f9f9f9; 6 | min-height: 100vh; 7 | `; 8 | -------------------------------------------------------------------------------- /08.4 Validate Access Token/src/auth_config.json: -------------------------------------------------------------------------------- 1 | { 2 | "domain": "learn-build-type-jqq.auth0.com", 3 | "clientId": "Pd3tPwbxTgzWs9287vz1ejdJBIUhnDP8", 4 | "audience": "https://learnbuildtypejqqapi/" 5 | } 6 | -------------------------------------------------------------------------------- /09.3 Use the Styled Components Theme Provider/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jamesqquick/React-and-Serverless-Fullstack-Web-Development/HEAD/09.3 Use the Styled Components Theme Provider/public/favicon.ico -------------------------------------------------------------------------------- /09.3 Use the Styled Components Theme Provider/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jamesqquick/React-and-Serverless-Fullstack-Web-Development/HEAD/09.3 Use the Styled Components Theme Provider/public/logo192.png -------------------------------------------------------------------------------- /09.3 Use the Styled Components Theme Provider/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jamesqquick/React-and-Serverless-Fullstack-Web-Development/HEAD/09.3 Use the Styled Components Theme Provider/public/logo512.png -------------------------------------------------------------------------------- /09.4 Create Use Theme Hook/src/auth_config.json: -------------------------------------------------------------------------------- 1 | { 2 | "domain": "learn-build-type-jqq.auth0.com", 3 | "clientId": "Pd3tPwbxTgzWs9287vz1ejdJBIUhnDP8", 4 | "audience": "https://learnbuildtypejqqapi/" 5 | } 6 | -------------------------------------------------------------------------------- /09.5 Persisting Theme Choice in Local Storage/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jamesqquick/React-and-Serverless-Fullstack-Web-Development/HEAD/09.5 Persisting Theme Choice in Local Storage/public/favicon.ico -------------------------------------------------------------------------------- /09.5 Persisting Theme Choice in Local Storage/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jamesqquick/React-and-Serverless-Fullstack-Web-Development/HEAD/09.5 Persisting Theme Choice in Local Storage/public/logo192.png -------------------------------------------------------------------------------- /09.5 Persisting Theme Choice in Local Storage/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jamesqquick/React-and-Serverless-Fullstack-Web-Development/HEAD/09.5 Persisting Theme Choice in Local Storage/public/logo512.png -------------------------------------------------------------------------------- /02.2 Create Base Styled Components/src/styled/Main.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | export const Main = styled.div` 4 | margin: 0; 5 | background-color: #f9f9f9; 6 | min-height: 100vh; 7 | `; 8 | -------------------------------------------------------------------------------- /02.4 Style the Home Page/src/pages/Game.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | export default function Game() { 4 | return ( 5 |
6 |

Game

7 |
8 | ); 9 | } 10 | -------------------------------------------------------------------------------- /03.4 Track User Input on Keypress/src/styled/Main.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | export const Main = styled.div` 4 | margin: 0; 5 | background-color: #f9f9f9; 6 | min-height: 100vh; 7 | `; 8 | -------------------------------------------------------------------------------- /06.1 Intro to Serverless Functions/src/styled/Main.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | export const Main = styled.div` 4 | margin: 0; 5 | background-color: #f9f9f9; 6 | min-height: 100vh; 7 | `; 8 | -------------------------------------------------------------------------------- /06.4 Serverless Function to Retrieve High Scores/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jamesqquick/React-and-Serverless-Fullstack-Web-Development/HEAD/06.4 Serverless Function to Retrieve High Scores/public/favicon.ico -------------------------------------------------------------------------------- /06.4 Serverless Function to Retrieve High Scores/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jamesqquick/React-and-Serverless-Fullstack-Web-Development/HEAD/06.4 Serverless Function to Retrieve High Scores/public/logo192.png -------------------------------------------------------------------------------- /06.4 Serverless Function to Retrieve High Scores/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jamesqquick/React-and-Serverless-Fullstack-Web-Development/HEAD/06.4 Serverless Function to Retrieve High Scores/public/logo512.png -------------------------------------------------------------------------------- /06.7 Create Save High Score Serverless Function/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jamesqquick/React-and-Serverless-Fullstack-Web-Development/HEAD/06.7 Create Save High Score Serverless Function/public/favicon.ico -------------------------------------------------------------------------------- /06.7 Create Save High Score Serverless Function/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jamesqquick/React-and-Serverless-Fullstack-Web-Development/HEAD/06.7 Create Save High Score Serverless Function/public/logo192.png -------------------------------------------------------------------------------- /06.7 Create Save High Score Serverless Function/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jamesqquick/React-and-Serverless-Fullstack-Web-Development/HEAD/06.7 Create Save High Score Serverless Function/public/logo512.png -------------------------------------------------------------------------------- /06.9 Save High Score in Game Over/src/styled/Main.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | export const Main = styled.div` 4 | margin: 0; 5 | background-color: #f9f9f9; 6 | min-height: 100vh; 7 | `; 8 | -------------------------------------------------------------------------------- /07.3 Add Authentication in React/src/styled/Main.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | export const Main = styled.div` 4 | margin: 0; 5 | background-color: #f9f9f9; 6 | min-height: 100vh; 7 | `; 8 | -------------------------------------------------------------------------------- /08.2 Include Access Token in Save Score Request/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jamesqquick/React-and-Serverless-Fullstack-Web-Development/HEAD/08.2 Include Access Token in Save Score Request/public/favicon.ico -------------------------------------------------------------------------------- /08.2 Include Access Token in Save Score Request/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jamesqquick/React-and-Serverless-Fullstack-Web-Development/HEAD/08.2 Include Access Token in Save Score Request/public/logo192.png -------------------------------------------------------------------------------- /08.2 Include Access Token in Save Score Request/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jamesqquick/React-and-Serverless-Fullstack-Web-Development/HEAD/08.2 Include Access Token in Save Score Request/public/logo512.png -------------------------------------------------------------------------------- /08.3 Retrieve and Parse Access Token/src/styled/Main.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | export const Main = styled.div` 4 | margin: 0; 5 | background-color: #f9f9f9; 6 | min-height: 100vh; 7 | `; 8 | -------------------------------------------------------------------------------- /01.4 Add a Navbar/src/pages/GameOver.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | export default function GameOver() { 4 | return ( 5 |
6 |

Game Over

7 |
8 | ); 9 | } 10 | -------------------------------------------------------------------------------- /03.5 Update User Score Based on Input/src/styled/Main.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | export const Main = styled.div` 4 | margin: 0; 5 | background-color: #f9f9f9; 6 | min-height: 100vh; 7 | `; 8 | -------------------------------------------------------------------------------- /06.10 Game Over Bug Fix and Extra Styling/src/styled/Main.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | export const Main = styled.div` 4 | margin: 0; 5 | background-color: #f9f9f9; 6 | min-height: 100vh; 7 | `; 8 | -------------------------------------------------------------------------------- /06.8 Refactoring Common Airtable Code/src/styled/Main.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | export const Main = styled.div` 4 | margin: 0; 5 | background-color: #f9f9f9; 6 | min-height: 100vh; 7 | `; 8 | -------------------------------------------------------------------------------- /08.3 Retrieve and Parse Access Token/src/auth_config.json: -------------------------------------------------------------------------------- 1 | { 2 | "domain": "learn-build-type-jqq.auth0.com", 3 | "clientId": "Pd3tPwbxTgzWs9287vz1ejdJBIUhnDP8", 4 | "audience": "https://learnbuildtypejqqapi/" 5 | } 6 | -------------------------------------------------------------------------------- /09.2 Create CSS Variables for Theming/src/auth_config.json: -------------------------------------------------------------------------------- 1 | { 2 | "domain": "learn-build-type-jqq.auth0.com", 3 | "clientId": "Pd3tPwbxTgzWs9287vz1ejdJBIUhnDP8", 4 | "audience": "https://learnbuildtypejqqapi/" 5 | } 6 | -------------------------------------------------------------------------------- /09.4 Create Use Theme Hook/src/styled/Main.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | export const Main = styled.div` 4 | margin: 0; 5 | background-color: var(--main-bg-color); 6 | min-height: 100vh; 7 | `; 8 | -------------------------------------------------------------------------------- /10.1 Styling and Cleanup/src/styled/Main.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | export const Main = styled.div` 4 | margin: 0; 5 | background-color: var(--main-bg-color); 6 | min-height: 100vh; 7 | `; 8 | -------------------------------------------------------------------------------- /01.3 Add Routing with React Router/src/pages/Game.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | export default function Game() { 4 | return ( 5 |
6 |

Game

7 |
8 | ); 9 | } 10 | -------------------------------------------------------------------------------- /01.3 Add Routing with React Router/src/pages/Home.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | export default function Home() { 4 | return ( 5 |
6 |

Home

7 |
8 | ); 9 | } 10 | -------------------------------------------------------------------------------- /01.4 Add a Navbar/src/pages/HighScores.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | export default function HighScores() { 4 | return ( 5 |
6 |

High Scores

7 |
8 | ); 9 | } 10 | -------------------------------------------------------------------------------- /02.2 Create Base Styled Components/src/pages/Game.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | export default function Game() { 4 | return ( 5 |
6 |

Game

7 |
8 | ); 9 | } 10 | -------------------------------------------------------------------------------- /02.2 Create Base Styled Components/src/pages/Home.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | export default function Home() { 4 | return ( 5 |
6 |

Home

7 |
8 | ); 9 | } 10 | -------------------------------------------------------------------------------- /02.3 Style the Navbar/src/pages/GameOver.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | export default function GameOver() { 4 | return ( 5 |
6 |

Game Over

7 |
8 | ); 9 | } 10 | -------------------------------------------------------------------------------- /03.3 Track Score with Your First React Hook/src/styled/Main.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | export const Main = styled.div` 4 | margin: 0; 5 | background-color: #f9f9f9; 6 | min-height: 100vh; 7 | `; 8 | -------------------------------------------------------------------------------- /04.2 Track User's Score Between Components/src/styled/Main.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | export const Main = styled.div` 4 | margin: 0; 5 | background-color: #f9f9f9; 6 | min-height: 100vh; 7 | `; 8 | -------------------------------------------------------------------------------- /06.3 Creating Your First Serverless Function/src/styled/Main.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | export const Main = styled.div` 4 | margin: 0; 5 | background-color: #f9f9f9; 6 | min-height: 100vh; 7 | `; 8 | -------------------------------------------------------------------------------- /09.3 Use the Styled Components Theme Provider/src/auth_config.json: -------------------------------------------------------------------------------- 1 | { 2 | "domain": "learn-build-type-jqq.auth0.com", 3 | "clientId": "Pd3tPwbxTgzWs9287vz1ejdJBIUhnDP8", 4 | "audience": "https://learnbuildtypejqqapi/" 5 | } 6 | -------------------------------------------------------------------------------- /09.5 Persisting Theme Choice in Local Storage/src/auth_config.json: -------------------------------------------------------------------------------- 1 | { 2 | "domain": "learn-build-type-jqq.auth0.com", 3 | "clientId": "Pd3tPwbxTgzWs9287vz1ejdJBIUhnDP8", 4 | "audience": "https://learnbuildtypejqqapi/" 5 | } 6 | -------------------------------------------------------------------------------- /10.2 Final Deploy Configurations in Netlify/netlify.toml: -------------------------------------------------------------------------------- 1 | [build] 2 | publish = "/build" 3 | command = "npm run build" 4 | functions = "functions" 5 | 6 | [[redirects]] 7 | from = "/*" 8 | to = "/index.html" 9 | status = 200 -------------------------------------------------------------------------------- /10.2 Final Deploy Configurations in Netlify/src/auth_config.json: -------------------------------------------------------------------------------- 1 | { 2 | "domain": "learn-build-type-jqq.auth0.com", 3 | "clientId": "Pd3tPwbxTgzWs9287vz1ejdJBIUhnDP8", 4 | "audience": "https://learnbuildtypejqqapi/" 5 | } 6 | -------------------------------------------------------------------------------- /02.1 Introduction to Styled Components/src/pages/Game.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | export default function Game() { 4 | return ( 5 |
6 |

Game

7 |
8 | ); 9 | } 10 | -------------------------------------------------------------------------------- /02.1 Introduction to Styled Components/src/pages/Home.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | export default function Home() { 4 | return ( 5 |
6 |

Home

7 |
8 | ); 9 | } 10 | -------------------------------------------------------------------------------- /02.3 Style the Navbar/src/pages/HighScores.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | export default function HighScores() { 4 | return ( 5 |
6 |

High Scores

7 |
8 | ); 9 | } 10 | -------------------------------------------------------------------------------- /02.3 Style the Navbar/src/styled/Container.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | export const Container = styled.div` 4 | padding: 20px; 5 | margin: 0 auto; 6 | margin-top: 20px; 7 | max-width: 800px; 8 | `; 9 | -------------------------------------------------------------------------------- /02.4 Style the Home Page/src/pages/GameOver.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | export default function GameOver() { 4 | return ( 5 |
6 |

Game Over

7 |
8 | ); 9 | } 10 | -------------------------------------------------------------------------------- /02.5 Style the Game Page/src/pages/GameOver.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | export default function GameOver() { 4 | return ( 5 |
6 |

Game Over

7 |
8 | ); 9 | } 10 | -------------------------------------------------------------------------------- /03.1 Intro to React Hooks/src/pages/GameOver.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | export default function GameOver() { 4 | return ( 5 |
6 |

Game Over

7 |
8 | ); 9 | } 10 | -------------------------------------------------------------------------------- /04.1 Intro to React Hooks/src/pages/GameOver.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | export default function GameOver() { 4 | return ( 5 |
6 |

Game Over

7 |
8 | ); 9 | } 10 | -------------------------------------------------------------------------------- /05.1 Intro to Airtable/src/pages/HighScores.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | export default function HighScores() { 4 | return ( 5 |
6 |

High Scores

7 |
8 | ); 9 | } 10 | -------------------------------------------------------------------------------- /05.1 Intro to Airtable/src/styled/Container.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | export const Container = styled.div` 4 | padding: 20px; 5 | margin: 0 auto; 6 | margin-top: 20px; 7 | max-width: 800px; 8 | `; 9 | -------------------------------------------------------------------------------- /06.4 Serverless Function to Retrieve High Scores/src/styled/Main.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | export const Main = styled.div` 4 | margin: 0; 5 | background-color: #f9f9f9; 6 | min-height: 100vh; 7 | `; 8 | -------------------------------------------------------------------------------- /06.7 Create Save High Score Serverless Function/src/styled/Main.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | export const Main = styled.div` 4 | margin: 0; 5 | background-color: #f9f9f9; 6 | min-height: 100vh; 7 | `; 8 | -------------------------------------------------------------------------------- /08.2 Include Access Token in Save Score Request/src/auth_config.json: -------------------------------------------------------------------------------- 1 | { 2 | "domain": "learn-build-type-jqq.auth0.com", 3 | "clientId": "Pd3tPwbxTgzWs9287vz1ejdJBIUhnDP8", 4 | "audience": "https://learnbuildtypejqqapi/" 5 | } 6 | -------------------------------------------------------------------------------- /08.2 Include Access Token in Save Score Request/src/styled/Main.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | export const Main = styled.div` 4 | margin: 0; 5 | background-color: #f9f9f9; 6 | min-height: 100vh; 7 | `; 8 | -------------------------------------------------------------------------------- /09.2 Create CSS Variables for Theming/src/styled/Main.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | export const Main = styled.div` 4 | margin: 0; 5 | background-color: var(--main-bg-color); 6 | min-height: 100vh; 7 | `; 8 | -------------------------------------------------------------------------------- /02.4 Style the Home Page/src/pages/HighScores.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | export default function HighScores() { 4 | return ( 5 |
6 |

High Scores

7 |
8 | ); 9 | } 10 | -------------------------------------------------------------------------------- /02.4 Style the Home Page/src/styled/Container.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | export const Container = styled.div` 4 | padding: 20px; 5 | margin: 0 auto; 6 | margin-top: 20px; 7 | max-width: 800px; 8 | `; 9 | -------------------------------------------------------------------------------- /02.5 Style the Game Page/src/pages/HighScores.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | export default function HighScores() { 4 | return ( 5 |
6 |

High Scores

7 |
8 | ); 9 | } 10 | -------------------------------------------------------------------------------- /02.5 Style the Game Page/src/styled/Container.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | export const Container = styled.div` 4 | padding: 20px; 5 | margin: 0 auto; 6 | margin-top: 20px; 7 | max-width: 800px; 8 | `; 9 | -------------------------------------------------------------------------------- /03.1 Intro to React Hooks/src/pages/HighScores.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | export default function HighScores() { 4 | return ( 5 |
6 |

High Scores

7 |
8 | ); 9 | } 10 | -------------------------------------------------------------------------------- /03.1 Intro to React Hooks/src/styled/Container.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | export const Container = styled.div` 4 | padding: 20px; 5 | margin: 0 auto; 6 | margin-top: 20px; 7 | max-width: 800px; 8 | `; 9 | -------------------------------------------------------------------------------- /03.3 Create Time Functionality/src/pages/GameOver.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | export default function GameOver() { 4 | return ( 5 |
6 |

Game Over

7 |
8 | ); 9 | } 10 | -------------------------------------------------------------------------------- /03.4 Track User Input on Keypress/src/pages/GameOver.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | export default function GameOver() { 4 | return ( 5 |
6 |

Game Over

7 |
8 | ); 9 | } 10 | -------------------------------------------------------------------------------- /04.1 Intro to React Hooks/src/pages/HighScores.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | export default function HighScores() { 4 | return ( 5 |
6 |

High Scores

7 |
8 | ); 9 | } 10 | -------------------------------------------------------------------------------- /04.1 Intro to React Hooks/src/styled/Container.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | export const Container = styled.div` 4 | padding: 20px; 5 | margin: 0 auto; 6 | margin-top: 20px; 7 | max-width: 800px; 8 | `; 9 | -------------------------------------------------------------------------------- /06.2 Netlify Init and Setup/src/pages/HighScores.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | export default function HighScores() { 4 | return ( 5 |
6 |

High Scores

7 |
8 | ); 9 | } 10 | -------------------------------------------------------------------------------- /06.2 Netlify Init and Setup/src/styled/Container.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | export const Container = styled.div` 4 | padding: 20px; 5 | margin: 0 auto; 6 | margin-top: 20px; 7 | max-width: 800px; 8 | `; 9 | -------------------------------------------------------------------------------- /06.6 Display High Scores/src/styled/Container.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | export const Container = styled.div` 4 | padding: 20px; 5 | margin: 0 auto; 6 | margin-top: 20px; 7 | max-width: 800px; 8 | `; 9 | -------------------------------------------------------------------------------- /09.4 Create Use Theme Hook/src/styled/Container.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | export const Container = styled.div` 4 | padding: 20px; 5 | margin: 0 auto; 6 | max-width: 800px; 7 | text-align: center; 8 | `; 9 | -------------------------------------------------------------------------------- /10.1 Styling and Cleanup/src/styled/Container.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | export const Container = styled.div` 4 | padding: 20px; 5 | margin: 0 auto; 6 | max-width: 800px; 7 | text-align: center; 8 | `; 9 | -------------------------------------------------------------------------------- /10.2 Final Deploy Configurations in Netlify/src/styled/Main.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | export const Main = styled.div` 4 | margin: 0; 5 | background-color: var(--main-bg-color); 6 | min-height: 100vh; 7 | `; 8 | -------------------------------------------------------------------------------- /01.3 Add Routing with React Router/src/pages/GameOver.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | export default function GameOver() { 4 | return ( 5 |
6 |

Game Over

7 |
8 | ); 9 | } 10 | -------------------------------------------------------------------------------- /02.1 Introduction to Styled Components/src/pages/GameOver.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | export default function GameOver() { 4 | return ( 5 |
6 |

Game Over

7 |
8 | ); 9 | } 10 | -------------------------------------------------------------------------------- /02.2 Create Base Styled Components/src/pages/GameOver.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | export default function GameOver() { 4 | return ( 5 |
6 |

Game Over

7 |
8 | ); 9 | } 10 | -------------------------------------------------------------------------------- /03.3 Create Time Functionality/src/pages/HighScores.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | export default function HighScores() { 4 | return ( 5 |
6 |

High Scores

7 |
8 | ); 9 | } 10 | -------------------------------------------------------------------------------- /03.3 Create Time Functionality/src/styled/Container.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | export const Container = styled.div` 4 | padding: 20px; 5 | margin: 0 auto; 6 | margin-top: 20px; 7 | max-width: 800px; 8 | `; 9 | -------------------------------------------------------------------------------- /03.4 Track User Input on Keypress/src/styled/Container.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | export const Container = styled.div` 4 | padding: 20px; 5 | margin: 0 auto; 6 | margin-top: 20px; 7 | max-width: 800px; 8 | `; 9 | -------------------------------------------------------------------------------- /03.5 Update User Score Based on Input/src/pages/GameOver.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | export default function GameOver() { 4 | return ( 5 |
6 |

Game Over

7 |
8 | ); 9 | } 10 | -------------------------------------------------------------------------------- /05.2Airtable Workspace and API/src/pages/HighScores.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | export default function HighScores() { 4 | return ( 5 |
6 |

High Scores

7 |
8 | ); 9 | } 10 | -------------------------------------------------------------------------------- /05.2Airtable Workspace and API/src/styled/Container.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | export const Container = styled.div` 4 | padding: 20px; 5 | margin: 0 auto; 6 | margin-top: 20px; 7 | max-width: 800px; 8 | `; 9 | -------------------------------------------------------------------------------- /06.5 Setup Evironment Vairbles/src/pages/HighScores.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | export default function HighScores() { 4 | return ( 5 |
6 |

High Scores

7 |
8 | ); 9 | } 10 | -------------------------------------------------------------------------------- /06.5 Setup Evironment Vairbles/src/styled/Container.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | export const Container = styled.div` 4 | padding: 20px; 5 | margin: 0 auto; 6 | margin-top: 20px; 7 | max-width: 800px; 8 | `; 9 | -------------------------------------------------------------------------------- /06.6 Display High Scores/functions/helloWorld.js: -------------------------------------------------------------------------------- 1 | exports.handler = async (event, context) => { 2 | return { 3 | statusCode: 200, 4 | body: JSON.stringify({ 5 | msg: 'Hello World', 6 | }), 7 | }; 8 | }; 9 | -------------------------------------------------------------------------------- /06.9 Save High Score in Game Over/src/styled/Container.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | export const Container = styled.div` 4 | padding: 20px; 5 | margin: 0 auto; 6 | margin-top: 20px; 7 | max-width: 800px; 8 | `; 9 | -------------------------------------------------------------------------------- /08.4 Validate Access Token/functions/helloWorld.js: -------------------------------------------------------------------------------- 1 | exports.handler = async (event, context) => { 2 | return { 3 | statusCode: 200, 4 | body: JSON.stringify({ 5 | msg: 'Hello World', 6 | }), 7 | }; 8 | }; 9 | -------------------------------------------------------------------------------- /09.3 Use the Styled Components Theme Provider/src/styled/Main.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | export const Main = styled.div` 4 | margin: 0; 5 | background-color: var(--main-bg-color); 6 | min-height: 100vh; 7 | `; 8 | -------------------------------------------------------------------------------- /09.4 Create Use Theme Hook/functions/helloWorld.js: -------------------------------------------------------------------------------- 1 | exports.handler = async (event, context) => { 2 | return { 3 | statusCode: 200, 4 | body: JSON.stringify({ 5 | msg: 'Hello World', 6 | }), 7 | }; 8 | }; 9 | -------------------------------------------------------------------------------- /09.5 Persisting Theme Choice in Local Storage/src/styled/Main.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | export const Main = styled.div` 4 | margin: 0; 5 | background-color: var(--main-bg-color); 6 | min-height: 100vh; 7 | `; 8 | -------------------------------------------------------------------------------- /10.1 Styling and Cleanup/functions/helloWorld.js: -------------------------------------------------------------------------------- 1 | exports.handler = async (event, context) => { 2 | return { 3 | statusCode: 200, 4 | body: JSON.stringify({ 5 | msg: 'Hello World', 6 | }), 7 | }; 8 | }; 9 | -------------------------------------------------------------------------------- /01.3 Add Routing with React Router/src/pages/HighScores.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | export default function HighScores() { 4 | return ( 5 |
6 |

High Scores

7 |
8 | ); 9 | } 10 | -------------------------------------------------------------------------------- /02.2 Create Base Styled Components/src/pages/HighScores.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | export default function HighScores() { 4 | return ( 5 |
6 |

High Scores

7 |
8 | ); 9 | } 10 | -------------------------------------------------------------------------------- /02.2 Create Base Styled Components/src/styled/Container.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | export const Container = styled.div` 4 | padding: 20px; 5 | margin: 0 auto; 6 | margin-top: 20px; 7 | max-width: 800px; 8 | `; 9 | -------------------------------------------------------------------------------- /03.3 Track Score with Your First React Hook/src/pages/GameOver.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | export default function GameOver() { 4 | return ( 5 |
6 |

Game Over

7 |
8 | ); 9 | } 10 | -------------------------------------------------------------------------------- /03.4 Track User Input on Keypress/src/pages/HighScores.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | export default function HighScores() { 4 | return ( 5 |
6 |

High Scores

7 |
8 | ); 9 | } 10 | -------------------------------------------------------------------------------- /03.5 Update User Score Based on Input/src/pages/HighScores.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | export default function HighScores() { 4 | return ( 5 |
6 |

High Scores

7 |
8 | ); 9 | } 10 | -------------------------------------------------------------------------------- /03.5 Update User Score Based on Input/src/styled/Container.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | export const Container = styled.div` 4 | padding: 20px; 5 | margin: 0 auto; 6 | margin-top: 20px; 7 | max-width: 800px; 8 | `; 9 | -------------------------------------------------------------------------------- /06.1 Intro to Serverless Functions/src/pages/HighScores.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | export default function HighScores() { 4 | return ( 5 |
6 |

High Scores

7 |
8 | ); 9 | } 10 | -------------------------------------------------------------------------------- /06.1 Intro to Serverless Functions/src/styled/Container.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | export const Container = styled.div` 4 | padding: 20px; 5 | margin: 0 auto; 6 | margin-top: 20px; 7 | max-width: 800px; 8 | `; 9 | -------------------------------------------------------------------------------- /06.5 Setup Evironment Vairbles/functions/helloWorld.js: -------------------------------------------------------------------------------- 1 | exports.handler = async (event, context) => { 2 | return { 3 | statusCode: 200, 4 | body: JSON.stringify({ 5 | msg: 'Hello World', 6 | }), 7 | }; 8 | }; 9 | -------------------------------------------------------------------------------- /06.8 Refactoring Common Airtable Code/src/styled/Container.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | export const Container = styled.div` 4 | padding: 20px; 5 | margin: 0 auto; 6 | margin-top: 20px; 7 | max-width: 800px; 8 | `; 9 | -------------------------------------------------------------------------------- /06.9 Save High Score in Game Over/functions/helloWorld.js: -------------------------------------------------------------------------------- 1 | exports.handler = async (event, context) => { 2 | return { 3 | statusCode: 200, 4 | body: JSON.stringify({ 5 | msg: 'Hello World', 6 | }), 7 | }; 8 | }; 9 | -------------------------------------------------------------------------------- /07.3 Add Authentication in React/functions/helloWorld.js: -------------------------------------------------------------------------------- 1 | exports.handler = async (event, context) => { 2 | return { 3 | statusCode: 200, 4 | body: JSON.stringify({ 5 | msg: 'Hello World', 6 | }), 7 | }; 8 | }; 9 | -------------------------------------------------------------------------------- /02.1 Introduction to Styled Components/src/pages/HighScores.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | export default function HighScores() { 4 | return ( 5 |
6 |

High Scores

7 |
8 | ); 9 | } 10 | -------------------------------------------------------------------------------- /03.3 Track Score with Your First React Hook/src/styled/Container.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | export const Container = styled.div` 4 | padding: 20px; 5 | margin: 0 auto; 6 | margin-top: 20px; 7 | max-width: 800px; 8 | `; 9 | -------------------------------------------------------------------------------- /04.2 Track User's Score Between Components/src/pages/HighScores.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | export default function HighScores() { 4 | return ( 5 |
6 |

High Scores

7 |
8 | ); 9 | } 10 | -------------------------------------------------------------------------------- /04.2 Track User's Score Between Components/src/styled/Container.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | export const Container = styled.div` 4 | padding: 20px; 5 | margin: 0 auto; 6 | margin-top: 20px; 7 | max-width: 800px; 8 | `; 9 | -------------------------------------------------------------------------------- /06.8 Refactoring Common Airtable Code/functions/helloWorld.js: -------------------------------------------------------------------------------- 1 | exports.handler = async (event, context) => { 2 | return { 3 | statusCode: 200, 4 | body: JSON.stringify({ 5 | msg: 'Hello World', 6 | }), 7 | }; 8 | }; 9 | -------------------------------------------------------------------------------- /08.3 Retrieve and Parse Access Token/functions/helloWorld.js: -------------------------------------------------------------------------------- 1 | exports.handler = async (event, context) => { 2 | return { 3 | statusCode: 200, 4 | body: JSON.stringify({ 5 | msg: 'Hello World', 6 | }), 7 | }; 8 | }; 9 | -------------------------------------------------------------------------------- /09.2 Create CSS Variables for Theming/functions/helloWorld.js: -------------------------------------------------------------------------------- 1 | exports.handler = async (event, context) => { 2 | return { 3 | statusCode: 200, 4 | body: JSON.stringify({ 5 | msg: 'Hello World', 6 | }), 7 | }; 8 | }; 9 | -------------------------------------------------------------------------------- /09.2 Create CSS Variables for Theming/src/styled/Container.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | export const Container = styled.div` 4 | padding: 20px; 5 | margin: 0 auto; 6 | max-width: 800px; 7 | text-align: center; 8 | `; 9 | -------------------------------------------------------------------------------- /01.2 Create Starter React Project/src/App.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import './App.css'; 3 | 4 | function App() { 5 | return ( 6 |
7 |

App

8 |
9 | ); 10 | } 11 | 12 | export default App; 13 | -------------------------------------------------------------------------------- /03.3 Track Score with Your First React Hook/src/pages/HighScores.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | export default function HighScores() { 4 | return ( 5 |
6 |

High Scores

7 |
8 | ); 9 | } 10 | -------------------------------------------------------------------------------- /06.10 Game Over Bug Fix and Extra Styling/functions/helloWorld.js: -------------------------------------------------------------------------------- 1 | exports.handler = async (event, context) => { 2 | return { 3 | statusCode: 200, 4 | body: JSON.stringify({ 5 | msg: 'Hello World', 6 | }), 7 | }; 8 | }; 9 | -------------------------------------------------------------------------------- /06.3 Creating Your First Serverless Function/src/pages/HighScores.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | export default function HighScores() { 4 | return ( 5 |
6 |

High Scores

7 |
8 | ); 9 | } 10 | -------------------------------------------------------------------------------- /06.3 Creating Your First Serverless Function/src/styled/Container.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | export const Container = styled.div` 4 | padding: 20px; 5 | margin: 0 auto; 6 | margin-top: 20px; 7 | max-width: 800px; 8 | `; 9 | -------------------------------------------------------------------------------- /06.4 Serverless Function to Retrieve High Scores/src/styled/Container.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | export const Container = styled.div` 4 | padding: 20px; 5 | margin: 0 auto; 6 | margin-top: 20px; 7 | max-width: 800px; 8 | `; 9 | -------------------------------------------------------------------------------- /06.7 Create Save High Score Serverless Function/src/styled/Container.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | export const Container = styled.div` 4 | padding: 20px; 5 | margin: 0 auto; 6 | margin-top: 20px; 7 | max-width: 800px; 8 | `; 9 | -------------------------------------------------------------------------------- /09.3 Use the Styled Components Theme Provider/src/styled/Container.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | export const Container = styled.div` 4 | padding: 20px; 5 | margin: 0 auto; 6 | max-width: 800px; 7 | text-align: center; 8 | `; 9 | -------------------------------------------------------------------------------- /09.5 Persisting Theme Choice in Local Storage/src/styled/Container.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | export const Container = styled.div` 4 | padding: 20px; 5 | margin: 0 auto; 6 | max-width: 800px; 7 | text-align: center; 8 | `; 9 | -------------------------------------------------------------------------------- /10.2 Final Deploy Configurations in Netlify/functions/helloWorld.js: -------------------------------------------------------------------------------- 1 | exports.handler = async (event, context) => { 2 | return { 3 | statusCode: 200, 4 | body: JSON.stringify({ 5 | msg: 'Hello World', 6 | }), 7 | }; 8 | }; 9 | -------------------------------------------------------------------------------- /10.2 Final Deploy Configurations in Netlify/src/styled/Container.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | export const Container = styled.div` 4 | padding: 20px; 5 | margin: 0 auto; 6 | max-width: 800px; 7 | text-align: center; 8 | `; 9 | -------------------------------------------------------------------------------- /06.3 Creating Your First Serverless Function/functions/helloWorld.js: -------------------------------------------------------------------------------- 1 | exports.handler = async (event, context) => { 2 | return { 3 | statusCode: 200, 4 | body: JSON.stringify({ 5 | msg: 'Hello World', 6 | }), 7 | }; 8 | }; 9 | -------------------------------------------------------------------------------- /06.4 Serverless Function to Retrieve High Scores/functions/helloWorld.js: -------------------------------------------------------------------------------- 1 | exports.handler = async (event, context) => { 2 | return { 3 | statusCode: 200, 4 | body: JSON.stringify({ 5 | msg: 'Hello World', 6 | }), 7 | }; 8 | }; 9 | -------------------------------------------------------------------------------- /06.4 Serverless Function to Retrieve High Scores/src/pages/HighScores.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | export default function HighScores() { 4 | return ( 5 |
6 |

High Scores

7 |
8 | ); 9 | } 10 | -------------------------------------------------------------------------------- /06.7 Create Save High Score Serverless Function/functions/helloWorld.js: -------------------------------------------------------------------------------- 1 | exports.handler = async (event, context) => { 2 | return { 3 | statusCode: 200, 4 | body: JSON.stringify({ 5 | msg: 'Hello World', 6 | }), 7 | }; 8 | }; 9 | -------------------------------------------------------------------------------- /08.2 Include Access Token in Save Score Request/functions/helloWorld.js: -------------------------------------------------------------------------------- 1 | exports.handler = async (event, context) => { 2 | return { 3 | statusCode: 200, 4 | body: JSON.stringify({ 5 | msg: 'Hello World', 6 | }), 7 | }; 8 | }; 9 | -------------------------------------------------------------------------------- /09.3 Use the Styled Components Theme Provider/functions/helloWorld.js: -------------------------------------------------------------------------------- 1 | exports.handler = async (event, context) => { 2 | return { 3 | statusCode: 200, 4 | body: JSON.stringify({ 5 | msg: 'Hello World', 6 | }), 7 | }; 8 | }; 9 | -------------------------------------------------------------------------------- /09.5 Persisting Theme Choice in Local Storage/functions/helloWorld.js: -------------------------------------------------------------------------------- 1 | exports.handler = async (event, context) => { 2 | return { 3 | statusCode: 200, 4 | body: JSON.stringify({ 5 | msg: 'Hello World', 6 | }), 7 | }; 8 | }; 9 | -------------------------------------------------------------------------------- /08.4 Validate Access Token/src/styled/Container.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | export const Container = styled.div` 4 | padding: 20px; 5 | margin: 0 auto; 6 | margin-top: 20px; 7 | max-width: 800px; 8 | text-align: center; 9 | `; 10 | -------------------------------------------------------------------------------- /07.3 Add Authentication in React/src/styled/Container.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | export const Container = styled.div` 4 | padding: 20px; 5 | margin: 0 auto; 6 | margin-top: 20px; 7 | max-width: 800px; 8 | text-align: center; 9 | `; 10 | -------------------------------------------------------------------------------- /08.3 Retrieve and Parse Access Token/src/styled/Container.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | export const Container = styled.div` 4 | padding: 20px; 5 | margin: 0 auto; 6 | margin-top: 20px; 7 | max-width: 800px; 8 | text-align: center; 9 | `; 10 | -------------------------------------------------------------------------------- /06.10 Game Over Bug Fix and Extra Styling/src/styled/Container.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | export const Container = styled.div` 4 | padding: 20px; 5 | margin: 0 auto; 6 | margin-top: 20px; 7 | max-width: 800px; 8 | text-align: center; 9 | `; 10 | -------------------------------------------------------------------------------- /08.2 Include Access Token in Save Score Request/src/styled/Container.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | export const Container = styled.div` 4 | padding: 20px; 5 | margin: 0 auto; 6 | margin-top: 20px; 7 | max-width: 800px; 8 | text-align: center; 9 | `; 10 | -------------------------------------------------------------------------------- /06.6 Display High Scores/src/styled/HighScores.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | export const ScoresList = styled.ol` 4 | padding-left: 0; 5 | list-style: none; 6 | `; 7 | 8 | export const ScoreLI = styled.li` 9 | font-size: 1.6rem; 10 | margin-bottom: 0.5rem; 11 | `; 12 | -------------------------------------------------------------------------------- /10.1 Styling and Cleanup/src/styled/HighScores.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | export const ScoresList = styled.ol` 4 | padding-left: 0; 5 | list-style: none; 6 | `; 7 | 8 | export const ScoreLI = styled.li` 9 | font-size: 1.6rem; 10 | margin-bottom: 0.5rem; 11 | `; 12 | -------------------------------------------------------------------------------- /08.4 Validate Access Token/src/styled/HighScores.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | export const ScoresList = styled.ol` 4 | padding-left: 0; 5 | list-style: none; 6 | `; 7 | 8 | export const ScoreLI = styled.li` 9 | font-size: 1.6rem; 10 | margin-bottom: 0.5rem; 11 | `; 12 | -------------------------------------------------------------------------------- /09.4 Create Use Theme Hook/src/styled/HighScores.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | export const ScoresList = styled.ol` 4 | padding-left: 0; 5 | list-style: none; 6 | `; 7 | 8 | export const ScoreLI = styled.li` 9 | font-size: 1.6rem; 10 | margin-bottom: 0.5rem; 11 | `; 12 | -------------------------------------------------------------------------------- /06.9 Save High Score in Game Over/src/styled/HighScores.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | export const ScoresList = styled.ol` 4 | padding-left: 0; 5 | list-style: none; 6 | `; 7 | 8 | export const ScoreLI = styled.li` 9 | font-size: 1.6rem; 10 | margin-bottom: 0.5rem; 11 | `; 12 | -------------------------------------------------------------------------------- /07.3 Add Authentication in React/src/styled/HighScores.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | export const ScoresList = styled.ol` 4 | padding-left: 0; 5 | list-style: none; 6 | `; 7 | 8 | export const ScoreLI = styled.li` 9 | font-size: 1.6rem; 10 | margin-bottom: 0.5rem; 11 | `; 12 | -------------------------------------------------------------------------------- /06.8 Refactoring Common Airtable Code/src/styled/HighScores.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | export const ScoresList = styled.ol` 4 | padding-left: 0; 5 | list-style: none; 6 | `; 7 | 8 | export const ScoreLI = styled.li` 9 | font-size: 1.6rem; 10 | margin-bottom: 0.5rem; 11 | `; 12 | -------------------------------------------------------------------------------- /08.3 Retrieve and Parse Access Token/src/styled/HighScores.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | export const ScoresList = styled.ol` 4 | padding-left: 0; 5 | list-style: none; 6 | `; 7 | 8 | export const ScoreLI = styled.li` 9 | font-size: 1.6rem; 10 | margin-bottom: 0.5rem; 11 | `; 12 | -------------------------------------------------------------------------------- /09.2 Create CSS Variables for Theming/src/styled/HighScores.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | export const ScoresList = styled.ol` 4 | padding-left: 0; 5 | list-style: none; 6 | `; 7 | 8 | export const ScoreLI = styled.li` 9 | font-size: 1.6rem; 10 | margin-bottom: 0.5rem; 11 | `; 12 | -------------------------------------------------------------------------------- /06.10 Game Over Bug Fix and Extra Styling/src/styled/HighScores.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | export const ScoresList = styled.ol` 4 | padding-left: 0; 5 | list-style: none; 6 | `; 7 | 8 | export const ScoreLI = styled.li` 9 | font-size: 1.6rem; 10 | margin-bottom: 0.5rem; 11 | `; 12 | -------------------------------------------------------------------------------- /09.3 Use the Styled Components Theme Provider/src/styled/HighScores.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | export const ScoresList = styled.ol` 4 | padding-left: 0; 5 | list-style: none; 6 | `; 7 | 8 | export const ScoreLI = styled.li` 9 | font-size: 1.6rem; 10 | margin-bottom: 0.5rem; 11 | `; 12 | -------------------------------------------------------------------------------- /09.5 Persisting Theme Choice in Local Storage/src/styled/HighScores.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | export const ScoresList = styled.ol` 4 | padding-left: 0; 5 | list-style: none; 6 | `; 7 | 8 | export const ScoreLI = styled.li` 9 | font-size: 1.6rem; 10 | margin-bottom: 0.5rem; 11 | `; 12 | -------------------------------------------------------------------------------- /10.2 Final Deploy Configurations in Netlify/src/styled/HighScores.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | export const ScoresList = styled.ol` 4 | padding-left: 0; 5 | list-style: none; 6 | `; 7 | 8 | export const ScoreLI = styled.li` 9 | font-size: 1.6rem; 10 | margin-bottom: 0.5rem; 11 | `; 12 | -------------------------------------------------------------------------------- /06.7 Create Save High Score Serverless Function/src/styled/HighScores.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | export const ScoresList = styled.ol` 4 | padding-left: 0; 5 | list-style: none; 6 | `; 7 | 8 | export const ScoreLI = styled.li` 9 | font-size: 1.6rem; 10 | margin-bottom: 0.5rem; 11 | `; 12 | -------------------------------------------------------------------------------- /08.2 Include Access Token in Save Score Request/src/styled/HighScores.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | export const ScoresList = styled.ol` 4 | padding-left: 0; 5 | list-style: none; 6 | `; 7 | 8 | export const ScoreLI = styled.li` 9 | font-size: 1.6rem; 10 | margin-bottom: 0.5rem; 11 | `; 12 | -------------------------------------------------------------------------------- /10.1 Styling and Cleanup/src/styled/Buttons.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | export const StyledButton = styled.button` 4 | background-color: var(--main-text-color); 5 | color: var(--main-bg-color); 6 | font-size: 1rem; 7 | padding: 0.2rem 0.5rem; 8 | cursor: pointer; 9 | border-radius: 5px; 10 | `; 11 | -------------------------------------------------------------------------------- /05.1 Intro to Airtable/src/styled/CTA.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | import { Link } from 'react-router-dom'; 3 | export const CTA = styled(Link)` 4 | font-size: 1.5rem; 5 | text-align: center; 6 | display: block; 7 | text-decoration: none; 8 | &:hover { 9 | text-decoration: underline; 10 | } 11 | `; 12 | -------------------------------------------------------------------------------- /02.4 Style the Home Page/src/styled/CTA.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | import { Link } from 'react-router-dom'; 3 | export const CTA = styled(Link)` 4 | font-size: 1.5rem; 5 | text-align: center; 6 | display: block; 7 | text-decoration: none; 8 | &:hover { 9 | text-decoration: underline; 10 | } 11 | `; 12 | -------------------------------------------------------------------------------- /02.5 Style the Game Page/src/styled/CTA.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | import { Link } from 'react-router-dom'; 3 | export const CTA = styled(Link)` 4 | font-size: 1.5rem; 5 | text-align: center; 6 | display: block; 7 | text-decoration: none; 8 | &:hover { 9 | text-decoration: underline; 10 | } 11 | `; 12 | -------------------------------------------------------------------------------- /03.1 Intro to React Hooks/src/styled/CTA.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | import { Link } from 'react-router-dom'; 3 | export const CTA = styled(Link)` 4 | font-size: 1.5rem; 5 | text-align: center; 6 | display: block; 7 | text-decoration: none; 8 | &:hover { 9 | text-decoration: underline; 10 | } 11 | `; 12 | -------------------------------------------------------------------------------- /04.1 Intro to React Hooks/src/styled/CTA.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | import { Link } from 'react-router-dom'; 3 | export const CTA = styled(Link)` 4 | font-size: 1.5rem; 5 | text-align: center; 6 | display: block; 7 | text-decoration: none; 8 | &:hover { 9 | text-decoration: underline; 10 | } 11 | `; 12 | -------------------------------------------------------------------------------- /06.2 Netlify Init and Setup/src/styled/CTA.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | import { Link } from 'react-router-dom'; 3 | export const CTA = styled(Link)` 4 | font-size: 1.5rem; 5 | text-align: center; 6 | display: block; 7 | text-decoration: none; 8 | &:hover { 9 | text-decoration: underline; 10 | } 11 | `; 12 | -------------------------------------------------------------------------------- /06.6 Display High Scores/src/styled/CTA.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | import { Link } from 'react-router-dom'; 3 | export const CTA = styled(Link)` 4 | font-size: 1.5rem; 5 | text-align: center; 6 | display: block; 7 | text-decoration: none; 8 | &:hover { 9 | text-decoration: underline; 10 | } 11 | `; 12 | -------------------------------------------------------------------------------- /08.4 Validate Access Token/src/styled/CTA.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | import { Link } from 'react-router-dom'; 3 | export const CTA = styled(Link)` 4 | font-size: 1.5rem; 5 | text-align: center; 6 | display: block; 7 | text-decoration: none; 8 | &:hover { 9 | text-decoration: underline; 10 | } 11 | `; 12 | -------------------------------------------------------------------------------- /09.4 Create Use Theme Hook/src/styled/CTA.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | import { Link } from 'react-router-dom'; 3 | export const CTA = styled(Link)` 4 | font-size: 1.5rem; 5 | text-align: center; 6 | display: block; 7 | text-decoration: none; 8 | &:hover { 9 | text-decoration: underline; 10 | } 11 | `; 12 | -------------------------------------------------------------------------------- /10.1 Styling and Cleanup/src/styled/CTA.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | import { Link } from 'react-router-dom'; 3 | export const CTA = styled(Link)` 4 | font-size: 1.5rem; 5 | text-align: center; 6 | display: block; 7 | text-decoration: none; 8 | &:hover { 9 | text-decoration: underline; 10 | } 11 | `; 12 | -------------------------------------------------------------------------------- /02.4 Style the Home Page/src/styled/Random.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | export const Accent = styled.span` 4 | color: #e16365; 5 | `; 6 | 7 | export const StyledTitle = styled.h1` 8 | font-size: 4.25rem; 9 | font-weight: 300; 10 | text-align: center; 11 | margin-bottom: 2rem; 12 | margin-top: 3rem; 13 | `; 14 | -------------------------------------------------------------------------------- /03.3 Create Time Functionality/src/styled/CTA.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | import { Link } from 'react-router-dom'; 3 | export const CTA = styled(Link)` 4 | font-size: 1.5rem; 5 | text-align: center; 6 | display: block; 7 | text-decoration: none; 8 | &:hover { 9 | text-decoration: underline; 10 | } 11 | `; 12 | -------------------------------------------------------------------------------- /05.2Airtable Workspace and API/src/styled/CTA.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | import { Link } from 'react-router-dom'; 3 | export const CTA = styled(Link)` 4 | font-size: 1.5rem; 5 | text-align: center; 6 | display: block; 7 | text-decoration: none; 8 | &:hover { 9 | text-decoration: underline; 10 | } 11 | `; 12 | -------------------------------------------------------------------------------- /06.5 Setup Evironment Vairbles/src/styled/CTA.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | import { Link } from 'react-router-dom'; 3 | export const CTA = styled(Link)` 4 | font-size: 1.5rem; 5 | text-align: center; 6 | display: block; 7 | text-decoration: none; 8 | &:hover { 9 | text-decoration: underline; 10 | } 11 | `; 12 | -------------------------------------------------------------------------------- /07.3 Add Authentication in React/src/styled/CTA.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | import { Link } from 'react-router-dom'; 3 | export const CTA = styled(Link)` 4 | font-size: 1.5rem; 5 | text-align: center; 6 | display: block; 7 | text-decoration: none; 8 | &:hover { 9 | text-decoration: underline; 10 | } 11 | `; 12 | -------------------------------------------------------------------------------- /02.3 Style the Navbar/src/styled/Global.js: -------------------------------------------------------------------------------- 1 | import { createGlobalStyle } from 'styled-components'; 2 | 3 | export const GlobalStyle = createGlobalStyle` 4 | * { 5 | box-sizing: border-box; 6 | color: #333; 7 | margin: 0; 8 | font-family: sans-serif; 9 | font-weight: 300; 10 | } 11 | 12 | h1, h2 { 13 | margin-bottom: 2rem; 14 | } 15 | `; 16 | -------------------------------------------------------------------------------- /03.4 Track User Input on Keypress/src/styled/CTA.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | import { Link } from 'react-router-dom'; 3 | export const CTA = styled(Link)` 4 | font-size: 1.5rem; 5 | text-align: center; 6 | display: block; 7 | text-decoration: none; 8 | &:hover { 9 | text-decoration: underline; 10 | } 11 | `; 12 | -------------------------------------------------------------------------------- /03.5 Update User Score Based on Input/src/styled/CTA.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | import { Link } from 'react-router-dom'; 3 | export const CTA = styled(Link)` 4 | font-size: 1.5rem; 5 | text-align: center; 6 | display: block; 7 | text-decoration: none; 8 | &:hover { 9 | text-decoration: underline; 10 | } 11 | `; 12 | -------------------------------------------------------------------------------- /05.1 Intro to Airtable/src/styled/Global.js: -------------------------------------------------------------------------------- 1 | import { createGlobalStyle } from 'styled-components'; 2 | 3 | export const GlobalStyle = createGlobalStyle` 4 | * { 5 | box-sizing: border-box; 6 | color: #333; 7 | margin: 0; 8 | font-family: sans-serif; 9 | font-weight: 300; 10 | } 11 | 12 | h1, h2 { 13 | margin-bottom: 2rem; 14 | } 15 | `; 16 | -------------------------------------------------------------------------------- /06.1 Intro to Serverless Functions/src/styled/CTA.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | import { Link } from 'react-router-dom'; 3 | export const CTA = styled(Link)` 4 | font-size: 1.5rem; 5 | text-align: center; 6 | display: block; 7 | text-decoration: none; 8 | &:hover { 9 | text-decoration: underline; 10 | } 11 | `; 12 | -------------------------------------------------------------------------------- /06.8 Refactoring Common Airtable Code/src/styled/CTA.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | import { Link } from 'react-router-dom'; 3 | export const CTA = styled(Link)` 4 | font-size: 1.5rem; 5 | text-align: center; 6 | display: block; 7 | text-decoration: none; 8 | &:hover { 9 | text-decoration: underline; 10 | } 11 | `; 12 | -------------------------------------------------------------------------------- /06.9 Save High Score in Game Over/src/styled/CTA.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | import { Link } from 'react-router-dom'; 3 | export const CTA = styled(Link)` 4 | font-size: 1.5rem; 5 | text-align: center; 6 | display: block; 7 | text-decoration: none; 8 | &:hover { 9 | text-decoration: underline; 10 | } 11 | `; 12 | -------------------------------------------------------------------------------- /08.3 Retrieve and Parse Access Token/src/styled/CTA.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | import { Link } from 'react-router-dom'; 3 | export const CTA = styled(Link)` 4 | font-size: 1.5rem; 5 | text-align: center; 6 | display: block; 7 | text-decoration: none; 8 | &:hover { 9 | text-decoration: underline; 10 | } 11 | `; 12 | -------------------------------------------------------------------------------- /09.2 Create CSS Variables for Theming/src/styled/CTA.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | import { Link } from 'react-router-dom'; 3 | export const CTA = styled(Link)` 4 | font-size: 1.5rem; 5 | text-align: center; 6 | display: block; 7 | text-decoration: none; 8 | &:hover { 9 | text-decoration: underline; 10 | } 11 | `; 12 | -------------------------------------------------------------------------------- /10.1 Styling and Cleanup/src/styled/Loader.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | export default styled.div` 4 | position: fixed; 5 | top: 0; 6 | right: 0; 7 | left: 0; 8 | bottom: 0; 9 | background-color: var(--main-bg-color); 10 | display: flex; 11 | align-items: center; 12 | justify-content: center; 13 | `; 14 | -------------------------------------------------------------------------------- /10.2 Final Deploy Configurations in Netlify/src/styled/Buttons.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | export const StyledButton = styled.button` 4 | background-color: var(--main-text-color); 5 | color: var(--main-bg-color); 6 | font-size: 1rem; 7 | padding: 0.2rem 0.5rem; 8 | cursor: pointer; 9 | border-radius: 5px; 10 | `; 11 | -------------------------------------------------------------------------------- /02.4 Style the Home Page/src/styled/Global.js: -------------------------------------------------------------------------------- 1 | import { createGlobalStyle } from 'styled-components'; 2 | 3 | export const GlobalStyle = createGlobalStyle` 4 | * { 5 | box-sizing: border-box; 6 | color: #333; 7 | margin: 0; 8 | font-family: sans-serif; 9 | font-weight: 300; 10 | } 11 | 12 | h1, h2 { 13 | margin-bottom: 2rem; 14 | } 15 | `; 16 | -------------------------------------------------------------------------------- /02.5 Style the Game Page/src/styled/Global.js: -------------------------------------------------------------------------------- 1 | import { createGlobalStyle } from 'styled-components'; 2 | 3 | export const GlobalStyle = createGlobalStyle` 4 | * { 5 | box-sizing: border-box; 6 | color: #333; 7 | margin: 0; 8 | font-family: sans-serif; 9 | font-weight: 300; 10 | } 11 | 12 | h1, h2 { 13 | margin-bottom: 2rem; 14 | } 15 | `; 16 | -------------------------------------------------------------------------------- /03.1 Intro to React Hooks/src/styled/Global.js: -------------------------------------------------------------------------------- 1 | import { createGlobalStyle } from 'styled-components'; 2 | 3 | export const GlobalStyle = createGlobalStyle` 4 | * { 5 | box-sizing: border-box; 6 | color: #333; 7 | margin: 0; 8 | font-family: sans-serif; 9 | font-weight: 300; 10 | } 11 | 12 | h1, h2 { 13 | margin-bottom: 2rem; 14 | } 15 | `; 16 | -------------------------------------------------------------------------------- /04.1 Intro to React Hooks/src/styled/Global.js: -------------------------------------------------------------------------------- 1 | import { createGlobalStyle } from 'styled-components'; 2 | 3 | export const GlobalStyle = createGlobalStyle` 4 | * { 5 | box-sizing: border-box; 6 | color: #333; 7 | margin: 0; 8 | font-family: sans-serif; 9 | font-weight: 300; 10 | } 11 | 12 | h1, h2 { 13 | margin-bottom: 2rem; 14 | } 15 | `; 16 | -------------------------------------------------------------------------------- /04.2 Track User's Score Between Components/src/styled/CTA.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | import { Link } from 'react-router-dom'; 3 | export const CTA = styled(Link)` 4 | font-size: 1.5rem; 5 | text-align: center; 6 | display: block; 7 | text-decoration: none; 8 | &:hover { 9 | text-decoration: underline; 10 | } 11 | `; 12 | -------------------------------------------------------------------------------- /06.10 Game Over Bug Fix and Extra Styling/src/styled/CTA.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | import { Link } from 'react-router-dom'; 3 | export const CTA = styled(Link)` 4 | font-size: 1.5rem; 5 | text-align: center; 6 | display: block; 7 | text-decoration: none; 8 | &:hover { 9 | text-decoration: underline; 10 | } 11 | `; 12 | -------------------------------------------------------------------------------- /06.2 Netlify Init and Setup/src/styled/Global.js: -------------------------------------------------------------------------------- 1 | import { createGlobalStyle } from 'styled-components'; 2 | 3 | export const GlobalStyle = createGlobalStyle` 4 | * { 5 | box-sizing: border-box; 6 | color: #333; 7 | margin: 0; 8 | font-family: sans-serif; 9 | font-weight: 300; 10 | } 11 | 12 | h1, h2 { 13 | margin-bottom: 2rem; 14 | } 15 | `; 16 | -------------------------------------------------------------------------------- /06.6 Display High Scores/src/styled/Global.js: -------------------------------------------------------------------------------- 1 | import { createGlobalStyle } from 'styled-components'; 2 | 3 | export const GlobalStyle = createGlobalStyle` 4 | * { 5 | box-sizing: border-box; 6 | color: #333; 7 | margin: 0; 8 | font-family: sans-serif; 9 | font-weight: 300; 10 | } 11 | 12 | h1, h2 { 13 | margin-bottom: 2rem; 14 | } 15 | `; 16 | -------------------------------------------------------------------------------- /08.4 Validate Access Token/src/styled/Global.js: -------------------------------------------------------------------------------- 1 | import { createGlobalStyle } from 'styled-components'; 2 | 3 | export const GlobalStyle = createGlobalStyle` 4 | * { 5 | box-sizing: border-box; 6 | color: #333; 7 | margin: 0; 8 | font-family: sans-serif; 9 | font-weight: 300; 10 | } 11 | 12 | h1, h2 { 13 | margin-bottom: 2rem; 14 | } 15 | `; 16 | -------------------------------------------------------------------------------- /03.3 Create Time Functionality/src/styled/Global.js: -------------------------------------------------------------------------------- 1 | import { createGlobalStyle } from 'styled-components'; 2 | 3 | export const GlobalStyle = createGlobalStyle` 4 | * { 5 | box-sizing: border-box; 6 | color: #333; 7 | margin: 0; 8 | font-family: sans-serif; 9 | font-weight: 300; 10 | } 11 | 12 | h1, h2 { 13 | margin-bottom: 2rem; 14 | } 15 | `; 16 | -------------------------------------------------------------------------------- /03.3 Track Score with Your First React Hook/src/styled/CTA.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | import { Link } from 'react-router-dom'; 3 | export const CTA = styled(Link)` 4 | font-size: 1.5rem; 5 | text-align: center; 6 | display: block; 7 | text-decoration: none; 8 | &:hover { 9 | text-decoration: underline; 10 | } 11 | `; 12 | -------------------------------------------------------------------------------- /05.2Airtable Workspace and API/src/styled/Global.js: -------------------------------------------------------------------------------- 1 | import { createGlobalStyle } from 'styled-components'; 2 | 3 | export const GlobalStyle = createGlobalStyle` 4 | * { 5 | box-sizing: border-box; 6 | color: #333; 7 | margin: 0; 8 | font-family: sans-serif; 9 | font-weight: 300; 10 | } 11 | 12 | h1, h2 { 13 | margin-bottom: 2rem; 14 | } 15 | `; 16 | -------------------------------------------------------------------------------- /06.3 Creating Your First Serverless Function/src/styled/CTA.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | import { Link } from 'react-router-dom'; 3 | export const CTA = styled(Link)` 4 | font-size: 1.5rem; 5 | text-align: center; 6 | display: block; 7 | text-decoration: none; 8 | &:hover { 9 | text-decoration: underline; 10 | } 11 | `; 12 | -------------------------------------------------------------------------------- /06.5 Setup Evironment Vairbles/src/styled/Global.js: -------------------------------------------------------------------------------- 1 | import { createGlobalStyle } from 'styled-components'; 2 | 3 | export const GlobalStyle = createGlobalStyle` 4 | * { 5 | box-sizing: border-box; 6 | color: #333; 7 | margin: 0; 8 | font-family: sans-serif; 9 | font-weight: 300; 10 | } 11 | 12 | h1, h2 { 13 | margin-bottom: 2rem; 14 | } 15 | `; 16 | -------------------------------------------------------------------------------- /06.7 Create Save High Score Serverless Function/src/styled/CTA.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | import { Link } from 'react-router-dom'; 3 | export const CTA = styled(Link)` 4 | font-size: 1.5rem; 5 | text-align: center; 6 | display: block; 7 | text-decoration: none; 8 | &:hover { 9 | text-decoration: underline; 10 | } 11 | `; 12 | -------------------------------------------------------------------------------- /07.3 Add Authentication in React/src/styled/Global.js: -------------------------------------------------------------------------------- 1 | import { createGlobalStyle } from 'styled-components'; 2 | 3 | export const GlobalStyle = createGlobalStyle` 4 | * { 5 | box-sizing: border-box; 6 | color: #333; 7 | margin: 0; 8 | font-family: sans-serif; 9 | font-weight: 300; 10 | } 11 | 12 | h1, h2 { 13 | margin-bottom: 2rem; 14 | } 15 | `; 16 | -------------------------------------------------------------------------------- /08.2 Include Access Token in Save Score Request/src/styled/CTA.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | import { Link } from 'react-router-dom'; 3 | export const CTA = styled(Link)` 4 | font-size: 1.5rem; 5 | text-align: center; 6 | display: block; 7 | text-decoration: none; 8 | &:hover { 9 | text-decoration: underline; 10 | } 11 | `; 12 | -------------------------------------------------------------------------------- /09.3 Use the Styled Components Theme Provider/src/styled/CTA.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | import { Link } from 'react-router-dom'; 3 | export const CTA = styled(Link)` 4 | font-size: 1.5rem; 5 | text-align: center; 6 | display: block; 7 | text-decoration: none; 8 | &:hover { 9 | text-decoration: underline; 10 | } 11 | `; 12 | -------------------------------------------------------------------------------- /09.4 Create Use Theme Hook/src/styled/Themes.js: -------------------------------------------------------------------------------- 1 | const sharedStyles = { 2 | accent: '#e16365', 3 | }; 4 | 5 | export const darkTheme = { 6 | mainBgColor: '#333', 7 | mainTextColor: '#f9f9f9', 8 | ...sharedStyles, 9 | }; 10 | 11 | export const lightTheme = { 12 | mainBgColor: '#f9f9f9', 13 | mainTextColor: '#333', 14 | ...sharedStyles, 15 | }; 16 | -------------------------------------------------------------------------------- /09.5 Persisting Theme Choice in Local Storage/src/styled/CTA.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | import { Link } from 'react-router-dom'; 3 | export const CTA = styled(Link)` 4 | font-size: 1.5rem; 5 | text-align: center; 6 | display: block; 7 | text-decoration: none; 8 | &:hover { 9 | text-decoration: underline; 10 | } 11 | `; 12 | -------------------------------------------------------------------------------- /10.1 Styling and Cleanup/src/styled/Themes.js: -------------------------------------------------------------------------------- 1 | const sharedStyles = { 2 | accent: '#e16365', 3 | }; 4 | 5 | export const darkTheme = { 6 | mainBgColor: '#333', 7 | mainTextColor: '#f9f9f9', 8 | ...sharedStyles, 9 | }; 10 | 11 | export const lightTheme = { 12 | mainBgColor: '#f9f9f9', 13 | mainTextColor: '#333', 14 | ...sharedStyles, 15 | }; 16 | -------------------------------------------------------------------------------- /10.2 Final Deploy Configurations in Netlify/src/styled/CTA.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | import { Link } from 'react-router-dom'; 3 | export const CTA = styled(Link)` 4 | font-size: 1.5rem; 5 | text-align: center; 6 | display: block; 7 | text-decoration: none; 8 | &:hover { 9 | text-decoration: underline; 10 | } 11 | `; 12 | -------------------------------------------------------------------------------- /02.2 Create Base Styled Components/src/styled/Global.js: -------------------------------------------------------------------------------- 1 | import { createGlobalStyle } from 'styled-components'; 2 | 3 | export const GlobalStyle = createGlobalStyle` 4 | * { 5 | box-sizing: border-box; 6 | color: #333; 7 | margin: 0; 8 | font-family: sans-serif; 9 | font-weight: 300; 10 | } 11 | 12 | h1, h2 { 13 | margin-bottom: 2rem; 14 | } 15 | `; 16 | -------------------------------------------------------------------------------- /03.4 Track User Input on Keypress/src/styled/Global.js: -------------------------------------------------------------------------------- 1 | import { createGlobalStyle } from 'styled-components'; 2 | 3 | export const GlobalStyle = createGlobalStyle` 4 | * { 5 | box-sizing: border-box; 6 | color: #333; 7 | margin: 0; 8 | font-family: sans-serif; 9 | font-weight: 300; 10 | } 11 | 12 | h1, h2 { 13 | margin-bottom: 2rem; 14 | } 15 | `; 16 | -------------------------------------------------------------------------------- /03.5 Update User Score Based on Input/src/styled/Global.js: -------------------------------------------------------------------------------- 1 | import { createGlobalStyle } from 'styled-components'; 2 | 3 | export const GlobalStyle = createGlobalStyle` 4 | * { 5 | box-sizing: border-box; 6 | color: #333; 7 | margin: 0; 8 | font-family: sans-serif; 9 | font-weight: 300; 10 | } 11 | 12 | h1, h2 { 13 | margin-bottom: 2rem; 14 | } 15 | `; 16 | -------------------------------------------------------------------------------- /06.1 Intro to Serverless Functions/src/styled/Global.js: -------------------------------------------------------------------------------- 1 | import { createGlobalStyle } from 'styled-components'; 2 | 3 | export const GlobalStyle = createGlobalStyle` 4 | * { 5 | box-sizing: border-box; 6 | color: #333; 7 | margin: 0; 8 | font-family: sans-serif; 9 | font-weight: 300; 10 | } 11 | 12 | h1, h2 { 13 | margin-bottom: 2rem; 14 | } 15 | `; 16 | -------------------------------------------------------------------------------- /06.4 Serverless Function to Retrieve High Scores/src/styled/CTA.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | import { Link } from 'react-router-dom'; 3 | export const CTA = styled(Link)` 4 | font-size: 1.5rem; 5 | text-align: center; 6 | display: block; 7 | text-decoration: none; 8 | &:hover { 9 | text-decoration: underline; 10 | } 11 | `; 12 | -------------------------------------------------------------------------------- /06.8 Refactoring Common Airtable Code/src/styled/Global.js: -------------------------------------------------------------------------------- 1 | import { createGlobalStyle } from 'styled-components'; 2 | 3 | export const GlobalStyle = createGlobalStyle` 4 | * { 5 | box-sizing: border-box; 6 | color: #333; 7 | margin: 0; 8 | font-family: sans-serif; 9 | font-weight: 300; 10 | } 11 | 12 | h1, h2 { 13 | margin-bottom: 2rem; 14 | } 15 | `; 16 | -------------------------------------------------------------------------------- /06.9 Save High Score in Game Over/src/styled/Global.js: -------------------------------------------------------------------------------- 1 | import { createGlobalStyle } from 'styled-components'; 2 | 3 | export const GlobalStyle = createGlobalStyle` 4 | * { 5 | box-sizing: border-box; 6 | color: #333; 7 | margin: 0; 8 | font-family: sans-serif; 9 | font-weight: 300; 10 | } 11 | 12 | h1, h2 { 13 | margin-bottom: 2rem; 14 | } 15 | `; 16 | -------------------------------------------------------------------------------- /08.3 Retrieve and Parse Access Token/src/styled/Global.js: -------------------------------------------------------------------------------- 1 | import { createGlobalStyle } from 'styled-components'; 2 | 3 | export const GlobalStyle = createGlobalStyle` 4 | * { 5 | box-sizing: border-box; 6 | color: #333; 7 | margin: 0; 8 | font-family: sans-serif; 9 | font-weight: 300; 10 | } 11 | 12 | h1, h2 { 13 | margin-bottom: 2rem; 14 | } 15 | `; 16 | -------------------------------------------------------------------------------- /10.2 Final Deploy Configurations in Netlify/src/styled/Loader.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | export default styled.div` 4 | position: fixed; 5 | top: 0; 6 | right: 0; 7 | left: 0; 8 | bottom: 0; 9 | background-color: var(--main-bg-color); 10 | display: flex; 11 | align-items: center; 12 | justify-content: center; 13 | `; 14 | -------------------------------------------------------------------------------- /04.2 Track User's Score Between Components/src/styled/Global.js: -------------------------------------------------------------------------------- 1 | import { createGlobalStyle } from 'styled-components'; 2 | 3 | export const GlobalStyle = createGlobalStyle` 4 | * { 5 | box-sizing: border-box; 6 | color: #333; 7 | margin: 0; 8 | font-family: sans-serif; 9 | font-weight: 300; 10 | } 11 | 12 | h1, h2 { 13 | margin-bottom: 2rem; 14 | } 15 | `; 16 | -------------------------------------------------------------------------------- /06.10 Game Over Bug Fix and Extra Styling/src/styled/Global.js: -------------------------------------------------------------------------------- 1 | import { createGlobalStyle } from 'styled-components'; 2 | 3 | export const GlobalStyle = createGlobalStyle` 4 | * { 5 | box-sizing: border-box; 6 | color: #333; 7 | margin: 0; 8 | font-family: sans-serif; 9 | font-weight: 300; 10 | } 11 | 12 | h1, h2 { 13 | margin-bottom: 2rem; 14 | } 15 | `; 16 | -------------------------------------------------------------------------------- /03.3 Track Score with Your First React Hook/src/styled/Global.js: -------------------------------------------------------------------------------- 1 | import { createGlobalStyle } from 'styled-components'; 2 | 3 | export const GlobalStyle = createGlobalStyle` 4 | * { 5 | box-sizing: border-box; 6 | color: #333; 7 | margin: 0; 8 | font-family: sans-serif; 9 | font-weight: 300; 10 | } 11 | 12 | h1, h2 { 13 | margin-bottom: 2rem; 14 | } 15 | `; 16 | -------------------------------------------------------------------------------- /06.3 Creating Your First Serverless Function/src/styled/Global.js: -------------------------------------------------------------------------------- 1 | import { createGlobalStyle } from 'styled-components'; 2 | 3 | export const GlobalStyle = createGlobalStyle` 4 | * { 5 | box-sizing: border-box; 6 | color: #333; 7 | margin: 0; 8 | font-family: sans-serif; 9 | font-weight: 300; 10 | } 11 | 12 | h1, h2 { 13 | margin-bottom: 2rem; 14 | } 15 | `; 16 | -------------------------------------------------------------------------------- /06.7 Create Save High Score Serverless Function/src/styled/Global.js: -------------------------------------------------------------------------------- 1 | import { createGlobalStyle } from 'styled-components'; 2 | 3 | export const GlobalStyle = createGlobalStyle` 4 | * { 5 | box-sizing: border-box; 6 | color: #333; 7 | margin: 0; 8 | font-family: sans-serif; 9 | font-weight: 300; 10 | } 11 | 12 | h1, h2 { 13 | margin-bottom: 2rem; 14 | } 15 | `; 16 | -------------------------------------------------------------------------------- /08.2 Include Access Token in Save Score Request/src/styled/Global.js: -------------------------------------------------------------------------------- 1 | import { createGlobalStyle } from 'styled-components'; 2 | 3 | export const GlobalStyle = createGlobalStyle` 4 | * { 5 | box-sizing: border-box; 6 | color: #333; 7 | margin: 0; 8 | font-family: sans-serif; 9 | font-weight: 300; 10 | } 11 | 12 | h1, h2 { 13 | margin-bottom: 2rem; 14 | } 15 | `; 16 | -------------------------------------------------------------------------------- /06.4 Serverless Function to Retrieve High Scores/src/styled/Global.js: -------------------------------------------------------------------------------- 1 | import { createGlobalStyle } from 'styled-components'; 2 | 3 | export const GlobalStyle = createGlobalStyle` 4 | * { 5 | box-sizing: border-box; 6 | color: #333; 7 | margin: 0; 8 | font-family: sans-serif; 9 | font-weight: 300; 10 | } 11 | 12 | h1, h2 { 13 | margin-bottom: 2rem; 14 | } 15 | `; 16 | -------------------------------------------------------------------------------- /09.3 Use the Styled Components Theme Provider/src/styled/Themes.js: -------------------------------------------------------------------------------- 1 | const sharedStyles = { 2 | accent: '#e16365', 3 | }; 4 | 5 | export const darkTheme = { 6 | mainBgColor: '#333', 7 | mainTextColor: '#f9f9f9', 8 | ...sharedStyles, 9 | }; 10 | 11 | export const lightTheme = { 12 | mainBgColor: '#f9f9f9', 13 | mainTextColor: '#333', 14 | ...sharedStyles, 15 | }; 16 | -------------------------------------------------------------------------------- /09.5 Persisting Theme Choice in Local Storage/src/styled/Themes.js: -------------------------------------------------------------------------------- 1 | const sharedStyles = { 2 | accent: '#e16365', 3 | }; 4 | 5 | export const darkTheme = { 6 | mainBgColor: '#333', 7 | mainTextColor: '#f9f9f9', 8 | ...sharedStyles, 9 | }; 10 | 11 | export const lightTheme = { 12 | mainBgColor: '#f9f9f9', 13 | mainTextColor: '#333', 14 | ...sharedStyles, 15 | }; 16 | -------------------------------------------------------------------------------- /10.2 Final Deploy Configurations in Netlify/src/styled/Themes.js: -------------------------------------------------------------------------------- 1 | const sharedStyles = { 2 | accent: '#e16365', 3 | }; 4 | 5 | export const darkTheme = { 6 | mainBgColor: '#333', 7 | mainTextColor: '#f9f9f9', 8 | ...sharedStyles, 9 | }; 10 | 11 | export const lightTheme = { 12 | mainBgColor: '#f9f9f9', 13 | mainTextColor: '#333', 14 | ...sharedStyles, 15 | }; 16 | -------------------------------------------------------------------------------- /09.4 Create Use Theme Hook/src/hooks/useTheme.js: -------------------------------------------------------------------------------- 1 | import { useEffect, useState } from 'react'; 2 | export default () => { 3 | const [theme, setTheme] = useState('light'); 4 | 5 | const toggleTheme = () => { 6 | if (theme === 'light') { 7 | setTheme('dark'); 8 | } else { 9 | setTheme('light'); 10 | } 11 | }; 12 | 13 | return [theme, toggleTheme]; 14 | }; 15 | -------------------------------------------------------------------------------- /02.5 Style the Game Page/src/styled/Random.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | export const Accent = styled.span` 4 | color: #e16365; 5 | `; 6 | 7 | export const StyledTitle = styled.h1` 8 | font-size: 4.25rem; 9 | font-weight: 300; 10 | text-align: center; 11 | margin-bottom: 2rem; 12 | margin-top: 3rem; 13 | `; 14 | 15 | export const Strong = styled.strong` 16 | font-weight: bold; 17 | `; 18 | -------------------------------------------------------------------------------- /05.1 Intro to Airtable/src/styled/Random.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | export const Accent = styled.span` 4 | color: #e16365; 5 | `; 6 | 7 | export const StyledTitle = styled.h1` 8 | font-size: 4.25rem; 9 | font-weight: 300; 10 | text-align: center; 11 | margin-bottom: 2rem; 12 | margin-top: 3rem; 13 | `; 14 | 15 | export const Strong = styled.strong` 16 | font-weight: bold; 17 | `; 18 | -------------------------------------------------------------------------------- /06.6 Display High Scores/src/styled/Random.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | export const Accent = styled.span` 4 | color: #e16365; 5 | `; 6 | 7 | export const StyledTitle = styled.h1` 8 | font-size: 4.25rem; 9 | font-weight: 300; 10 | text-align: center; 11 | margin-bottom: 2rem; 12 | margin-top: 3rem; 13 | `; 14 | 15 | export const Strong = styled.strong` 16 | font-weight: bold; 17 | `; 18 | -------------------------------------------------------------------------------- /01.4 Add a Navbar/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /02.3 Style the Navbar/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /03.1 Intro to React Hooks/src/styled/Random.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | export const Accent = styled.span` 4 | color: #e16365; 5 | `; 6 | 7 | export const StyledTitle = styled.h1` 8 | font-size: 4.25rem; 9 | font-weight: 300; 10 | text-align: center; 11 | margin-bottom: 2rem; 12 | margin-top: 3rem; 13 | `; 14 | 15 | export const Strong = styled.strong` 16 | font-weight: bold; 17 | `; 18 | -------------------------------------------------------------------------------- /04.1 Intro to React Hooks/src/styled/Random.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | export const Accent = styled.span` 4 | color: #e16365; 5 | `; 6 | 7 | export const StyledTitle = styled.h1` 8 | font-size: 4.25rem; 9 | font-weight: 300; 10 | text-align: center; 11 | margin-bottom: 2rem; 12 | margin-top: 3rem; 13 | `; 14 | 15 | export const Strong = styled.strong` 16 | font-weight: bold; 17 | `; 18 | -------------------------------------------------------------------------------- /06.2 Netlify Init and Setup/src/styled/Random.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | export const Accent = styled.span` 4 | color: #e16365; 5 | `; 6 | 7 | export const StyledTitle = styled.h1` 8 | font-size: 4.25rem; 9 | font-weight: 300; 10 | text-align: center; 11 | margin-bottom: 2rem; 12 | margin-top: 3rem; 13 | `; 14 | 15 | export const Strong = styled.strong` 16 | font-weight: bold; 17 | `; 18 | -------------------------------------------------------------------------------- /08.4 Validate Access Token/src/styled/Random.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | export const Accent = styled.span` 4 | color: #e16365; 5 | `; 6 | 7 | export const StyledTitle = styled.h1` 8 | font-size: 4.25rem; 9 | font-weight: 300; 10 | text-align: center; 11 | margin-bottom: 2rem; 12 | margin-top: 3rem; 13 | `; 14 | 15 | export const Strong = styled.strong` 16 | font-weight: bold; 17 | `; 18 | -------------------------------------------------------------------------------- /01.4 Add a Navbar/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /02.4 Style the Home Page/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /02.5 Style the Game Page/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /03.1 Intro to React Hooks/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /03.3 Create Time Functionality/src/styled/Random.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | export const Accent = styled.span` 4 | color: #e16365; 5 | `; 6 | 7 | export const StyledTitle = styled.h1` 8 | font-size: 4.25rem; 9 | font-weight: 300; 10 | text-align: center; 11 | margin-bottom: 2rem; 12 | margin-top: 3rem; 13 | `; 14 | 15 | export const Strong = styled.strong` 16 | font-weight: bold; 17 | `; 18 | -------------------------------------------------------------------------------- /03.4 Track User Input on Keypress/src/styled/Random.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | export const Accent = styled.span` 4 | color: #e16365; 5 | `; 6 | 7 | export const StyledTitle = styled.h1` 8 | font-size: 4.25rem; 9 | font-weight: 300; 10 | text-align: center; 11 | margin-bottom: 2rem; 12 | margin-top: 3rem; 13 | `; 14 | 15 | export const Strong = styled.strong` 16 | font-weight: bold; 17 | `; 18 | -------------------------------------------------------------------------------- /04.1 Intro to React Hooks/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /05.1 Intro to Airtable/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /05.2Airtable Workspace and API/src/styled/Random.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | export const Accent = styled.span` 4 | color: #e16365; 5 | `; 6 | 7 | export const StyledTitle = styled.h1` 8 | font-size: 4.25rem; 9 | font-weight: 300; 10 | text-align: center; 11 | margin-bottom: 2rem; 12 | margin-top: 3rem; 13 | `; 14 | 15 | export const Strong = styled.strong` 16 | font-weight: bold; 17 | `; 18 | -------------------------------------------------------------------------------- /06.1 Intro to Serverless Functions/src/styled/Random.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | export const Accent = styled.span` 4 | color: #e16365; 5 | `; 6 | 7 | export const StyledTitle = styled.h1` 8 | font-size: 4.25rem; 9 | font-weight: 300; 10 | text-align: center; 11 | margin-bottom: 2rem; 12 | margin-top: 3rem; 13 | `; 14 | 15 | export const Strong = styled.strong` 16 | font-weight: bold; 17 | `; 18 | -------------------------------------------------------------------------------- /06.5 Setup Evironment Vairbles/src/styled/Random.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | export const Accent = styled.span` 4 | color: #e16365; 5 | `; 6 | 7 | export const StyledTitle = styled.h1` 8 | font-size: 4.25rem; 9 | font-weight: 300; 10 | text-align: center; 11 | margin-bottom: 2rem; 12 | margin-top: 3rem; 13 | `; 14 | 15 | export const Strong = styled.strong` 16 | font-weight: bold; 17 | `; 18 | -------------------------------------------------------------------------------- /06.9 Save High Score in Game Over/src/styled/Random.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | export const Accent = styled.span` 4 | color: #e16365; 5 | `; 6 | 7 | export const StyledTitle = styled.h1` 8 | font-size: 4.25rem; 9 | font-weight: 300; 10 | text-align: center; 11 | margin-bottom: 2rem; 12 | margin-top: 3rem; 13 | `; 14 | 15 | export const Strong = styled.strong` 16 | font-weight: bold; 17 | `; 18 | -------------------------------------------------------------------------------- /07.3 Add Authentication in React/src/styled/Random.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | export const Accent = styled.span` 4 | color: #e16365; 5 | `; 6 | 7 | export const StyledTitle = styled.h1` 8 | font-size: 4.25rem; 9 | font-weight: 300; 10 | text-align: center; 11 | margin-bottom: 2rem; 12 | margin-top: 3rem; 13 | `; 14 | 15 | export const Strong = styled.strong` 16 | font-weight: bold; 17 | `; 18 | -------------------------------------------------------------------------------- /02.3 Style the Navbar/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /03.3 Create Time Functionality/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /03.5 Update User Score Based on Input/src/styled/Random.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | export const Accent = styled.span` 4 | color: #e16365; 5 | `; 6 | 7 | export const StyledTitle = styled.h1` 8 | font-size: 4.25rem; 9 | font-weight: 300; 10 | text-align: center; 11 | margin-bottom: 2rem; 12 | margin-top: 3rem; 13 | `; 14 | 15 | export const Strong = styled.strong` 16 | font-weight: bold; 17 | `; 18 | -------------------------------------------------------------------------------- /05.1 Intro to Airtable/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /05.2Airtable Workspace and API/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /06.2 Netlify Init and Setup/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /06.8 Refactoring Common Airtable Code/src/styled/Random.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | export const Accent = styled.span` 4 | color: #e16365; 5 | `; 6 | 7 | export const StyledTitle = styled.h1` 8 | font-size: 4.25rem; 9 | font-weight: 300; 10 | text-align: center; 11 | margin-bottom: 2rem; 12 | margin-top: 3rem; 13 | `; 14 | 15 | export const Strong = styled.strong` 16 | font-weight: bold; 17 | `; 18 | -------------------------------------------------------------------------------- /08.3 Retrieve and Parse Access Token/src/styled/Random.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | export const Accent = styled.span` 4 | color: #e16365; 5 | `; 6 | 7 | export const StyledTitle = styled.h1` 8 | font-size: 4.25rem; 9 | font-weight: 300; 10 | text-align: center; 11 | margin-bottom: 2rem; 12 | margin-top: 3rem; 13 | `; 14 | 15 | export const Strong = styled.strong` 16 | font-weight: bold; 17 | `; 18 | -------------------------------------------------------------------------------- /09.4 Create Use Theme Hook/src/styled/Random.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | export const Accent = styled.span` 4 | color: var(--accent-color); 5 | `; 6 | 7 | export const StyledTitle = styled.h1` 8 | font-size: 4.25rem; 9 | font-weight: 300; 10 | text-align: center; 11 | margin-bottom: 2rem; 12 | margin-top: 3rem; 13 | `; 14 | 15 | export const Strong = styled.strong` 16 | font-weight: bold; 17 | `; 18 | -------------------------------------------------------------------------------- /10.1 Styling and Cleanup/src/styled/Random.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | export const Accent = styled.span` 4 | color: var(--accent-color); 5 | `; 6 | 7 | export const StyledTitle = styled.h1` 8 | font-size: 4.25rem; 9 | font-weight: 300; 10 | text-align: center; 11 | margin-bottom: 2rem; 12 | margin-top: 3rem; 13 | `; 14 | 15 | export const Strong = styled.strong` 16 | font-weight: bold; 17 | `; 18 | -------------------------------------------------------------------------------- /01.2 Create Starter React Project/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /01.3 Add Routing with React Router/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /02.2 Create Base Styled Components/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /02.4 Style the Home Page/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /02.5 Style the Game Page/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /03.1 Intro to React Hooks/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /03.3 Track Score with Your First React Hook/src/styled/Random.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | export const Accent = styled.span` 4 | color: #e16365; 5 | `; 6 | 7 | export const StyledTitle = styled.h1` 8 | font-size: 4.25rem; 9 | font-weight: 300; 10 | text-align: center; 11 | margin-bottom: 2rem; 12 | margin-top: 3rem; 13 | `; 14 | 15 | export const Strong = styled.strong` 16 | font-weight: bold; 17 | `; 18 | -------------------------------------------------------------------------------- /03.4 Track User Input on Keypress/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /04.1 Intro to React Hooks/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /04.2 Track User's Score Between Components/src/styled/Random.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | export const Accent = styled.span` 4 | color: #e16365; 5 | `; 6 | 7 | export const StyledTitle = styled.h1` 8 | font-size: 4.25rem; 9 | font-weight: 300; 10 | text-align: center; 11 | margin-bottom: 2rem; 12 | margin-top: 3rem; 13 | `; 14 | 15 | export const Strong = styled.strong` 16 | font-weight: bold; 17 | `; 18 | -------------------------------------------------------------------------------- /06.1 Intro to Serverless Functions/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /06.10 Game Over Bug Fix and Extra Styling/src/styled/Random.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | export const Accent = styled.span` 4 | color: #e16365; 5 | `; 6 | 7 | export const StyledTitle = styled.h1` 8 | font-size: 4.25rem; 9 | font-weight: 300; 10 | text-align: center; 11 | margin-bottom: 2rem; 12 | margin-top: 3rem; 13 | `; 14 | 15 | export const Strong = styled.strong` 16 | font-weight: bold; 17 | `; 18 | -------------------------------------------------------------------------------- /06.2 Netlify Init and Setup/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /06.3 Creating Your First Serverless Function/src/styled/Random.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | export const Accent = styled.span` 4 | color: #e16365; 5 | `; 6 | 7 | export const StyledTitle = styled.h1` 8 | font-size: 4.25rem; 9 | font-weight: 300; 10 | text-align: center; 11 | margin-bottom: 2rem; 12 | margin-top: 3rem; 13 | `; 14 | 15 | export const Strong = styled.strong` 16 | font-weight: bold; 17 | `; 18 | -------------------------------------------------------------------------------- /06.6 Display High Scores/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /08.4 Validate Access Token/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /09.4 Create Use Theme Hook/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /10.1 Styling and Cleanup/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /02.1 Introduction to Styled Components/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /03.3 Create Time Functionality/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /03.5 Update User Score Based on Input/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /05.2Airtable Workspace and API/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /06.4 Serverless Function to Retrieve High Scores/src/styled/Random.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | export const Accent = styled.span` 4 | color: #e16365; 5 | `; 6 | 7 | export const StyledTitle = styled.h1` 8 | font-size: 4.25rem; 9 | font-weight: 300; 10 | text-align: center; 11 | margin-bottom: 2rem; 12 | margin-top: 3rem; 13 | `; 14 | 15 | export const Strong = styled.strong` 16 | font-weight: bold; 17 | `; 18 | -------------------------------------------------------------------------------- /06.5 Setup Evironment Vairbles/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /06.6 Display High Scores/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | 25 | .env 26 | -------------------------------------------------------------------------------- /06.7 Create Save High Score Serverless Function/src/styled/Random.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | export const Accent = styled.span` 4 | color: #e16365; 5 | `; 6 | 7 | export const StyledTitle = styled.h1` 8 | font-size: 4.25rem; 9 | font-weight: 300; 10 | text-align: center; 11 | margin-bottom: 2rem; 12 | margin-top: 3rem; 13 | `; 14 | 15 | export const Strong = styled.strong` 16 | font-weight: bold; 17 | `; 18 | -------------------------------------------------------------------------------- /07.3 Add Authentication in React/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /08.2 Include Access Token in Save Score Request/src/styled/Random.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | export const Accent = styled.span` 4 | color: #e16365; 5 | `; 6 | 7 | export const StyledTitle = styled.h1` 8 | font-size: 4.25rem; 9 | font-weight: 300; 10 | text-align: center; 11 | margin-bottom: 2rem; 12 | margin-top: 3rem; 13 | `; 14 | 15 | export const Strong = styled.strong` 16 | font-weight: bold; 17 | `; 18 | -------------------------------------------------------------------------------- /09.2 Create CSS Variables for Theming/src/styled/Random.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | export const Accent = styled.span` 4 | color: var(--accent-color); 5 | `; 6 | 7 | export const StyledTitle = styled.h1` 8 | font-size: 4.25rem; 9 | font-weight: 300; 10 | text-align: center; 11 | margin-bottom: 2rem; 12 | margin-top: 3rem; 13 | `; 14 | 15 | export const Strong = styled.strong` 16 | font-weight: bold; 17 | `; 18 | -------------------------------------------------------------------------------- /10.1 Styling and Cleanup/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | 25 | .env 26 | -------------------------------------------------------------------------------- /01.2 Create Starter React Project/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /01.3 Add Routing with React Router/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /02.2 Create Base Styled Components/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /03.3 Track Score with Your First React Hook/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /03.4 Track User Input on Keypress/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /03.5 Update User Score Based on Input/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /04.2 Track User's Score Between Components/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /06.1 Intro to Serverless Functions/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /06.3 Creating Your First Serverless Function/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /06.5 Setup Evironment Vairbles/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | 25 | .env 26 | -------------------------------------------------------------------------------- /06.8 Refactoring Common Airtable Code/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /06.9 Save High Score in Game Over/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /08.3 Retrieve and Parse Access Token/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /08.4 Validate Access Token/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | 25 | .env 26 | -------------------------------------------------------------------------------- /09.2 Create CSS Variables for Theming/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /09.4 Create Use Theme Hook/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | 25 | .env 26 | -------------------------------------------------------------------------------- /02.1 Introduction to Styled Components/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /04.2 Track User's Score Between Components/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /06.10 Game Over Bug Fix and Extra Styling/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /06.4 Serverless Function to Retrieve High Scores/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /06.9 Save High Score in Game Over/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | 25 | .env 26 | -------------------------------------------------------------------------------- /07.3 Add Authentication in React/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | 25 | .env 26 | -------------------------------------------------------------------------------- /09.3 Use the Styled Components Theme Provider/src/styled/Random.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | export const Accent = styled.span` 4 | color: var(--accent-color); 5 | `; 6 | 7 | export const StyledTitle = styled.h1` 8 | font-size: 4.25rem; 9 | font-weight: 300; 10 | text-align: center; 11 | margin-bottom: 2rem; 12 | margin-top: 3rem; 13 | `; 14 | 15 | export const Strong = styled.strong` 16 | font-weight: bold; 17 | `; 18 | -------------------------------------------------------------------------------- /09.5 Persisting Theme Choice in Local Storage/src/styled/Random.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | export const Accent = styled.span` 4 | color: var(--accent-color); 5 | `; 6 | 7 | export const StyledTitle = styled.h1` 8 | font-size: 4.25rem; 9 | font-weight: 300; 10 | text-align: center; 11 | margin-bottom: 2rem; 12 | margin-top: 3rem; 13 | `; 14 | 15 | export const Strong = styled.strong` 16 | font-weight: bold; 17 | `; 18 | -------------------------------------------------------------------------------- /10.2 Final Deploy Configurations in Netlify/src/styled/Random.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | export const Accent = styled.span` 4 | color: var(--accent-color); 5 | `; 6 | 7 | export const StyledTitle = styled.h1` 8 | font-size: 4.25rem; 9 | font-weight: 300; 10 | text-align: center; 11 | margin-bottom: 2rem; 12 | margin-top: 3rem; 13 | `; 14 | 15 | export const Strong = styled.strong` 16 | font-weight: bold; 17 | `; 18 | -------------------------------------------------------------------------------- /03.3 Track Score with Your First React Hook/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /06.3 Creating Your First Serverless Function/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /06.7 Create Save High Score Serverless Function/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /06.8 Refactoring Common Airtable Code/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | 25 | .env 26 | -------------------------------------------------------------------------------- /08.2 Include Access Token in Save Score Request/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /08.3 Retrieve and Parse Access Token/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | 25 | .env 26 | -------------------------------------------------------------------------------- /09.2 Create CSS Variables for Theming/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | 25 | .env 26 | -------------------------------------------------------------------------------- /09.3 Use the Styled Components Theme Provider/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /09.5 Persisting Theme Choice in Local Storage/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /10.2 Final Deploy Configurations in Netlify/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /06.10 Game Over Bug Fix and Extra Styling/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | 25 | .env 26 | -------------------------------------------------------------------------------- /06.4 Serverless Function to Retrieve High Scores/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /09.3 Use the Styled Components Theme Provider/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | 25 | .env 26 | -------------------------------------------------------------------------------- /09.5 Persisting Theme Choice in Local Storage/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | 25 | .env 26 | -------------------------------------------------------------------------------- /10.2 Final Deploy Configurations in Netlify/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | 25 | .env 26 | -------------------------------------------------------------------------------- /06.7 Create Save High Score Serverless Function/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | 25 | .env 26 | -------------------------------------------------------------------------------- /08.2 Include Access Token in Save Score Request/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | 25 | .env 26 | -------------------------------------------------------------------------------- /02.4 Style the Home Page/src/pages/Home.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Accent } from '../styled/Random'; 3 | import { CTA } from '../styled/CTA'; 4 | import { StyledTitle } from '../styled/Random'; 5 | export default function Home() { 6 | return ( 7 |
8 | Ready to type? 9 | 10 | Click or Type 's' to start playing 11 | 12 |
13 | ); 14 | } 15 | -------------------------------------------------------------------------------- /02.5 Style the Game Page/src/pages/Home.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Accent } from '../styled/Random'; 3 | import { CTA } from '../styled/CTA'; 4 | import { StyledTitle } from '../styled/Random'; 5 | export default function Home() { 6 | return ( 7 |
8 | Ready to type? 9 | 10 | Click or Type 's' to start playing 11 | 12 |
13 | ); 14 | } 15 | -------------------------------------------------------------------------------- /03.1 Intro to React Hooks/src/pages/Home.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Accent } from '../styled/Random'; 3 | import { CTA } from '../styled/CTA'; 4 | import { StyledTitle } from '../styled/Random'; 5 | export default function Home() { 6 | return ( 7 |
8 | Ready to type? 9 | 10 | Click or Type 's' to start playing 11 | 12 |
13 | ); 14 | } 15 | -------------------------------------------------------------------------------- /04.1 Intro to React Hooks/src/pages/Home.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Accent } from '../styled/Random'; 3 | import { CTA } from '../styled/CTA'; 4 | import { StyledTitle } from '../styled/Random'; 5 | export default function Home() { 6 | return ( 7 |
8 | Ready to type? 9 | 10 | Click or Type 's' to start playing 11 | 12 |
13 | ); 14 | } 15 | -------------------------------------------------------------------------------- /05.1 Intro to Airtable/src/pages/Home.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Accent } from '../styled/Random'; 3 | import { CTA } from '../styled/CTA'; 4 | import { StyledTitle } from '../styled/Random'; 5 | export default function Home() { 6 | return ( 7 |
8 | Ready to type? 9 | 10 | Click or Type 's' to start playing 11 | 12 |
13 | ); 14 | } 15 | -------------------------------------------------------------------------------- /06.6 Display High Scores/src/pages/Home.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Accent } from '../styled/Random'; 3 | import { CTA } from '../styled/CTA'; 4 | import { StyledTitle } from '../styled/Random'; 5 | export default function Home() { 6 | return ( 7 |
8 | Ready to type? 9 | 10 | Click or Type 's' to start playing 11 | 12 |
13 | ); 14 | } 15 | -------------------------------------------------------------------------------- /10.1 Styling and Cleanup/src/pages/Home.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Accent } from '../styled/Random'; 3 | import { CTA } from '../styled/CTA'; 4 | import { StyledTitle } from '../styled/Random'; 5 | export default function Home() { 6 | return ( 7 |
8 | Ready to type? 9 | 10 | Click or Type 's' to start playing 11 | 12 |
13 | ); 14 | } 15 | -------------------------------------------------------------------------------- /03.3 Create Time Functionality/src/pages/Home.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Accent } from '../styled/Random'; 3 | import { CTA } from '../styled/CTA'; 4 | import { StyledTitle } from '../styled/Random'; 5 | export default function Home() { 6 | return ( 7 |
8 | Ready to type? 9 | 10 | Click or Type 's' to start playing 11 | 12 |
13 | ); 14 | } 15 | -------------------------------------------------------------------------------- /05.2Airtable Workspace and API/src/pages/Home.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Accent } from '../styled/Random'; 3 | import { CTA } from '../styled/CTA'; 4 | import { StyledTitle } from '../styled/Random'; 5 | export default function Home() { 6 | return ( 7 |
8 | Ready to type? 9 | 10 | Click or Type 's' to start playing 11 | 12 |
13 | ); 14 | } 15 | -------------------------------------------------------------------------------- /06.2 Netlify Init and Setup/src/pages/Home.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Accent } from '../styled/Random'; 3 | import { CTA } from '../styled/CTA'; 4 | import { StyledTitle } from '../styled/Random'; 5 | export default function Home() { 6 | return ( 7 |
8 | Ready to type? 9 | 10 | Click or Type 's' to start playing 11 | 12 |
13 | ); 14 | } 15 | -------------------------------------------------------------------------------- /06.5 Setup Evironment Vairbles/src/pages/Home.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Accent } from '../styled/Random'; 3 | import { CTA } from '../styled/CTA'; 4 | import { StyledTitle } from '../styled/Random'; 5 | export default function Home() { 6 | return ( 7 |
8 | Ready to type? 9 | 10 | Click or Type 's' to start playing 11 | 12 |
13 | ); 14 | } 15 | -------------------------------------------------------------------------------- /08.4 Validate Access Token/src/pages/Home.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Accent } from '../styled/Random'; 3 | import { CTA } from '../styled/CTA'; 4 | import { StyledTitle } from '../styled/Random'; 5 | export default function Home() { 6 | return ( 7 |
8 | Ready to type? 9 | 10 | Click or Type 's' to start playing 11 | 12 |
13 | ); 14 | } 15 | -------------------------------------------------------------------------------- /09.4 Create Use Theme Hook/src/pages/Home.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Accent } from '../styled/Random'; 3 | import { CTA } from '../styled/CTA'; 4 | import { StyledTitle } from '../styled/Random'; 5 | export default function Home() { 6 | return ( 7 |
8 | Ready to type? 9 | 10 | Click or Type 's' to start playing 11 | 12 |
13 | ); 14 | } 15 | -------------------------------------------------------------------------------- /03.4 Track User Input on Keypress/src/pages/Home.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Accent } from '../styled/Random'; 3 | import { CTA } from '../styled/CTA'; 4 | import { StyledTitle } from '../styled/Random'; 5 | export default function Home() { 6 | return ( 7 |
8 | Ready to type? 9 | 10 | Click or Type 's' to start playing 11 | 12 |
13 | ); 14 | } 15 | --------------------------------------------------------------------------------