├── .github └── FUNDING.yml ├── .all-contributorsrc ├── LICENSE ├── CONTRIBUTING.md ├── Games & Puzzles └── README.md ├── README.md ├── Personal & Portfolio └── README.md ├── Fun & Interesting └── README.md ├── Clones └── README.md ├── Tools & Libraries └── README.md ├── CODE_OF_CONDUCT.md ├── Project Add-Ons └── README.md ├── Productivity └── README.md └── Business & Real-World └── README.md /.github/FUNDING.yml: -------------------------------------------------------------------------------- 1 | github: [colbyfayock] 2 | -------------------------------------------------------------------------------- /.all-contributorsrc: -------------------------------------------------------------------------------- 1 | { 2 | "files": [ 3 | "README.md" 4 | ], 5 | "imageSize": 100, 6 | "commit": false, 7 | "contributors": [ 8 | { 9 | "login": "colbyfayock", 10 | "name": "Colby Fayock", 11 | "avatar_url": "https://avatars2.githubusercontent.com/u/1045274?v=4", 12 | "profile": "https://colbyfayock.com/newsletter", 13 | "contributions": [ 14 | "code", 15 | "doc" 16 | ] 17 | } 18 | ], 19 | "contributorsPerLine": 7, 20 | "projectName": "50-projects-for-react-and-the-static-web", 21 | "projectOwner": "colbyfayock", 22 | "repoType": "github", 23 | "repoHost": "https://github.com", 24 | "skipCi": true 25 | } 26 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2020 Colby Fayock 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Contributing 2 | This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome! 3 | 4 | ## Issues 5 | 6 | ### Creating an Issue 7 | If you find a bug, problem, or maybe the documentation just doesn't make sense, please create an Issue to document the concern. 8 | 9 | ### Description 10 | Please be description in your Issue, the more info you provide, the more likely someone will be able to help. 11 | 12 | ### Code Examples 13 | If you're experiencing an issue with the code, the most helpful thing you can do is create an example where you can reproduce the problem. This can be an open source Github repo, a private repo you can share with the maintainers, a [CodeSandbox](https://codesandbox.io/), or really anything to show the issue live with code along side of it. 14 | 15 | ## Pull Requests 16 | 17 | ### Creating a Pull Request 18 | If you're able to fix an active Issue, feel free to create a new Pull Request addressing the problem. There are no gaurantees that the code will be merged in "as is", but chances are, if you're willing to work with the maintainers, everyone will be able to come up with a solution everyone can be happy with. 19 | 20 | ### Description 21 | Please be description in your Pull Request. Whether big or small, it's important to be able to see the context of a change throughout the history of a project. 22 | 23 | ### Linking Fixed Issues 24 | If the Pull Request is addressing an Issue, please link that issue by specifying the `Fixes [Issue #]` syntax within the Pull Request. 25 | 26 | ### Getting Added to All Contributors in the README.md 27 | Once your Pull Request is successfully merged, feel free to tag yourself using the [All Conributors syntax](https://allcontributors.org/docs/en/bot/usage), which will create a new Pull Request requesting to add you in. 28 | 29 | ``` 30 | @all-contributors please add for 31 | ``` 32 | 33 | If your Pull Request is merged in and you're not added, please let someone know if you don't want to tag yourself, as we want to recognize everyone for their help. 34 | -------------------------------------------------------------------------------- /Games & Puzzles/README.md: -------------------------------------------------------------------------------- 1 | # Games & Puzzles 2 | 3 | ## Mad Libs 4 | 5 | ### Toolbox 6 | * [Fillerama](http://fillerama.io/) (fillerama.io) 7 | 8 | ### Tutorials 9 | Know of any good tutorials? Submit a Pull Reqest! 10 | 11 | ### Inspiration 12 | * [Mad Libs](https://en.wikipedia.org/wiki/Mad_Libs) (wikipedia.org) 13 | 14 | ## Frogger 15 | 16 | ### Toolbox 17 | * [Recoil](https://recoiljs.org/) (recoiljs.org) 18 | 19 | ### Tutorials 20 | * [Build a Game in React with Recoil](https://www.youtube.com/watch?v=FQW1g-4dZ7k&list=PLGMdx7aeJHvQe16pAetbmkIGsj-HUsIYj) (youtube.com) 21 | * [Learn JavaScript by building 7 games](https://www.freecodecamp.org/news/learn-javascript-by-building-7-games-video-course/) (freecodecamp.org) 22 | 23 | ### Inspiration 24 | * [Frogger-React-VR](https://github.com/matthamil/React-VR-Frogger) (github.com) 25 | 26 | ## Jigsaw Puzzle 27 | 28 | ### Toolbox 29 | * [interact.js](https://interactjs.io/) (interactjs.io) 30 | 31 | ### Tutorials 32 | * [Drag and Drop Elements with interact.js](https://alligator.io/js/drag-and-drop-interactjs/) (alligator.io) 33 | * [Html5 Jigsaw Puzzle](https://www.codeproject.com/Articles/395453/Html5-Jigsaw-Puzzle) (codeproject.com) 34 | 35 | ### Inspiration 36 | Know of any good examples? Submit a Pull Reqest! 37 | 38 | ## Tetris 39 | 40 | ### Toolbox 41 | * [React Hooks](https://reactjs.org/docs/hooks-reference.html) (reactjs.org) 42 | 43 | ### Tutorials 44 | * [How to Build Tetris in React - GameDev Tutorial (with React Hooks!)](https://www.youtube.com/watch?v=ZGOaCxX8HIU) (youtube.com) 45 | * [Learn JavaScript by building 7 games](https://www.freecodecamp.org/news/learn-javascript-by-building-7-games-video-course/) (freecodecamp.org) 46 | 47 | ### Inspiration 48 | * [React Tetris](https://chvin.github.io/react-tetris/) (chvin.github.io) 49 | 50 | ## Space Invaders 51 | 52 | ### Toolbox 53 | Know of any good tools? Submit a Pull Request! 54 | 55 | ### Tutorials 56 | * [Learn JavaScript by building 7 games](https://www.freecodecamp.org/news/learn-javascript-by-building-7-games-video-course/) (freecodecamp.org) 57 | 58 | ### Inspiration 59 | * [Space Invaders](https://codepen.io/adelciotto/pen/BHuGL) (codepen.io) 60 | 61 | ## Cards Against Humanity 62 | 63 | ### Toolbox 64 | Know of any good tools? Submit a Pull Request! 65 | 66 | ### Tutorials 67 | Know of any good tutorials? Submit a Pull Request! 68 | 69 | ### Inspiration 70 | * [Game Slap](https://www.gameslap.io/) 71 | 72 | --- 73 | 74 | ## Know of any other good resources? 75 | If you know of a great tutorial or another tool that can help others, open a pull request with a link! 76 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # 50 Projects for React and the Static Web 2 | 3 | [![All Contributors](https://img.shields.io/badge/all_contributors-1-orange.svg?style=flat-square)](#contributors-) 4 | 5 | 6 | 50 project ideas to help you stop asking yourself what to build. 7 | 8 | Get the [FREE PDF](https://50reactprojects.com/) here: [50reactprojects.com](https://50reactprojects.com/) 9 | 10 | ## Topics 11 | * [Business & Real-World](Business%20%26%20Real-World) 12 | * [Fun & Interesting](Fun%20%26%20Interesting) 13 | * [Personal & Portfolio](Personal%20%26%20Portfolio) 14 | * [Productivity](Productivity) 15 | * [Games & Puzzles](Games%20%26%20Puzzles) 16 | * [Tools & Libraries](Tools%20%26%20Libraries) 17 | * [Project Add-Ons](Project%20Add-Ons) 18 | * [Clones](Clones) 19 | 20 | ## Contributing 21 | 22 | Contributions are welcome with open arms! My goal is to provide an easy resource for anyone to get started building rather than getting stuck trying to come up with an idea. 23 | 24 | Here are some ideas of ways you can help: 25 | * **Toolbox:** know of a really great React hook or library that's a great resource to learn and use? 26 | * **Tutorials:** know of a great tutorial that helps walk through building a similar project or something that might help as part of that project? 27 | * **Documentation:** is there anything on here you think is confusing, could use more clarification, or just something that could be helpful? 28 | 29 | ## Support This Project 30 | 31 | Support this project and future free content by [sponsoring @colbyfayock](https://github.com/sponsors/colbyfayock). 32 | 33 | ## ✨ Contributors 34 | 35 | Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)): 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 |

Colby Fayock
💻 📖
45 | 46 | 47 | 48 | 49 | 50 | This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome! 51 | -------------------------------------------------------------------------------- /Personal & Portfolio/README.md: -------------------------------------------------------------------------------- 1 | # Personal & Portfolio 2 | 3 | ## Resume / CV Website 4 | 5 | ### Toolbox 6 | * [Github Actions](https://github.com/features/actions) (github.com) 7 | 8 | ### Tutorials 9 | * [Building a self-updating profile README for GitHub](https://simonwillison.net/2020/Jul/10/self-updating-profile-readme/) (simonwillison.net) 10 | * [Create a New Github Action to Automate Code Tasks with Javascript](https://egghead.io/playlists/create-a-new-github-action-to-automate-code-tasks-with-javascript-f1e9?af=atzgap) (egghead.io) 11 | 12 | ### Inspiration 13 | 14 | ## Blog 15 | 16 | ### Toolbox 17 | * [Netlify CMS](https://www.netlifycms.org/) (netlifycms.org) 18 | * [Prism.js](https://prismjs.com/) (prismjs.com) 19 | 20 | ### Tutorials 21 | * [Making a Gatsby Blog with Netlify CMS](https://www.gatsbyjs.org/tutorial/blog-netlify-cms-tutorial/) (gatsbyjs.org) 22 | * [How to Build Your Coding Blog From Scratch Using Gatsby and MDX](https://www.freecodecamp.org/news/build-a-developer-blog-from-scratch-with-gatsby-and-mdx/) (freecodecamp.org) 23 | 24 | ### Inspiration 25 | * [Gatsby Netlify CMS Starter](https://gatsby-netlify-cms.netlify.app/) (gatsby-netlify-cms.netlify.app) 26 | 27 | ## Project Case Studies 28 | 29 | ### Toolbox 30 | * [Hemingway Editor](http://www.hemingwayapp.com/) (hemingwayapp.com) 31 | 32 | ### Tutorials 33 | * [8 Tips For Creating a Great Case Study](https://neilpatel.com/blog/creating-a-great-case-study/) (neilpatel.com) 34 | * [How to Write a Case Study: Bookmarkable Guide & Template](https://blog.hubspot.com/blog/tabid/6307/bid/33282/the-ultimate-guide-to-creating-compelling-case-studies.aspx) (blog.hubspot.com) 35 | 36 | ## Goal Manager 37 | 38 | ### Toolbox 39 | * [Airtable](https://airtable.com/) (airtable.com) 40 | 41 | ### Tutorials 42 | * [Getting to Grips with the Airtable API](https://css-tricks.com/getting-to-grips-with-the-airtable-api/) (css-tricks.com) 43 | * [Airtable and React: Create a Simple Web App](https://upmostly.com/tutorials/create-simple-web-app-react-airtable) (upmostly.com) 44 | 45 | ### Inspiration 46 | 47 | ## Project Tracker 48 | 49 | ### Toolbox 50 | * [MongoDB](https://www.mongodb.com/) 51 | 52 | ### Tutorials 53 | * [A Gentle Introduction To Setting Up A React and MongoDB Stitch App From Scratch In 10 Minutes](https://www.joekarlsson.com/2019/04/a-gentle-introduction-to-setting-up-a-react-and-mongodb-stitch-app-from-scratch-in-10-minutes/) (joekarlsson.com) 54 | * [FullStack setup (Node.js, React.js and MongoDB)](https://dev.to/pacheco/my-fullstack-setup-node-js-react-js-and-mongodb-2a4k) (dev.to) 55 | 56 | ### Inspiration 57 | * [Jira Clone with with React/Babel (Client), and Node/TypeScript (API)](https://github.com/oldboyxx/jira_clone) (github.com) 58 | 59 | ## Newsletter 60 | 61 | ### Toolbox 62 | * [Mailchimp](https://mailchimp.com/) (mailchimp.com) 63 | * [Convertkit](https://convertkit.com/) (convertkit.com) 64 | * [gatsby-plugin-mailchimp](https://www.gatsbyjs.org/packages/gatsby-plugin-mailchimp/) (github.com) 65 | 66 | ### Tutorials 67 | * [Adding a Mailing List to Your Gatsby Site](https://www.stackbit.com/blog/jamstack-gatsby-mailchimp/) (stackbit.com) 68 | 69 | ### Inspiration 70 | 71 | 72 | --- 73 | 74 | ## Know of any other good resources? 75 | If you know of a great tutorial or another tool that can help others, open a pull request with a link! 76 | -------------------------------------------------------------------------------- /Fun & Interesting/README.md: -------------------------------------------------------------------------------- 1 | # Fun & Interesting 2 | 3 | ## Fan Wiki 4 | 5 | ### Toolbox 6 | * [Futurama API](https://futuramaapi.herokuapp.com/) (futuramaapi.herokuapp.com) 7 | 8 | ### Tutorials 9 | * [How to Create a Dynamic Rick and Morty Wiki Web App with Next.js](https://www.freecodecamp.org/news/how-to-create-a-dynamic-rick-and-morty-wiki-web-app-with-next-js/) (freecodecamp.org) 10 | * [How to Add Interactive Animations and Page Transitions to a Next.js Web App with Framer Motion](https://www.freecodecamp.org/news/how-to-add-interactive-animations-and-page-transitions-to-a-next-js-web-app-with-framer-motion/) (freecodecamp.org) 11 | 12 | ## Pokédex 13 | 14 | ### Toolbox 15 | * [PokéAPI](https://pokeapi.co/) (pokeapi.co) 16 | 17 | ### Tutorials 18 | * [Source and Create Nodes with Data from an API in Gatsby to Create a Pokemon Pokedex](https://egghead.io/playlists/source-and-create-nodes-with-data-from-an-api-in-gatsby-to-create-a-pokemon-pokedex-5e28?af=atzgap) (egghead.io) 19 | 20 | ## Video Gallery 21 | 22 | ### Toolbox 23 | * [YouTube API](https://developers.google.com/youtube/v3) (developers.google.com) 24 | * [react-youtube](https://github.com/tjallingt/react-youtube) (github.com) 25 | 26 | ### Tutorials 27 | Know of one? Let me know! 28 | 29 | ## Road Trip Map 30 | 31 | ### Toolbox 32 | * [Leaflet](https://leafletjs.com/) (leafletjs.com) 33 | * [React Leaflet](https://react-leaflet.js.org/) (react-leaflet.js.org) 34 | * [Gatsby Leaflet Starter](https://github.com/colbyfayock/gatsby-starter-leaflet) (github.com) 35 | * [Mapbox Studio](https://www.mapbox.com/mapbox-studio) (mapbox.com) 36 | 37 | ### Tutorials 38 | * [How to Create a Summer Road Trip Mapping App with Gatsby and Leaflet](https://www.freecodecamp.org/news/how-to-create-a-summer-road-trip-mapping-app-with-gatsby-and-leaflet/) (freecodecamp.org) 39 | * [How to set up a custom Mapbox basemap style with React Leaflet and Leaflet Gatsby Starter](https://www.colbyfayock.com/2020/04/how-to-set-up-a-custom-mapbox-basemap-style-with-react-leaflet-and-leaflet-gatsby-starter) (colbyfayock.com) 40 | * [Mapping with React Leaflet](https://egghead.io/playlists/mapping-with-react-leaflet-e0e0?af=atzgap) (egghead.io) 41 | 42 | ## Musical Instrument 43 | 44 | ### Toolbox 45 | * [React HotKeys](https://github.com/greena13/react-hotkeys) (github.com) 46 | 47 | ### Tutorials 48 | * [Building a Piano with React Hooks](https://dev.to/ganeshmani/building-a-piano-with-react-hooks-3mih) (dev.to) 49 | * [How to Build a Piano Keyboard Using Vanilla JavaScript](https://www.freecodecamp.org/news/javascript-piano-keyboard/) (freecodecamp.org) 50 | * [Building a piano with tone.js!](https://dev.to/shimphillip/building-a-piano-with-tone-js-5c2f) (dev.to) 51 | * [How I Made a Piano in only 1kb of JavaScript](https://frankforce.com/?p=7617#pianostory) (frankforce.com) 52 | 53 | ### Inspiration 54 | * [React Guitar](https://react-guitar.com/) (react-guitar.com) 55 | 56 | 57 | ## Community Chat Bot 58 | 59 | ### Toolbox 60 | * [Discord Developer Portal](https://discord.com/developers) 61 | 62 | ### Tutorials 63 | * [Create a Discord bot under 15 minutes](https://thomlom.dev/create-a-discord-bot-under-15-minutes/) (thomlom.dev) 64 | * [Building and deploying a Discord bot with Docker, Digital Ocean, and discord.js](https://www.christopherbiscardi.com/building-and-deploying-a-discord-bot-with-docker-digital-ocean-and-discord-js) (christopherbiscardi.com) 65 | 66 | --- 67 | 68 | ## Know of any other good resources? 69 | If you know of a great tutorial or another tool that can help others, open a pull request with a link! 70 | -------------------------------------------------------------------------------- /Clones/README.md: -------------------------------------------------------------------------------- 1 | # Clones 2 | 3 | ## Twitter 4 | 5 | ### Toolbox 6 | 7 | * [Firebase](https://firebase.google.com/) (firebase.google.com) 8 | 9 | ### Resources 10 | * [Rethinking Twitter as a Serverless App](https://css-tricks.com/rethinking-twitter-as-a-serverless-app/) (css-tricks.com) 11 | * [Full Stack React & Firebase Tutorial - Build a social media app](https://www.youtube.com/watch?v=m_u6P5k0vP0) (youtube.com) 12 | 13 | ### Inspiration 14 | * [Twitter](https://www.twitter.com) (twitter.com) 15 | * [react-twitter-clone](https://github.com/jalbertsr/react-twitter-clone) (github.com) 16 | 17 | ## Winamp 18 | 19 | ### Toolbox 20 | * [Spotify API](https://developer.spotify.com/documentation/web-api/) (developer.spotify.com) 21 | 22 | ### Tutorials 23 | * [Pulling data from the Spotify API](https://www.youtube.com/watch?v=rzk8n-4gMWs) (youtube.com) 24 | * [Understanding OAuth with the Spotify API ](https://www.youtube.com/watch?v=f5OLDvwP-Ug) (youtube.com) 25 | 26 | ### Inspiration 27 | * [Webamp](https://webamp.org/) (webamp.org) 28 | 29 | ## StackOverflow 30 | 31 | ### Toolbox 32 | * [Dgraph](https://dgraph.io/) (dgraph.io) 33 | 34 | ### Tutorials 35 | * [Building a Stack Overflow Clone with Dgraph, and React](https://dgraph.io/blog/post/building-graphoverflow/) (dgraph.io) 36 | 37 | ### Inspiration 38 | * [Talkyard](https://github.com/debiki/talkyard) (github.com) 39 | 40 | ## Product Hunt 41 | 42 | ### Toolbox 43 | * [Hasura](https://hasura.io/) (hasura.io) 44 | 45 | ### Tutorials 46 | * [Building a Product Hunt clone app using Hasura and Next.js](https://blog.logrocket.com/building-a-product-hunt-clone-app-using-hasura-and-next-js/) (logrocket.com) 47 | * [How to build a basic version of Product Hunt using React](https://www.freecodecamp.org/news/how-to-build-a-basic-version-of-product-hunt-using-react-f87d016fedae/) (freecodecamp.org) 48 | 49 | ### Inspiration 50 | Know of any good examples? Submit a Pull Request! 51 | 52 | ## Zelda UI 53 | 54 | ### Toolbox 55 | * [React HotKeys](https://github.com/greena13/react-hotkeys) (github.com) 56 | 57 | ### Tutorials 58 | * [How to replicate the Zelda BOTW interface with React, Tailwind and Framer-motion](https://dev.to/flagrede/how-to-replicate-the-zelda-botw-interface-with-react-tailwind-and-framer-motion-part-1-298g) (dev.to) 59 | 60 | ### Inspiration 61 | * [Interface In Game -The Legend of Zelda: Breath of the Wild](https://interfaceingame.com/games/the-legend-of-zelda-breath-of-the-wild/) (interfaceingame.com) 62 | 63 | ## Tesla Touchscreen 64 | 65 | ### Toolbox 66 | * [react-tabs](https://github.com/reactjs/react-tabs) (github.com) 67 | * [Spotify API](https://developer.spotify.com/documentation/web-api/) (developer.spotify.com) 68 | * [Leaflet](https://leafletjs.com/) (leafletjs.com) 69 | * [React Leaflet](https://react-leaflet.js.org/) (react-leaflet.js.org) 70 | 71 | ### Tutorials 72 | * [Mapping with React Leaflet](https://egghead.io/playlists/mapping-with-react-leaflet-e0e0?af=atzgap) (egghead.io) 73 | * [How to Build A Spotify Player with React in 15 Minutes](https://www.joekarlsson.com/2019/04/how-to-build-a-spotify-player-with-react-in-15-minutes/) (joekarlsson.com) 74 | 75 | ### Inspiration 76 | * [You can play with Tesla Model 3’s UI with this interactive mockup](https://electrek.co/2017/08/02/you-can-play-with-tesla-model-3s-ui-with-this-interactive-mockup/) (electrek.co) 77 | 78 | --- 79 | 80 | ## Know of any other good resources? 81 | If you know of a great tutorial or another tool that can help others, open a pull request with a link! 82 | -------------------------------------------------------------------------------- /Tools & Libraries/README.md: -------------------------------------------------------------------------------- 1 | # Tools & Libraries 2 | 3 | ## Component Library 4 | 5 | ### Toolbox 6 | * [Storybook.js](https://storybook.js.org/) (storybook.js.org) 7 | * [StoryShots](https://github.com/storybookjs/storybook/tree/master/addons/storyshots/storyshots-core) (github.com) 8 | 9 | ### Tutorials 10 | * [What is Storybook and How Can I Use It to Create a Component Library in React?](https://www.freecodecamp.org/news/what-is-storybook-and-how-can-i-use-it-to-create-a-component-libary-in-react/) (freecodecamp.org) 11 | 12 | ## Custom React Hook 13 | 14 | ### Toolbox 15 | * [React Hooks](https://reactjs.org/docs/hooks-reference.html) (reactjs.org) 16 | * [The Lord of the Rings API](https://the-one-api.herokuapp.com/documentation) (the-one-api.herokuapp.com) 17 | * [useCustomHook](https://github.com/colbyfayock/use-custom-hook) (github.com) 18 | 19 | ### Tutorials 20 | * [How to Create a Custom React Hook and Publish it to npm](https://www.freecodecamp.org/news/how-to-create-a-custom-react-hook-and-publish-it-to-npm/) (freecodecamp.org) 21 | * [Destructuring the Fundamentals of React Hooks](https://www.colbyfayock.com/2019/04/destructuring-the-fundamentals-of-react-hooks) (colbyfayock.com) 22 | 23 | ## Framework Theme 24 | 25 | ### Toolbox 26 | * [Gatsby Themes](https://www.gatsbyjs.org/docs/themes/) (gatsbyjs.org) 27 | * [Tailwind](https://tailwindcss.com/) (tailwindcss.com) 28 | 29 | ### Tutorials 30 | * [Building a Theme](https://www.gatsbyjs.org/tutorial/building-a-theme/) (gatsbyjs.org) 31 | * [What is Tailwind CSS and How Can I Add it to my Website or React App?](https://www.freecodecamp.org/news/what-is-tailwind-css-and-how-can-i-add-it-to-my-website-or-react-app/) (freecodecamp.org) 32 | 33 | ### Inspiration 34 | * [Gatsby Tailwind Theme](https://github.com/talensjr/gatsby-theme-tailwindcss) (github.com) 35 | 36 | ## CSS Animation Library 37 | 38 | ### Toolbox 39 | * [Sass](https://sass-lang.com/) (sass-lang.com) 40 | 41 | ### Tutorials 42 | * [How to Use Pure CSS to Create a Beautiful Loading Animation for your App](https://www.freecodecamp.org/news/how-to-use-css-to-create-a-beautiful-loading-animation-for-your-app/) (freecodecamp.org) 43 | 44 | ### Inspiration 45 | * [Animate.css](https://animate.style/) (animate.style) 46 | * [Pure CSS Loaders](https://loading.io/css/) (loading.io) 47 | 48 | ## Custom GitHub Action 49 | 50 | ### Toolbox 51 | 52 | * [Slack API](https://api.slack.com/) (api.slack.com) 53 | * [ncc](https://github.com/vercel/ncc) (github.com) 54 | 55 | ### Tutorials 56 | * [What are Github Actions and How Can You Automate Tests and Slack Notifications?](https://www.freecodecamp.org/news/what-are-github-actions-and-how-can-you-automate-tests-and-slack-notifications/) (freecodecamp.org) 57 | * [Create a New Github Action to Automate Code Tasks with Javascript](https://egghead.io/playlists/create-a-new-github-action-to-automate-code-tasks-with-javascript-f1e9?af=atzgap) (egghead.io) 58 | 59 | ### Inspiration 60 | Know of any good examples? Submit a Pull Request! 61 | 62 | ## Framework Starter 63 | 64 | ### Toolbox 65 | * [Next.js](https://nextjs.org/) (nextjs.org) 66 | * [MDX](https://mdxjs.com/) (mdxjs.com) 67 | 68 | ### Tutorials 69 | * [Building a Blog with Next.js](https://css-tricks.com/building-a-blog-with-next-js/) (css-tricks.com) 70 | * [MDX: Next.js](https://mdxjs.com/getting-started/next) (mdxjs.com) 71 | 72 | ### Inspiration 73 | * [Next + MDX Digital Garden Starter](https://github.com/RyanWarner/next-mdx-digital-garden-starter/) (github.com) 74 | 75 | --- 76 | 77 | ## Know of any other good resources? 78 | If you know of a great tutorial or another tool that can help others, open a pull request with a link! 79 | -------------------------------------------------------------------------------- /CODE_OF_CONDUCT.md: -------------------------------------------------------------------------------- 1 | # Contributor Covenant Code of Conduct 2 | 3 | ## Our Pledge 4 | 5 | In the interest of fostering an open and welcoming environment, we as 6 | contributors and maintainers pledge to making participation in our project and 7 | our community a harassment-free experience for everyone, regardless of age, body 8 | size, disability, ethnicity, sex characteristics, gender identity and expression, 9 | level of experience, education, socio-economic status, nationality, personal 10 | appearance, race, religion, or sexual identity and orientation. 11 | 12 | ## Our Standards 13 | 14 | Examples of behavior that contributes to creating a positive environment 15 | include: 16 | 17 | * Using welcoming and inclusive language 18 | * Being respectful of differing viewpoints and experiences 19 | * Gracefully accepting constructive criticism 20 | * Focusing on what is best for the community 21 | * Showing empathy towards other community members 22 | 23 | Examples of unacceptable behavior by participants include: 24 | 25 | * The use of sexualized language or imagery and unwelcome sexual attention or 26 | advances 27 | * Trolling, insulting/derogatory comments, and personal or political attacks 28 | * Public or private harassment 29 | * Publishing others' private information, such as a physical or electronic 30 | address, without explicit permission 31 | * Other conduct which could reasonably be considered inappropriate in a 32 | professional setting 33 | 34 | ## Our Responsibilities 35 | 36 | Project maintainers are responsible for clarifying the standards of acceptable 37 | behavior and are expected to take appropriate and fair corrective action in 38 | response to any instances of unacceptable behavior. 39 | 40 | Project maintainers have the right and responsibility to remove, edit, or 41 | reject comments, commits, code, wiki edits, issues, and other contributions 42 | that are not aligned to this Code of Conduct, or to ban temporarily or 43 | permanently any contributor for other behaviors that they deem inappropriate, 44 | threatening, offensive, or harmful. 45 | 46 | ## Scope 47 | 48 | This Code of Conduct applies both within project spaces and in public spaces 49 | when an individual is representing the project or its community. Examples of 50 | representing a project or community include using an official project e-mail 51 | address, posting via an official social media account, or acting as an appointed 52 | representative at an online or offline event. Representation of a project may be 53 | further defined and clarified by project maintainers. 54 | 55 | ## Enforcement 56 | 57 | Instances of abusive, harassing, or otherwise unacceptable behavior may be 58 | reported by contacting the project team at conduct@colbyfayock.com. All 59 | complaints will be reviewed and investigated and will result in a response that 60 | is deemed necessary and appropriate to the circumstances. The project team is 61 | obligated to maintain confidentiality with regard to the reporter of an incident. 62 | Further details of specific enforcement policies may be posted separately. 63 | 64 | Project maintainers who do not follow or enforce the Code of Conduct in good 65 | faith may face temporary or permanent repercussions as determined by other 66 | members of the project's leadership. 67 | 68 | ## Attribution 69 | 70 | This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4, 71 | available at https://www.contributor-covenant.org/version/1/4/code-of-conduct.html 72 | 73 | [homepage]: https://www.contributor-covenant.org 74 | 75 | For answers to common questions about this code of conduct, see 76 | https://www.contributor-covenant.org/faq 77 | -------------------------------------------------------------------------------- /Project Add-Ons/README.md: -------------------------------------------------------------------------------- 1 | # Project Add-Ons 2 | 3 | ## Search 4 | 5 | ### Toolbox 6 | * [Fuse.js](https://fusejs.io/) 7 | 8 | ### Tutorials 9 | * [How to Add Search to a React App with Fuse.js](https://www.freecodecamp.org/news/how-to-add-search-to-a-react-app-with-fuse-js/) (freecodecamp.org) 10 | 11 | ### Inspiration 12 | Know of any good examples? Submit a Pull Request! 13 | 14 | ## Dark Mode 15 | 16 | ### Toolbox 17 | * [localStorage](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage) (developer.mozilla.org) 18 | 19 | ### Tutorials 20 | * [The Quest for the Perfect Dark Mode](https://joshwcomeau.com/gatsby/dark-mode/) (joshwcomeau.com) 21 | 22 | ### Inspiration 23 | * [Josh W. Comeau](https://joshwcomeau.com/) (joshwcomeau.com) 24 | 25 | ## Webmentions 26 | 27 | ### Toolbox 28 | * [Webmention.io](https://webmention.io/) (webmention.io) 29 | * [Bridgy](https://brid.gy/) (brid.gy) 30 | * [Gatsby Plugin Webmention](https://github.com/ChristopherBiscardi/gatsby-plugin-webmention) (github.com) 31 | 32 | ### Tutorials 33 | * [Indieweb pt2: Using Webmentions in Eleventy](https://mxb.dev/blog/using-webmentions-on-static-sites/) (mxb.dev) 34 | * [Clientside Webmentions](https://www.swyx.io/writing/clientside-webmentions/) (swyx.io) 35 | * [Getting started with Webmentions in Gatsby](https://www.knutmelvaer.no/blog/2019/06/getting-started-with-webmentions-in-gatsby/) (knutmelvaer.no) 36 | * [Building Gatsby Plugin Webmentions](https://www.christopherbiscardi.com/post/building-gatsby-plugin-webmentions) (christopherbiscardi.com) 37 | 38 | ### Inspiration 39 | * [Knut Melvær](https://www.knutmelvaer.no/blog/) (knutmelvaer.no) 40 | * [Swyx](https://swyx.io) (swyx.io) 41 | 42 | ## Analytics 43 | 44 | ### Toolbox 45 | * [Google Analytics](https://marketingplatform.google.com/about/analytics/) (marketingplatform.google.com) 46 | * [Custom Dimensions (GA)](https://support.google.com/analytics/answer/2709828?hl=en) (support.google.com) 47 | * [Filters (GA)](https://support.google.com/analytics/answer/1033162?hl=en) (support.google.com) 48 | 49 | ### Tutorials 50 | * [How to Make Sense of Google Analytics and the Traffic to Your Website](https://www.colbyfayock.com/2019/09/making-sense-of-google-analytics-and-the-traffic-to-your-website) (colbyfayock.com 51 | * [The 8 Most Important Google Analytics Filters](https://www.lovesdata.com/blog/google-analytics-filters) (lovesdata.com) 52 | 53 | ## Code Stats 54 | 55 | ### Toolbox 56 | * [Github REST API](https://docs.github.com/en/rest) (docs.github.com) 57 | * [Github GraphQL API](https://docs.github.com/en/graphql) (docs.github.com) 58 | * [Postman](https://www.postman.com/) (postman.com) 59 | 60 | ### Tutorials 61 | * [Github API - retrieve user commits?](https://stackoverflow.com/questions/21869795/github-api-retrieve-user-commits) (stackoverflow.com) 62 | * [How to Test and Play with Web APIs the Easy Way with Postman](https://www.freecodecamp.org/news/how-to-test-and-play-with-web-apis-the-easy-way-with-postman/) (freecodecamp.org) 63 | 64 | ### Inspiration 65 | Know of any good examples? Submit a Pull Request! 66 | 67 | ## Highlight & Share 68 | 69 | ### Toolbox 70 | * [Window.getSelection](https://developer.mozilla.org/en-US/docs/Web/API/Window/getSelection) (developer.mozilla.org) 71 | * [Cloudinary](https://cloudinary.com/) (cloudinary.com) 72 | 73 | ### Tutorials 74 | * [Tweetable Selections](https://www.christopherbiscardi.com/tweetable-selections) (christopherbiscardi.com) 75 | 76 | ### Inspiration 77 | * [Chris Biscardi](https://www.christopherbiscardi.com) (christopherbiscardi.com) 78 | * [react-highlight-pop](https://github.com/codeshifu/react-highlight-pop) (github.com) 79 | 80 | --- 81 | 82 | ## Know of any other good resources? 83 | If you know of a great tutorial or another tool that can help others, open a pull request with a link! 84 | -------------------------------------------------------------------------------- /Productivity/README.md: -------------------------------------------------------------------------------- 1 | # Productivity 2 | 3 | ## Flash Cards 4 | 5 | ### Toolbox 6 | * [Firebase](https://firebase.google.com/) (firebase.google.com) 7 | 8 | ### Tutorials 9 | * [React Firebase Flashcards App Tutorial](https://www.youtube.com/watch?v=pKCAtlsn1Eo) (youtube.com) 10 | 11 | ### Inspiration 12 | * [Pure CSS - Sticky-Stacked Cards](https://codepen.io/enbee81/full/MWKxrvP) (codepen.io) 13 | * [@dolearning and @colbyfayock Stream with Next.js and Tailwind](https://www.youtube.com/watch?v=5yIBAeGphTw) (youtube.com) 14 | * [Flash Cards using Next.js Starter Tailwind](https://github.com/doingandlearning/flash-cards) (github.com) 15 | 16 | ## Mood Board 17 | 18 | ### Toolbox 19 | * [Cloudinary](https://cloudinary.com/) (cloudinary.com) 20 | * [use-cloudinary](https://github.com/domitriusclark/use-cloudinary#readme) (github.com) 21 | 22 | ### Tutorials 23 | * [Leveraging React for Easy Image Management with Cloudinary](https://scotch.io/tutorials/leveraging-react-for-easy-image-management-with-cloudinary) (scotch.io) 24 | 25 | ### Inspiration 26 | * [How to create mood boards that inspire: 20 pro tips](https://www.creativebloq.com/graphic-design/mood-boards-812470) (creativebloq.com) 27 | 28 | ## Bookmark Manager 29 | 30 | ### Toolbox 31 | * [FaunaDB](https://fauna.com/) (fauna.com) 32 | * [useFauna](https://github.com/ryancharris/use-fauna) (github.com) 33 | 34 | ### Tutorials 35 | * [Build a dynamic JAMstack app with GatsbyJS and FaunaDB](https://css-tricks.com/build-a-dynamic-jamstack-app-with-gatsbyjs-and-faunadb/) (css-tricks.com) 36 | * [Use bookmarklets to quickly perform common web page tasks](https://support.mozilla.org/en-US/kb/bookmarklets-perform-common-web-page-tasks) (support.mozilla.org) 37 | 38 | ### Inspiration 39 | Know of any good examples? Submit a Pull Request! 40 | 41 | ## Budget Manager 42 | 43 | ### Toolbox 44 | * [Google Sheets API](https://developers.google.com/sheets/api) (developers.google.com) 45 | * [sheet2api](https://sheet2api.com/) (sheet2api.com) 46 | 47 | ### Tutorials 48 | * [Build an Expense Tracker | React Hooks & Context API](https://www.youtube.com/watch?v=XuFDcZABiDQ) (youtube.com) 49 | * [The complete guide on how to use Google sheets as a database](https://codingislove.com/google-sheets-database/) (codingislove.com) 50 | 51 | ### Inspiration 52 | Know of any good examples? Submit a Pull Request! 53 | 54 | ## Habit Reminder 55 | 56 | ### Toolbox 57 | * [TypeORM](https://typeorm.io/) (typeorm.io) 58 | 59 | ### Tutorials 60 | * [Build a Health Tracking App with React, GraphQL, and User Authentication](https://scotch.io/tutorials/build-a-health-tracking-app-with-react-graphql-and-user-authentication) (scotch.io) 61 | 62 | ### Inspiration 63 | Know of any good examples? Submit a Pull Request! 64 | 65 | ## Shopping List 66 | 67 | ### Toolbox 68 | * [Firebase](https://firebase.google.com/) (firebase.google.com) 69 | 70 | ### Tutorials 71 | * [Beginning our React todo list](https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_todo_list_beginning) 72 | * [How to Build a TodoApp using ReactJS and Firebase](https://www.freecodecamp.org/news/how-to-build-a-todo-application-using-reactjs-and-firebase/) 73 | 74 | ### Inspiration 75 | Know of any good examples? Submit a Pull Request! 76 | 77 | ## Notebook 78 | 79 | ### Toolbox 80 | * [Gatsby Brain Theme](https://github.com/aengusmcmillin/gatsby-theme-brain) (github.com) 81 | * [Fuse.js](https://fusejs.io/) (fusejs.io) 82 | 83 | ### Tutorials 84 | * [How to Add Search to a React App with Fuse.js](https://www.freecodecamp.org/news/how-to-add-search-to-a-react-app-with-fuse-js/) (freecodecamp.org) 85 | 86 | ### Inspiration 87 | * [Foam](https://foambubble.github.io/foam/) (foambubble.github.io) 88 | * [Roam Research](https://roamresearch.com/) (roamresearch.com) 89 | * [Gatsby Garden Theme](https://github.com/mathieudutour/gatsby-digital-garden) (github.com) 90 | 91 | --- 92 | 93 | ## Know of any other good resources? 94 | If you know of a great tutorial or another tool that can help others, open a pull request with a link! 95 | -------------------------------------------------------------------------------- /Business & Real-World/README.md: -------------------------------------------------------------------------------- 1 | # Business & Real-World 2 | 3 | ## Marketing Website 4 | 5 | ### Toolbox 6 | * [Unsplash](https://unsplash.com/) (unsplash.com) 7 | * [Pexel](https://www.pexels.com/) (pexels.com) 8 | * [Gatsby](https://www.gatsbyjs.org/) (gatsbyjs.org) 9 | * [TakeShape](https://www.takeshape.io/) (takeshape.io) 10 | 11 | ### Tutorials 12 | * [Quickly Create a New Company Website Managed by a CMS with TakeShape and Gatsby](https://egghead.io/playlists/quickly-create-a-new-company-website-managed-by-a-cms-with-takeshape-and-gatsby-4e4d?af=atzgap) (egghead.io) 13 | * [Create your startup’s website on the Jamstack with Gatsby.js, TakeShape, and Netlify](https://www.takeshape.io/articles/create-your-startups-website-on-the-jamstack-with-gatsby-js-takeshape-and-netlify/) (takeshape.io) 14 | 15 | ## Conference Schedule 16 | 17 | ### Toolbox 18 | * [faker.js](https://github.com/Marak/Faker.js) (github.com) 19 | 20 | ### Tutorials 21 | 22 | ## Ecommerce Store 23 | 24 | ### Toolbox 25 | * [Stripe](https://stripe.com/) (stripe.com) 26 | * [use-shopping-cart](https://useshoppingcart.com/) (useshoppingcart.com) 27 | 28 | ### Tutorials 29 | * [Learn How to Accept Money on Jamstack Sites in 38 Minutes](https://www.netlify.com/blog/2020/04/13/learn-how-to-accept-money-on-jamstack-sites-in-38-minutes/) (netlify.com) 30 | * [E-Commerce for React Developers [w/ Gatsby Tutorial]](https://snipcart.com/blog/react-ecommerce-gatsby-tutorial) (snipcart.com) 31 | * [Learn to Add Apple Pay and Google Pay to React Websites](https://www.netlify.com/blog/2020/05/21/learn-to-add-apple-pay-and-google-pay-to-react-websites/) (netlify.com) 32 | * [How to make an online store in one day using AWS, React, and Stripe](https://www.freecodecamp.org/news/how-to-make-a-store-in-one-day-aws-react-stripe/) (freecodecamp.org) 33 | 34 | ## Website Admin 35 | 36 | ### Toolbox 37 | * [Auth0](https://auth0.com/) (auth0.com) 38 | * [Auth0 React SDK](https://auth0.com/docs/libraries/auth0-react) (auth0.com) 39 | 40 | ### Tutorials 41 | * [Authenticating Your First React App](https://auth0.com/blog/authenticating-your-first-react-app/) (auth0.com) 42 | * [Authentication in React Applications](https://kentcdodds.com/blog/authentication-in-react-applications) (kentcdodds.com) 43 | 44 | ## Metrics Dashboard 45 | 46 | ### Toolbox 47 | * [Chart.js](https://www.chartjs.org/) (chartjs.org) 48 | * [react-chartjs-2](https://github.com/jerairrest/react-chartjs-2) (github.com) 49 | * [Marketstack](https://marketstack.com/) (marketstack.com) 50 | 51 | ### Tutorials 52 | * [Creating a dashboard with React and Chart.js](https://www.createwithdata.com/react-chartjs-dashboard/) (createwithdata.com) 53 | 54 | ## Survey Creator & Manager 55 | 56 | ### Toolbox 57 | * [Formik](https://formik.org/) (formik.org) 58 | 59 | ### Tutorials 60 | * [React Forms](https://reactjs.org/docs/forms.html) (reactjs.org) 61 | * [Formik Docs Tutorial](https://formik.org/docs/tutorial) (formik.org) 62 | 63 | ## Map Statistics Dashboard 64 | 65 | ### Toolbox 66 | * [Open Disease Data API](https://disease.sh/) (disease.sh) 67 | * [React Leaflet](https://react-leaflet.js.org/) (react-leaflet.js.org) 68 | * [Gatsby Leaflet Starter](https://github.com/colbyfayock/gatsby-starter-leaflet) (github.com) 69 | 70 | ### Tutorials 71 | * [How to create a Coronavirus (COVID-19) Dashboard & Map App in React with Gatsby and Leaflet](https://www.freecodecamp.org/news/how-to-create-a-coronavirus-covid-19-dashboard-map-app-in-react-with-gatsby-and-leaflet/) (freecodecamp.org) 72 | * [How to add Coronavirus (COVID-19) case statistics to your React map dashboard with Gatsby](https://www.freecodecamp.org/news/how-to-add-coronavirus-covid-19-case-statistics-to-your-map-dashboard-in-gatsby-and-react-leaflet/) (freecodecamp.org) 73 | * [Mapping with React Leaflet](https://egghead.io/playlists/mapping-with-react-leaflet-e0e0?af=atzgap) (egghead.io) 74 | 75 | ### Inspiration 76 | * [COVID-19 Dashboard by the Center for Systems Science and Engineering (CSSE) at Johns Hopkins University (JHU)](https://coronavirus.jhu.edu/map.html) (coronavirus.jhu.ed) 77 | * [Coronavirus (COVID-19) Dashboard Demo](https://coronavirus-map-dashboard.netlify.app/) (coronavirus-map-dashboard.netlify.app) 78 | 79 | --- 80 | 81 | ## Know of any other good resources? 82 | If you know of a great tutorial or another tool that can help others, open a pull request with a link! 83 | --------------------------------------------------------------------------------