├── .gitignore ├── .prettierrc ├── .vscode └── settings.json ├── A01 - Pomodoro ├── README.md ├── finished │ ├── .gitignore │ ├── README.md │ ├── package.json │ ├── public │ │ ├── favicon.ico │ │ ├── index.html │ │ ├── logo192.png │ │ ├── logo512.png │ │ ├── manifest.json │ │ └── robots.txt │ ├── src │ │ ├── App.css │ │ ├── App.js │ │ └── index.js │ └── yarn.lock └── start │ ├── .gitignore │ ├── README.md │ ├── package.json │ ├── public │ ├── favicon.ico │ ├── index.html │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ └── robots.txt │ ├── src │ ├── App.css │ ├── App.js │ └── index.js │ └── yarn.lock ├── A02 - Markdown Editor ├── README.md ├── finished │ ├── .gitignore │ ├── README.md │ ├── package-lock.json │ ├── package.json │ ├── public │ │ ├── favicon.ico │ │ ├── index.html │ │ ├── logo192.png │ │ ├── logo512.png │ │ ├── manifest.json │ │ └── robots.txt │ ├── src │ │ ├── App.css │ │ ├── App.js │ │ └── index.js │ └── yarn.lock └── start │ ├── .gitignore │ ├── README.md │ ├── package-lock.json │ ├── package.json │ ├── public │ ├── favicon.ico │ ├── index.html │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ └── robots.txt │ ├── src │ ├── App.css │ ├── App.js │ └── index.js │ └── yarn.lock ├── A03 - Highlight Tabs ├── README.md ├── finished │ ├── .gitignore │ ├── README.md │ ├── package.json │ ├── public │ │ ├── favicon.ico │ │ ├── index.html │ │ ├── logo192.png │ │ ├── logo512.png │ │ ├── manifest.json │ │ └── robots.txt │ ├── src │ │ ├── App.css │ │ ├── App.js │ │ ├── Routes.js │ │ ├── components │ │ │ ├── Header.js │ │ │ └── Tab.js │ │ ├── index.js │ │ └── pages │ │ │ ├── About.js │ │ │ ├── Features.js │ │ │ └── Home.js │ └── yarn.lock └── start │ ├── .gitignore │ ├── README.md │ ├── package.json │ ├── public │ ├── favicon.ico │ ├── index.html │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ └── robots.txt │ ├── src │ ├── App.css │ ├── App.js │ └── index.js │ └── yarn.lock ├── A04 - Paper Rock Scissors ├── README.md ├── finished │ ├── .gitignore │ ├── README.md │ ├── package.json │ ├── public │ │ ├── favicon.ico │ │ ├── index.html │ │ ├── logo192.png │ │ ├── logo512.png │ │ ├── manifest.json │ │ └── robots.txt │ ├── src │ │ ├── App.css │ │ ├── App.js │ │ ├── icons │ │ │ ├── Paper.js │ │ │ ├── Rock.js │ │ │ └── Scissors.js │ │ └── index.js │ └── yarn.lock └── start │ ├── .gitignore │ ├── README.md │ ├── package.json │ ├── public │ ├── favicon.ico │ ├── index.html │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ └── robots.txt │ ├── src │ ├── App.css │ ├── App.js │ ├── icons │ │ ├── Paper.js │ │ ├── Rock.js │ │ └── Scissors.js │ └── index.js │ └── yarn.lock ├── A05 - Moving Link ├── README.md ├── finished │ ├── .gitignore │ ├── README.md │ ├── package.json │ ├── public │ │ ├── favicon.ico │ │ ├── index.html │ │ ├── logo192.png │ │ ├── logo512.png │ │ ├── manifest.json │ │ └── robots.txt │ ├── src │ │ ├── App.css │ │ ├── App.js │ │ ├── index.js │ │ └── useMovement.js │ └── yarn.lock └── start │ ├── .gitignore │ ├── README.md │ ├── package.json │ ├── public │ ├── favicon.ico │ ├── index.html │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ └── robots.txt │ ├── src │ ├── App.css │ ├── App.js │ └── index.js │ └── yarn.lock ├── A06 - Infinite Image Gallery ├── README.md ├── finished │ ├── .env.example │ ├── .gitignore │ ├── README.md │ ├── package.json │ ├── public │ │ ├── favicon.ico │ │ ├── index.html │ │ ├── logo192.png │ │ ├── logo512.png │ │ ├── manifest.json │ │ └── robots.txt │ ├── src │ │ ├── App.css │ │ ├── App.js │ │ └── index.js │ └── yarn.lock └── start │ ├── .env.example │ ├── .gitignore │ ├── README.md │ ├── package.json │ ├── public │ ├── favicon.ico │ ├── index.html │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ └── robots.txt │ ├── src │ ├── App.css │ ├── App.js │ └── index.js │ └── yarn.lock ├── A07 - Trivia Game ├── README.md ├── finished │ ├── .gitignore │ ├── README.md │ ├── package.json │ ├── public │ │ ├── favicon.ico │ │ ├── index.html │ │ ├── logo192.png │ │ ├── logo512.png │ │ ├── manifest.json │ │ └── robots.txt │ ├── src │ │ ├── App.css │ │ ├── App.js │ │ ├── categories.js │ │ ├── components │ │ │ ├── CategorySelector.js │ │ │ ├── Question.js │ │ │ ├── ResultModal.js │ │ │ └── Scoreboard.js │ │ ├── index.js │ │ └── useTrivia.js │ └── yarn.lock └── start │ ├── .gitignore │ ├── README.md │ ├── package.json │ ├── public │ ├── favicon.ico │ ├── index.html │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ └── robots.txt │ ├── src │ ├── App.css │ ├── App.js │ ├── categories.js │ ├── components │ │ ├── CategorySelector.js │ │ ├── Question.js │ │ ├── ResultModal.js │ │ └── Scoreboard.js │ └── index.js │ └── yarn.lock ├── A08 - Authentication ├── README.md ├── finished │ ├── .gitignore │ ├── README.md │ ├── package.json │ ├── public │ │ ├── favicon.ico │ │ ├── index.html │ │ ├── logo192.png │ │ ├── logo512.png │ │ ├── manifest.json │ │ └── robots.txt │ ├── src │ │ ├── App.css │ │ ├── App.js │ │ ├── components │ │ │ ├── PrivateRoute.js │ │ │ └── SiteHeader.js │ │ ├── contexts │ │ │ └── auth0-context.js │ │ ├── img │ │ │ ├── frodo.png │ │ │ ├── gandalf.png │ │ │ └── gollum.png │ │ ├── index.js │ │ └── pages │ │ │ ├── Dashboard.js │ │ │ └── Home.js │ └── yarn.lock └── start │ ├── .gitignore │ ├── README.md │ ├── package.json │ ├── public │ ├── favicon.ico │ ├── index.html │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ └── robots.txt │ ├── src │ ├── App.css │ ├── App.js │ ├── components │ │ └── SiteHeader.js │ ├── img │ │ ├── frodo.png │ │ ├── gandalf.png │ │ └── gollum.png │ ├── index.js │ └── pages │ │ ├── Dashboard.js │ │ └── Home.js │ └── yarn.lock ├── A09 - Web Speech and Timers ├── README.md ├── finished │ ├── .gitignore │ ├── README.md │ ├── package.json │ ├── public │ │ ├── favicon.ico │ │ ├── index.html │ │ ├── logo192.png │ │ ├── logo512.png │ │ ├── manifest.json │ │ └── robots.txt │ ├── src │ │ ├── App.css │ │ ├── App.js │ │ └── index.js │ └── yarn.lock └── start │ ├── .gitignore │ ├── README.md │ ├── package.json │ ├── public │ ├── favicon.ico │ ├── index.html │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ └── robots.txt │ ├── src │ ├── App.css │ ├── App.js │ └── index.js │ └── yarn.lock ├── A10 - Calendar Picker ├── README.md ├── finished │ ├── README.md │ ├── package.json │ ├── public │ │ ├── favicon.ico │ │ ├── index.html │ │ ├── logo192.png │ │ ├── logo512.png │ │ ├── manifest.json │ │ └── robots.txt │ ├── src │ │ ├── App.css │ │ ├── App.js │ │ └── index.js │ └── yarn.lock └── start │ ├── README.md │ ├── package.json │ ├── public │ ├── favicon.ico │ ├── index.html │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ └── robots.txt │ ├── src │ ├── App.css │ ├── App.js │ └── index.js │ └── yarn.lock ├── B01 - Animated Chat Box ├── README.md ├── finished │ ├── README.md │ ├── package.json │ ├── public │ │ ├── favicon.ico │ │ ├── index.html │ │ ├── logo192.png │ │ ├── logo512.png │ │ ├── manifest.json │ │ └── robots.txt │ ├── src │ │ ├── App.css │ │ ├── App.js │ │ └── index.js │ └── yarn.lock └── start │ ├── README.md │ ├── package.json │ ├── public │ ├── favicon.ico │ ├── index.html │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ └── robots.txt │ ├── src │ ├── App.css │ ├── App.js │ └── index.js │ └── yarn.lock ├── B02 - Multi-Step Form ├── README.md ├── finished │ ├── README.md │ ├── package.json │ ├── public │ │ ├── favicon.ico │ │ ├── index.html │ │ ├── logo192.png │ │ ├── logo512.png │ │ ├── manifest.json │ │ └── robots.txt │ ├── src │ │ ├── App.css │ │ ├── App.js │ │ ├── components │ │ │ └── SignupForm │ │ │ │ ├── 1ProfileForm.js │ │ │ │ ├── 2SocialForm.js │ │ │ │ ├── 3Review.js │ │ │ │ ├── Animator.js │ │ │ │ ├── SignupForm.js │ │ │ │ ├── SignupFormContext.js │ │ │ │ └── StepLinks.js │ │ └── index.js │ └── yarn.lock └── start │ ├── README.md │ ├── package.json │ ├── public │ ├── favicon.ico │ ├── index.html │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ └── robots.txt │ ├── src │ ├── App.css │ ├── App.js │ └── index.js │ └── yarn.lock ├── B03 - Memory Matching Game ├── README.md ├── finished │ ├── README.md │ ├── package.json │ ├── public │ │ ├── favicon.ico │ │ ├── index.html │ │ ├── logo192.png │ │ ├── logo512.png │ │ ├── manifest.json │ │ └── robots.txt │ ├── src │ │ ├── App.css │ │ ├── App.js │ │ └── index.js │ └── yarn.lock └── start │ ├── README.md │ ├── package.json │ ├── public │ ├── favicon.ico │ ├── index.html │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ └── robots.txt │ ├── src │ ├── App.css │ ├── App.js │ └── index.js │ └── yarn.lock ├── B04 - Drag and Drop Math Card ├── README.md ├── finished │ ├── README.md │ ├── package.json │ ├── public │ │ ├── favicon.ico │ │ ├── index.html │ │ ├── logo192.png │ │ ├── logo512.png │ │ ├── manifest.json │ │ └── robots.txt │ ├── src │ │ ├── App.css │ │ ├── App.js │ │ └── index.js │ └── yarn.lock └── start │ ├── README.md │ ├── package.json │ ├── public │ ├── favicon.ico │ ├── index.html │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ └── robots.txt │ └── src │ ├── App.css │ ├── App.js │ └── index.js ├── B05 - Browser ├── README.md ├── finished │ ├── .gitignore │ ├── README.md │ ├── package.json │ ├── public │ │ ├── favicon.ico │ │ ├── index.html │ │ ├── logo192.png │ │ ├── logo512.png │ │ ├── manifest.json │ │ └── robots.txt │ ├── src │ │ ├── App.css │ │ ├── App.js │ │ ├── components │ │ │ ├── AddressBar.js │ │ │ └── Tabs.js │ │ └── index.js │ └── yarn.lock └── start │ ├── .gitignore │ ├── README.md │ ├── package.json │ ├── public │ ├── favicon.ico │ ├── index.html │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ └── robots.txt │ ├── src │ ├── App.css │ ├── App.js │ ├── components │ │ ├── AddressBar.js │ │ └── Tabs.js │ └── index.js │ └── yarn.lock ├── B06 - Real-Time Search ├── README.md ├── finished │ ├── README.md │ ├── package.json │ ├── public │ │ ├── favicon.ico │ │ ├── index.html │ │ ├── logo192.png │ │ ├── logo512.png │ │ ├── manifest.json │ │ └── robots.txt │ ├── src │ │ ├── App.css │ │ ├── App.js │ │ └── index.js │ └── yarn.lock └── start │ ├── README.md │ ├── package.json │ ├── public │ ├── favicon.ico │ ├── index.html │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ └── robots.txt │ ├── src │ ├── App.css │ ├── App.js │ └── index.js │ └── yarn.lock ├── B07 - Chart the Weather ├── README.md ├── finished │ ├── README.md │ ├── package.json │ ├── public │ │ ├── favicon.ico │ │ ├── index.html │ │ ├── logo192.png │ │ ├── logo512.png │ │ ├── manifest.json │ │ └── robots.txt │ ├── src │ │ ├── App.css │ │ ├── App.js │ │ ├── components │ │ │ ├── GeoForm.js │ │ │ └── WeatherChart.js │ │ └── index.js │ └── yarn.lock └── start │ ├── README.md │ ├── package.json │ ├── public │ ├── favicon.ico │ ├── index.html │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ └── robots.txt │ ├── src │ ├── App.css │ ├── App.js │ └── index.js │ └── yarn.lock ├── B08 - Shopping Cart ├── finished │ ├── .gitignore │ ├── README.md │ ├── package.json │ ├── public │ │ ├── favicon.ico │ │ ├── index.html │ │ ├── logo192.png │ │ ├── logo512.png │ │ ├── manifest.json │ │ └── robots.txt │ ├── src │ │ ├── App.css │ │ ├── App.js │ │ ├── components │ │ │ ├── Cart.js │ │ │ ├── Header.js │ │ │ └── Product.js │ │ ├── contexts │ │ │ └── use-cart.js │ │ ├── index.js │ │ ├── products.js │ │ └── supermarket.svg │ └── yarn.lock └── start │ ├── .gitignore │ ├── README.md │ ├── package.json │ ├── public │ ├── favicon.ico │ ├── index.html │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ └── robots.txt │ ├── src │ ├── App.css │ ├── App.js │ ├── components │ │ ├── Cart.js │ │ └── Header.js │ ├── index.js │ ├── products.js │ └── supermarket.svg │ └── yarn.lock ├── B09 - Typing Test ├── finished │ ├── README.md │ ├── package.json │ ├── public │ │ ├── favicon.ico │ │ ├── index.html │ │ ├── logo192.png │ │ ├── logo512.png │ │ ├── manifest.json │ │ └── robots.txt │ ├── src │ │ ├── App.css │ │ ├── App.js │ │ └── index.js │ └── yarn.lock └── start │ ├── README.md │ ├── package.json │ ├── public │ ├── favicon.ico │ ├── index.html │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ └── robots.txt │ ├── src │ ├── App.css │ ├── App.js │ └── index.js │ └── yarn.lock ├── README.md └── VS Code Setup.md /.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* -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "tabWidth": 2, 3 | "useTabs": false, 4 | "singleQuote": true 5 | } 6 | -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "workbench.colorCustomizations": { 3 | "activityBar.activeBackground": "#1accff", 4 | "activityBar.activeBorder": "#df00ad", 5 | "activityBar.background": "#1accff", 6 | "activityBar.foreground": "#15202b", 7 | "activityBar.inactiveForeground": "#15202b99", 8 | "activityBarBadge.background": "#df00ad", 9 | "activityBarBadge.foreground": "#e7e7e7", 10 | "statusBar.background": "#00b3e6", 11 | "statusBar.border": "#00b3e6", 12 | "statusBar.foreground": "#15202b", 13 | "statusBarItem.hoverBackground": "#008bb3", 14 | "titleBar.activeBackground": "#00b3e6", 15 | "titleBar.activeForeground": "#15202b", 16 | "titleBar.border": "#00b3e6", 17 | "titleBar.inactiveBackground": "#00b3e699", 18 | "titleBar.inactiveForeground": "#15202b99" 19 | }, 20 | "peacock.color": "#00b3e6" 21 | } -------------------------------------------------------------------------------- /A01 - Pomodoro/README.md: -------------------------------------------------------------------------------- 1 | ## Pomodoro Timer 2 | 3 | We'll build a Pomodoro timer that can teach us about rendering in React. 4 | 5 | [View Demo](https://r36qd.codesandbox.io/) - [Watch a Preview](https://learn.chrisoncode.io/courses/10-react-apps-series-a/348620-01-pomodoro/992082-00-pomodoro-preview) - [Buy the Course](https://MakeReactApps.com/?utm_source=github.com&utm_medium=readme) 6 | 7 | [![](https://scotch-res.cloudinary.com/video/upload/vs_50,dl_200,e_loop/v1592352061/01_-_pomodoro_uwan1y.gif)](https://learn.chrisoncode.io/courses/10-react-apps-series-a/348620-01-pomodoro/992082-00-pomodoro-preview) 8 | 9 | ### React skills used in this app 10 | 11 | - Creating timers 12 | - React state w/ useState() 13 | - React effects w/ useEffect() 14 | - React refs w/ useRef() 15 | - Parent and child components 16 | -------------------------------------------------------------------------------- /A01 - Pomodoro/finished/.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 | -------------------------------------------------------------------------------- /A01 - Pomodoro/finished/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "finished", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^4.2.4", 7 | "@testing-library/react": "^9.3.2", 8 | "@testing-library/user-event": "^7.1.2", 9 | "react": "^16.13.1", 10 | "react-dom": "^16.13.1", 11 | "react-scripts": "3.4.1" 12 | }, 13 | "scripts": { 14 | "start": "react-scripts start", 15 | "build": "react-scripts build", 16 | "test": "react-scripts test", 17 | "eject": "react-scripts eject" 18 | }, 19 | "eslintConfig": { 20 | "extends": "react-app" 21 | }, 22 | "browserslist": { 23 | "production": [ 24 | ">0.2%", 25 | "not dead", 26 | "not op_mini all" 27 | ], 28 | "development": [ 29 | "last 1 chrome version", 30 | "last 1 firefox version", 31 | "last 1 safari version" 32 | ] 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /A01 - Pomodoro/finished/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chris-sev/make-react-apps/3b44ef24a5e24935da0d3f4f0b05b08848d2cd8c/A01 - Pomodoro/finished/public/favicon.ico -------------------------------------------------------------------------------- /A01 - Pomodoro/finished/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chris-sev/make-react-apps/3b44ef24a5e24935da0d3f4f0b05b08848d2cd8c/A01 - Pomodoro/finished/public/logo192.png -------------------------------------------------------------------------------- /A01 - Pomodoro/finished/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chris-sev/make-react-apps/3b44ef24a5e24935da0d3f4f0b05b08848d2cd8c/A01 - Pomodoro/finished/public/logo512.png -------------------------------------------------------------------------------- /A01 - Pomodoro/finished/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /A01 - Pomodoro/finished/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /A01 - Pomodoro/finished/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import App from './App'; 4 | 5 | ReactDOM.render( 6 | 7 | 8 | , 9 | document.getElementById('root') 10 | ); 11 | -------------------------------------------------------------------------------- /A01 - Pomodoro/start/.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 | -------------------------------------------------------------------------------- /A01 - Pomodoro/start/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "finished", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^4.2.4", 7 | "@testing-library/react": "^9.3.2", 8 | "@testing-library/user-event": "^7.1.2", 9 | "react": "^16.13.1", 10 | "react-dom": "^16.13.1", 11 | "react-scripts": "3.4.1" 12 | }, 13 | "scripts": { 14 | "start": "react-scripts start", 15 | "build": "react-scripts build", 16 | "test": "react-scripts test", 17 | "eject": "react-scripts eject" 18 | }, 19 | "eslintConfig": { 20 | "extends": "react-app" 21 | }, 22 | "browserslist": { 23 | "production": [ 24 | ">0.2%", 25 | "not dead", 26 | "not op_mini all" 27 | ], 28 | "development": [ 29 | "last 1 chrome version", 30 | "last 1 firefox version", 31 | "last 1 safari version" 32 | ] 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /A01 - Pomodoro/start/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chris-sev/make-react-apps/3b44ef24a5e24935da0d3f4f0b05b08848d2cd8c/A01 - Pomodoro/start/public/favicon.ico -------------------------------------------------------------------------------- /A01 - Pomodoro/start/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chris-sev/make-react-apps/3b44ef24a5e24935da0d3f4f0b05b08848d2cd8c/A01 - Pomodoro/start/public/logo192.png -------------------------------------------------------------------------------- /A01 - Pomodoro/start/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chris-sev/make-react-apps/3b44ef24a5e24935da0d3f4f0b05b08848d2cd8c/A01 - Pomodoro/start/public/logo512.png -------------------------------------------------------------------------------- /A01 - Pomodoro/start/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /A01 - Pomodoro/start/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /A01 - Pomodoro/start/src/App.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import './App.css'; 3 | 4 | export default function App() { 5 | return ( 6 |
7 |

Pomodoro!

8 | 9 |
10 | 00 11 | : 12 | 00 13 |
14 | 15 |
16 | 17 | 18 | 19 |
20 |
21 | ); 22 | } 23 | -------------------------------------------------------------------------------- /A01 - Pomodoro/start/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import App from './App'; 4 | 5 | ReactDOM.render( 6 | 7 | 8 | , 9 | document.getElementById('root') 10 | ); 11 | -------------------------------------------------------------------------------- /A02 - Markdown Editor/README.md: -------------------------------------------------------------------------------- 1 | ## Markdown Editor 2 | 3 | Let's build a real-time markdown previewer. As we update the markdown, we'll see the preview change on the right. 4 | 5 | [View Demo](https://391jg.codesandbox.io/) - [Watch a Preview](https://learn.chrisoncode.io/courses/10-react-apps-series-a/348621-02-markdown-editor/992079-00-markdown-editor-preview) - [Buy the Course](https://MakeReactApps.com/?utm_source=github.com&utm_medium=readme) 6 | 7 | [![](https://scotch-res.cloudinary.com/video/upload/vs_50,dl_200,e_loop/v1592352061/02_-_markdown_editor_sqfqzz.gif)](https://learn.chrisoncode.io/courses/10-react-apps-series-a/348621-02-markdown-editor/992079-00-markdown-editor-preview) 8 | 9 | ### React skills used in this app 10 | 11 | - React state w/ useState() 12 | - 3rd Party Packages 13 | -------------------------------------------------------------------------------- /A02 - Markdown Editor/finished/.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 | -------------------------------------------------------------------------------- /A02 - Markdown Editor/finished/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "finished", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^4.2.4", 7 | "@testing-library/react": "^9.3.2", 8 | "@testing-library/user-event": "^7.1.2", 9 | "marked": "^0.8.2", 10 | "react": "^16.13.1", 11 | "react-dom": "^16.13.1", 12 | "react-markdown": "^4.3.1", 13 | "react-scripts": "3.4.1" 14 | }, 15 | "scripts": { 16 | "start": "react-scripts start", 17 | "build": "react-scripts build", 18 | "test": "react-scripts test", 19 | "eject": "react-scripts eject" 20 | }, 21 | "eslintConfig": { 22 | "extends": "react-app" 23 | }, 24 | "browserslist": { 25 | "production": [ 26 | ">0.2%", 27 | "not dead", 28 | "not op_mini all" 29 | ], 30 | "development": [ 31 | "last 1 chrome version", 32 | "last 1 firefox version", 33 | "last 1 safari version" 34 | ] 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /A02 - Markdown Editor/finished/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chris-sev/make-react-apps/3b44ef24a5e24935da0d3f4f0b05b08848d2cd8c/A02 - Markdown Editor/finished/public/favicon.ico -------------------------------------------------------------------------------- /A02 - Markdown Editor/finished/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chris-sev/make-react-apps/3b44ef24a5e24935da0d3f4f0b05b08848d2cd8c/A02 - Markdown Editor/finished/public/logo192.png -------------------------------------------------------------------------------- /A02 - Markdown Editor/finished/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chris-sev/make-react-apps/3b44ef24a5e24935da0d3f4f0b05b08848d2cd8c/A02 - Markdown Editor/finished/public/logo512.png -------------------------------------------------------------------------------- /A02 - Markdown Editor/finished/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /A02 - Markdown Editor/finished/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /A02 - Markdown Editor/finished/src/App.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Hind&display=swap'); 2 | 3 | body { 4 | background: #e8eaf1; 5 | font-family: 'Hind', Arial, Helvetica, sans-serif; 6 | } 7 | 8 | .app { 9 | min-height: 100vh; 10 | display: grid; 11 | grid-template-columns: 1fr 1fr; 12 | grid-gap: 15px; 13 | } 14 | 15 | textarea { 16 | background: #eff1f5; 17 | box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06); 18 | outline: none; 19 | border: none; 20 | border-radius: 5px; 21 | padding: 20px; 22 | font-size: 22px; 23 | } 24 | 25 | .preview { 26 | padding-left: 20px; 27 | padding-right: 20px; 28 | } 29 | 30 | blockquote { 31 | font-size: 30px; 32 | background: #efefef; 33 | border-left: 12px solid rgb(44, 163, 241); 34 | padding: 20px 30px; 35 | border-radius: 5px; 36 | margin: 0; 37 | } 38 | -------------------------------------------------------------------------------- /A02 - Markdown Editor/finished/src/App.js: -------------------------------------------------------------------------------- 1 | import React, { useState } from 'react'; 2 | import marked from 'marked'; 3 | import ReactMarkdown from 'react-markdown'; 4 | import './App.css'; 5 | 6 | export default function App() { 7 | const [markdown, setMarkdown] = useState('# suppppp'); 8 | 9 | function handleChange(e) { 10 | setMarkdown(e.target.value); 11 | } 12 | 13 | return ( 14 |
15 |