A website built to display data regarding the FSU Football Team; built by an FSU alum brought through an emotional rollercoaster, aka the FSU Football Team's performance from 2010-2020. This websites data includes:
- Countdown to the next game played by your Noles
- Recent game updates
- Schedule by year
- Box Scores
- Game Stats for both teams playing
- Play by Play information by game
- Roster information by year
- Reactjs
- Tailwindscss
- Netlify
- CollegeFootballAPI
Promise.all() - https://stackoverflow.com/questions/38180080/when-to-use-promise-all
Promise.all() vs Multiple Awaits - https://stackoverflow.com/questions/45285129/any-difference-between-await-promise-all-and-multiple-await/54291660#54291660
Tailwind Configuration with CRA (and Concurrently from Comments)- https://www.youtube.com/watch?v=pnDsP3BbXPg
Tailwind being "Mobile First" approach | "Hide everything medium and below, show on large" - tailwindlabs/tailwindcss#841
Switch render "outside" of React Component JSX - https://stackoverflow.com/questions/46592833/how-to-use-switch-statement-inside-a-react-component
Button Skew / diagonal Buttons - https://codepen.io/amnkhan/pen/oopyxw
Maximum Update depth exceeed error - https://stackoverflow.com/questions/48497358/reactjs-maximum-update-depth-exceeded-error
UPDATE ERROR above lead to this post about using useRef instead of dispatching to overall wins on every render - https://stackoverflow.com/questions/53146575/storing-non-state-variables-in-functional-components
and more on useRef that I use for Wins/Losses on Schedule Page - https://medium.com/trabe/react-useref-hook-b6c9d39e2022 and https://dev.to/trentyang/replace-lifecycle-with-hooks-in-react-3d4n
Working with git branches and merging - https://stackabuse.com/git-merge-branch-into-master/
Conditional Attribute in React (JSX) - https://stackoverflow.com/questions/41798027/react-inline-conditional-component-attribute/41798074`
React-Spring for animations - https://www.youtube.com/watch?v=S8yn3-WpVV8 and https://www.react-spring.io/docs/hooks/examples
Shake Animation (Vanilla CSS) - https://www.w3schools.com/howto/howto_css_shake_image.asp
React-Router-Params (match.params) - https://learn.co/lessons/react-router-params
Hover, Focus, and Active Styles - https://tailwindcss.com/course/hover-focus-and-active-styles/ and https://tailwindcss.com/docs/pseudo-class-variants/#app
Enabling Variants (Default Tailwind configuration changes) - https://tailwindcss.com/course/hover-focus-and-active-styles/
Conditional ClassNames in JSX - https://stackoverflow.com/questions/30533171/react-js-conditionally-applying-class-attributes
React Page Rendering Twice (Still not fixed) and why I cant read from state - https://stackoverflow.com/questions/53991538/reactjs-typeerror-cannot-read-property-0-of-undefined and https://stackoverflow.com/questions/48846289/why-is-my-react-component-is-rendering-twice
Check if Object is empty - https://stackoverflow.com/questions/679915/how-do-i-test-for-an-empty-javascript-object
UseEffect runs AFTER render commit phase,hence after the render cycle - https://stackoverflow.com/questions/55424405/does-a-render-happen-before-function-in-react-hooks-useeffect-is-called/55424674
Debugging in React - https://www.youtube.com/watch?v=PJeNReqyH88
TypeError - Cannot Read Property '0' of undefined - https://stackoverflow.com/questions/53991538/reactjs-typeerror-cannot-read-property-0-of-undefined
JavaScript Array SORT by two Fields (used to sort Game Plays by Quarter and Time Left in GameDetailsState) - https://coderwall.com/p/ebqhca/javascript-sort-by-two-fields
Simple Way to show pad with leading Zero if number is less than 10 - https://stackoverflow.com/questions/8089875/show-a-leading-zero-if-a-number-is-less-than-10
Use of Display: table-cell instead of Display: Block for a Table - https://tailwindcss.com/docs/display/#app
Loading Animation - https://codepen.io/krupenja/pen/XWbKpgb
Persisting State with Local Storage - https://dev.to/selbekk/persisting-your-react-state-in-9-lines-of-code-9go
Vertically align h1 - https://stackoverflow.com/questions/20562860/how-do-i-vertically-center-an-h1-in-a-div/20563075 and https://tailwindcss.com/docs/align-items/#app
Flexbox column reverse, but start from the top instead of the end- https://stackoverflow.com/questions/54912146/flexbox-list-column-reverse-and-start-from-top
Sort Array ascending numbers, but put null last - https://stackoverflow.com/questions/29829205/sort-an-array-so-that-null-values-always-come-last
Fixed Navbar (and creating of UnderNavbar Component) - https://www.w3schools.com/howto/howto_css_fixed_menu.asp
@apply on different screen sizes only - https://tailwindcss.com/docs/functions-and-directives/
Hamburger Menu on click - https://github.com/justalever/tailwind-navbar/blob/master/public/index.html and https://reactjs.org/docs/forms.html and https://stackoverflow.com/questions/12133791/css-overlapping-borders
Setinterval with React Hooks to get current time updating - https://overreacted.io/making-setinterval-declarative-with-react-hooks/ and https://reactjs.org/docs/state-and-lifecycle.html
Using moment to subract and sort an array of times - https://stackoverflow.com/questions/37505117/find-the-next-closest-date-in-mm-dd-yyy-format-javascript and https://momentjs.com/docs/#/displaying/difference/
Dispatch multiple Actions (redux example, but same concept) - jeffbski/redux-logic#88
Countdown to next game with Momentjs - https://momentjs.com/docs/#/durations/as/ and https://momentjs.com/docs/#/displaying/difference/ and https://momentjs.com/docs/#/durations/ and https://stackoverflow.com/questions/42901048/momentjs-convert-milliseconds-to-days
Glitch Text - https://codepen.io/franciscalizo/pen/VwLrjjb
Keep Footer at Bottom - https://www.freecodecamp.org/news/how-to-keep-your-footer-where-it-belongs-59c6aa05c59c/ and https://medium.com/@zerox/keep-that-damn-footer-at-the-bottom-c7a921cb9551
Button inside Link to work in Firefox - https://stackoverflow.com/questions/51665178/link-of-react-router-dom-is-not-working-in-firefox
github Corner and HTML to JSX - http://tholman.com/github-corners/ and https://magic.reactjs.net/htmltojsx.htm
Merge Conflict - https://help.github.com/en/github/collaborating-with-issues-and-pull-requests/resolving-a-merge-conflict-using-the-command-line
Scroll to Top on react-router page change - https://github.com/ReactTraining/react-router/blob/master/packages/react-router-dom/docs/guides/scroll-restoration.md and https://zeph.co/react-router-scroll-to-top
View localhost on phone - https://medium.com/@claire.ristow/how-to-test-your-localhost-on-an-iphone-54e7b11439b7
Position relative for z-index + transoform - https://coder-coder.com/z-index-isnt-working/
SSL , HTTPS, Secure Site and Mixed Content - https://www.globalsign.com/en/blog/how-to-fix-mixed-content-warnings-on-your-ssl-site
Page not found fix on Netlify with react Router - https://medium.com/@rexben/how-to-fix-page-not-found-on-netlify-with-react-router-dom-e0520692be5