Tools & Libraries

Tools & Libraries

Component Library

Toolbox

• Storybook.js (storybook.js.org)
• StoryShots (github.com)

Tutorials

• What is Storybook and How Can I Use It to Create a Component Library in React? (freecodecamp.org)

Custom React Hook

Toolbox

• React Hooks (reactjs.org)
• The Lord of the Rings API (the-one-api.herokuapp.com)
• useCustomHook (github.com)

Tutorials

• How to Create a Custom React Hook and Publish it to npm (freecodecamp.org)
• Destructuring the Fundamentals of React Hooks (colbyfayock.com)

Framework Theme

Toolbox

• Gatsby Themes (gatsbyjs.org)
• Tailwind (tailwindcss.com)

Tutorials

• Building a Theme (gatsbyjs.org)
• What is Tailwind CSS and How Can I Add it to my Website or React App? (freecodecamp.org)

Inspiration

• Gatsby Tailwind Theme (github.com)

CSS Animation Library

Toolbox

• Sass (sass-lang.com)

Tutorials

• How to Use Pure CSS to Create a Beautiful Loading Animation for your App (freecodecamp.org)

Inspiration

• Animate.css (animate.style)
• Pure CSS Loaders (loading.io)

Custom GitHub Action

Toolbox

• Slack API (api.slack.com)
• ncc (github.com)

Tutorials

• What are Github Actions and How Can You Automate Tests and Slack Notifications? (freecodecamp.org)
• Create a New Github Action to Automate Code Tasks with Javascript (egghead.io)

Inspiration

Know of any good examples? Submit a Pull Request!

Framework Starter

Toolbox

• Next.js (nextjs.org)
• MDX (mdxjs.com)

Tutorials

• Building a Blog with Next.js (css-tricks.com)
• MDX: Next.js (mdxjs.com)
• Use MDX in Next.js to Dynamically Create Pages for a Blog (youtube.com)
• Next.js with Headless WordPress - GraphQL Queries with WPGraphQL & Deploy to Netlify (youtube.com)

Inspiration

• Next + MDX Digital Garden Starter (github.com)
• Next Wordpress Starter (github.com)

---

Know of any other good resources?

If you know of a great tutorial or another tool that can help others, open a pull request with a link!