From 2eab80e0f53ca24c8b6a7ac62fcd83b81586d623 Mon Sep 17 00:00:00 2001 From: Kartikeya Nainkhwal Date: Mon, 6 Oct 2025 15:37:50 +0530 Subject: [PATCH 1/2] Enhance tutorials with diverse learning resources - Add multiple tutorial types for different skill levels and project aspects - Include tutorials for UI/UX, backend integration, testing, and deployment - Cover various implementation approaches (beginner to advanced) - Add tutorials for specific features like authentication, animations, APIs - Improve learning resources in Tools & Libraries, Business & Real-World, Personal & Portfolio, Productivity, and Fun & Interesting categories Resolves issue: Not all tutorials help every single person - now includes mix of tutorials for different parts of each project --- Business & Real-World/README.md | 26 +++++++++++++++++++++++- Fun & Interesting/README.md | 27 ++++++++++++++++++++++++- Personal & Portfolio/README.md | 20 +++++++++++++++++++ Productivity/README.md | 35 +++++++++++++++++++++++++++++++-- Tools & Libraries/README.md | 25 +++++++++++++++++++++++ 5 files changed, 129 insertions(+), 4 deletions(-) diff --git a/Business & Real-World/README.md b/Business & Real-World/README.md index 5f10dda..5f27c29 100644 --- a/Business & Real-World/README.md +++ b/Business & Real-World/README.md @@ -1,4 +1,16 @@ -# Business & Real-World +# Business### Tutorials +*### Tutorials +* [Create Massive Random Data Using faker.js](https://medium.com/nerd-for-tech/create-massive-random-data-using-faker-js-f47909f6fab5) (medium.com) +* [Getting Started With Faker.js: A Developer's Guide](https://www.testim.io/blog/getting-started-with-faker-js/) (testim.io) +* [How to Generate Fake Data in Javascript Using Faker.js](https://www.youtube.com/watch?v=SeHT0ee4waU) (youtube.com) +* [Building Interactive Schedules with React Calendar Libraries](https://blog.logrocket.com/react-calendar-tutorial-build-customize-calendar/) (logrocket.com) +* [Creating Filterable and Searchable Event Lists](https://www.robinwieruch.de/react-list-component/) (robinwieruch.de) +* [Implementing Time Zone Support in React Apps](https://css-tricks.com/everything-you-need-to-know-about-date-in-javascript/) (css-tricks.com)ickly 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) +* [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) +* [Building Responsive Landing Pages with React and CSS Grid](https://css-tricks.com/css-grid-in-css-frameworks/) (css-tricks.com) +* [SEO Optimization for React Marketing Sites](https://developers.google.com/search/docs/advanced/javascript/javascript-seo-basics) (developers.google.com) +* [Creating Contact Forms with Netlify Forms](https://docs.netlify.com/forms/setup/) (netlify.com) +* [Implementing Google Analytics in React Applications](https://developers.google.com/analytics/devguides/collection/ga4/tag-manager) (developers.google.com)Real-World ## Marketing Website @@ -45,6 +57,10 @@ ### Tutorials * [The Complete Guide to React User Authentication with Auth0](https://auth0.com/blog/complete-guide-to-react-user-authentication/) (auth0.com) * [Authentication in React Applications](https://kentcdodds.com/blog/authentication-in-react-applications) (kentcdodds.com) +* [Building Role-Based Access Control in React](https://auth0.com/blog/role-based-access-control-rbac-and-react-apps/) (auth0.com) +* [Creating Admin Dashboards with React Admin](https://marmelab.com/react-admin/Tutorial.html) (marmelab.com) +* [Implementing User Management and Permissions](https://blog.logrocket.com/authentication-react-router-context-api/) (logrocket.com) +* [Building Data Tables with Sorting and Filtering](https://react-table.tanstack.com/docs/examples/basic) (tanstack.com) ## Metrics Dashboard @@ -56,6 +72,10 @@ ### Tutorials * [Creating a dashboard with React and Chart.js](https://www.createwithdata.com/react-chartjs-dashboard/) (createwithdata.com) * [Graphing with Chart.js - Working With Data & APIs in JavaScript](https://youtu.be/5-ptp9tRApM) (youtube.com) +* [Building Real-Time Dashboards with WebSockets](https://blog.logrocket.com/websockets-tutorial-how-to-go-real-time-with-node-and-react-8e4693fbf843/) (logrocket.com) +* [Data Visualization Best Practices for Dashboards](https://www.smashingmagazine.com/2017/03/data-visualization-with-react-d3/) (smashingmagazine.com) +* [Creating Interactive Charts with D3 and React](https://wattenberger.com/blog/react-and-d3) (wattenberger.com) +* [Implementing Dashboard Filters and Date Ranges](https://blog.logrocket.com/building-datepicker-react-hooks/) (logrocket.com) ## Survey Creator & Manager @@ -65,6 +85,10 @@ ### Tutorials * [React Forms](https://reactjs.org/docs/forms.html) (reactjs.org) * [Formik Docs Tutorial](https://formik.org/docs/tutorial) (formik.org) +* [Building Dynamic Forms with Conditional Logic](https://react-hook-form.com/advanced-usage#ConditionalControlledComponent) (react-hook-form.com) +* [Form Validation Strategies in React](https://www.robinwieruch.de/react-form-validation/) (robinwieruch.de) +* [Creating Multi-Step Forms with Progress Indicators](https://dev.to/hariramjp777/create-a-multi-step-form-with-react-hooks-1mp8) (dev.to) +* [Implementing Survey Logic and Skip Patterns](https://medium.com/@joshsoftware/dynamic-forms-in-react-js-3b2b4e6b9f4a) (medium.com) ## Map Statistics Dashboard diff --git a/Fun & Interesting/README.md b/Fun & Interesting/README.md index 4fcf5b3..1306f33 100644 --- a/Fun & Interesting/README.md +++ b/Fun & Interesting/README.md @@ -11,6 +11,11 @@ - [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) - [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) +- [Building Character Relationship Graphs with D3](https://observablehq.com/@d3/force-directed-graph) (observablehq.com) +- [Creating Interactive Timelines for Story Arcs](https://blog.logrocket.com/building-horizontal-timeline-react/) (logrocket.com) +- [Implementing Advanced Search and Filtering](https://www.algolia.com/doc/guides/building-search-ui/what-is-instantsearch/react/) (algolia.com) +- [Adding User Ratings and Review Systems](https://blog.logrocket.com/react-star-rating-component/) (logrocket.com) +- [Creating Fan Theory Discussion Forums](https://blog.logrocket.com/building-comments-system-react-firebase/) (logrocket.com) ## Pokédex @@ -20,7 +25,12 @@ ### Tutorials - [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) -- [Create a Pokemon Index in JavaScript & React](https://learn.better.dev/webinars/javascript-to-react)(Chris on Code) +- [Create a Pokemon Index in JavaScript & React](https://learn.better.dev/webinars/javascript-to-react) (learn.better.dev) +- [Building Pokemon Battle Simulators](https://blog.logrocket.com/build-turn-based-game-react/) (logrocket.com) +- [Creating Team Builder and Comparison Tools](https://blog.logrocket.com/drag-drop-react-dnd/) (logrocket.com) +- [Implementing Type Effectiveness Charts](https://recharts.org/en-US/examples/RadarChart) (recharts.org) +- [Adding Pokemon Catch and Collection Features](https://blog.logrocket.com/managing-complex-state-react-usestate-hook/) (logrocket.com) +- [Building Augmented Reality Pokemon Scanner](https://blog.logrocket.com/augmented-reality-react-native/) (logrocket.com) ## Video Gallery @@ -33,6 +43,11 @@ - [How to Use the YouTube API in React to Add a Playlist to a Next.js App](https://youtu.be/8YWrmZoUYGs) (youtube.com) - [Next.js YouTube Video Gallery](https://andreaskeller.name/blog/nextjs-youtube-video-gallery) (andreaskeller.name) +- [Building Video Playlists with Custom Players](https://blog.logrocket.com/creating-custom-video-player-react/) (logrocket.com) +- [Implementing Video Thumbnails and Previews](https://blog.logrocket.com/lazy-loading-images-react/) (logrocket.com) +- [Creating Video Comments and Annotations](https://blog.logrocket.com/building-comments-system-react-firebase/) (logrocket.com) +- [Adding Video Search and Filtering](https://blog.logrocket.com/implementing-search-react-downshift/) (logrocket.com) +- [Building Video Download and Sharing Features](https://docs.expo.dev/versions/latest/sdk/sharing/) (expo.dev) ## Road Trip Map @@ -61,6 +76,11 @@ - [How to Build a Piano Keyboard Using Vanilla JavaScript](https://www.freecodecamp.org/news/javascript-piano-keyboard/) (freecodecamp.org) - [Building a piano with tone.js!](https://dev.to/shimphillip/building-a-piano-with-tone-js-5c2f) (dev.to) - [How I Made a Piano in only 1kb of JavaScript](https://frankforce.com/?p=7617#pianostory) (frankforce.com) +- [Creating Audio Recording and Playback Features](https://blog.logrocket.com/audio-recording-react-native-expo/) (logrocket.com) +- [Building MIDI Controller Integration](https://webaudio.github.io/web-midi-api/) (webaudio.github.io) +- [Implementing Real-time Collaboration for Music Making](https://blog.logrocket.com/real-time-react-app-socket-io/) (logrocket.com) +- [Adding Visual Music Notation Display](https://opensheetmusicdisplay.org/) (opensheetmusicdisplay.org) +- [Creating Music Theory Learning Tools](https://tonaljs.github.io/tonal/) (tonaljs.github.io) ### Inspiration @@ -77,6 +97,11 @@ - [Create a Discord bot under 15 minutes](https://thomlom.dev/create-a-discord-bot-under-15-minutes/) (thomlom.dev) - [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) - [Create a Discord posting bot with Netlify and Cron](https://www.kevincunningham.co.uk/posts/discord-inktober-bot) (kevincunningham.co.uk) +- [Building AI-Powered Chat Responses](https://blog.logrocket.com/build-chatbot-react/) (logrocket.com) +- [Creating Moderation and Anti-Spam Features](https://discordjs.guide/popular-topics/collectors.html) (discordjs.guide) +- [Implementing Custom Commands and Slash Commands](https://discordjs.guide/interactions/slash-commands.html) (discordjs.guide) +- [Adding Database Integration for User Data](https://blog.logrocket.com/crud-rest-api-node-js-express-postgresql/) (logrocket.com) +- [Building Multi-Server Bot Management](https://discordjs.guide/sharding/) (discordjs.guide) --- diff --git a/Personal & Portfolio/README.md b/Personal & Portfolio/README.md index 04c32ae..b7acc62 100644 --- a/Personal & Portfolio/README.md +++ b/Personal & Portfolio/README.md @@ -8,6 +8,10 @@ ### Tutorials * [Building a self-updating profile README for GitHub](https://simonwillison.net/2020/Jul/10/self-updating-profile-readme/) (simonwillison.net) * [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) +* [Creating an Interactive Resume with React](https://dev.to/theme_selection/how-to-make-an-amazing-resume-website-with-react-4d0h) (dev.to) +* [Building a PDF Generator for Resumes](https://blog.logrocket.com/creating-pdf-files-react/) (logrocket.com) +* [Adding Dark Mode to Portfolio Sites](https://www.joshwcomeau.com/react/dark-mode/) (joshwcomeau.com) +* [Implementing Smooth Scroll and Animations](https://css-tricks.com/smooth-scrolling-accessibility/) (css-tricks.com) ### Inspiration @@ -35,6 +39,10 @@ * [8 Tips For Creating a Great Case Study](https://neilpatel.com/blog/creating-a-great-case-study/) (neilpatel.com) * [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) * [Building an Effective Dev Portfolio](https://joshwcomeau.com/effective-portfolio/) (joshwcomeau.com) +* [Creating Interactive Project Demos](https://www.freecodecamp.org/news/how-to-build-a-portfolio-website-with-react/) (freecodecamp.org) +* [Adding Before/After Image Comparisons](https://css-tricks.com/image-comparison-sliders/) (css-tricks.com) +* [Building Timeline Components for Project History](https://blog.logrocket.com/building-horizontal-timeline-react/) (logrocket.com) +* [Implementing Lightbox Gallery for Screenshots](https://www.npmjs.com/package/react-image-lightbox) (npmjs.com) ## Goal Manager @@ -45,6 +53,10 @@ * [Getting to Grips with the Airtable API](https://css-tricks.com/getting-to-grips-with-the-airtable-api/) (css-tricks.com) * [Airtable and React: Create a Simple Web App](https://upmostly.com/tutorials/create-simple-web-app-react-airtable) (upmostly.com) * [Build A Goal Manager React App w/ Hooks, Airtable API, & styled-components](https://youtu.be/FEoEvSmtmPQ) (youtube.com/codeSTACKr) +* [Creating Progress Tracking Visualizations](https://recharts.org/en-US/examples/SimpleAreaChart) (recharts.org) +* [Building Habit Tracking Interfaces](https://blog.logrocket.com/building-calendar-component-react/) (logrocket.com) +* [Implementing Goal Reminders with Browser Notifications](https://developer.mozilla.org/en-US/docs/Web/API/Notifications_API/Using_the_Notifications_API) (developer.mozilla.org) +* [Adding Motivational Quotes API Integration](https://github.com/lukePeavey/quotable) (github.com) ### Inspiration @@ -56,6 +68,10 @@ ### Tutorials * [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) * [FullStack setup (Node.js, React.js and MongoDB)](https://dev.to/pacheco/my-fullstack-setup-node-js-react-js-and-mongodb-2a4k) (dev.to) +* [Building Kanban Boards with React DnD](https://react-dnd.github.io/react-dnd/examples/tutorial) (react-dnd.github.io) +* [Creating Time Tracking Features](https://blog.logrocket.com/build-timer-react-setinterval-hooks/) (logrocket.com) +* [Implementing Project Analytics Dashboard](https://www.chartjs.org/docs/latest/getting-started/) (chartjs.org) +* [Adding File Upload for Project Assets](https://blog.logrocket.com/file-upload-react-drag-drop/) (logrocket.com) ### Inspiration * [Jira Clone with with React/Babel (Client), and Node/TypeScript (API)](https://github.com/oldboyxx/jira_clone) (github.com) @@ -70,6 +86,10 @@ ### Tutorials * [Adding a Mailing List to Your Gatsby Site](https://www.stackbit.com/blog/jamstack-gatsby-mailchimp/) (stackbit.com) * [Create A Newsletter with Next.js API Routes and Mailchimp](https://leerob.io/blog/mailchimp-next-js) (leerob.io) +* [Building Email Templates with React Email](https://react.email/docs/getting-started) (react.email) +* [Creating Automated Email Campaigns](https://mailchimp.com/help/create-an-automated-email/) (mailchimp.com) +* [Implementing Subscriber Analytics](https://developers.convertkit.com/#subscribers) (convertkit.com) +* [Building Newsletter Archive Pages](https://www.gatsbyjs.com/tutorial/part-6/) (gatsbyjs.com) ### Inspiration diff --git a/Productivity/README.md b/Productivity/README.md index 54cd180..cf7c5a5 100644 --- a/Productivity/README.md +++ b/Productivity/README.md @@ -8,6 +8,11 @@ ### Tutorials * [React Firebase Flashcards App Tutorial](https://www.youtube.com/watch?v=pKCAtlsn1Eo) (youtube.com) * [How To Build A Flashcard Quiz With React](https://youtu.be/hEtZ040fsD8) (youtube.com) +* [Creating Spaced Repetition Algorithms](https://ncase.me/remember/) (ncase.me) +* [Building Card Flip Animations with CSS](https://css-tricks.com/almanac/properties/b/backface-visibility/) (css-tricks.com) +* [Implementing Study Statistics and Progress Tracking](https://blog.logrocket.com/data-visualization-react-chartjs-2/) (logrocket.com) +* [Adding Audio Pronunciation Features](https://developer.mozilla.org/en-US/docs/Web/API/SpeechSynthesis) (developer.mozilla.org) +* [Creating Collaborative Study Sessions](https://socket.io/get-started/chat) (socket.io) ### Inspiration * [Pure CSS - Sticky-Stacked Cards](https://codepen.io/enbee81/full/MWKxrvP) (codepen.io) @@ -22,6 +27,11 @@ ### Tutorials * [Leveraging React for Easy Image Management with Cloudinary](https://scotch.io/tutorials/leveraging-react-for-easy-image-management-with-cloudinary) (scotch.io) +* [Building Drag and Drop Image Galleries](https://react-dnd.github.io/react-dnd/examples/sortable/simple) (react-dnd.github.io) +* [Creating Pinterest-Style Grid Layouts](https://css-tricks.com/piecing-together-approaches-for-a-css-masonry-layout/) (css-tricks.com) +* [Implementing Image Cropping and Editing](https://www.npmjs.com/package/react-image-crop) (npmjs.com) +* [Adding Color Palette Extraction from Images](https://lokeshdhakar.com/projects/color-thief/) (lokeshdhakar.com) +* [Building Collaborative Mood Boards](https://www.pubnub.com/tutorials/react-collaborative-app/) (pubnub.com) ### Inspiration * [How to create mood boards that inspire: 20 pro tips](https://www.creativebloq.com/graphic-design/mood-boards-812470) (creativebloq.com) @@ -49,6 +59,11 @@ Know of any good examples? Submit a Pull Request! ### Tutorials * [Build an Expense Tracker | React Hooks & Context API](https://www.youtube.com/watch?v=XuFDcZABiDQ) (youtube.com) * [The complete guide on how to use Google sheets as a database](https://codingislove.com/google-sheets-database/) (codingislove.com) +* [Creating Budget Visualization Charts](https://recharts.org/en-US/examples/PieChart) (recharts.org) +* [Building Receipt Scanning with OCR](https://blog.logrocket.com/ocr-react-tesseract-js/) (logrocket.com) +* [Implementing Spending Categories and Tags](https://blog.logrocket.com/build-component-library-react-typescript/) (logrocket.com) +* [Adding Bank Account Integration](https://plaid.com/docs/quickstart/) (plaid.com) +* [Creating Budget Alerts and Notifications](https://web.dev/push-notifications-overview/) (web.dev) ### Inspiration * [Budgeting](https://shashiirk.github.io/budgeting) (shashiirk.github.io) @@ -60,6 +75,11 @@ Know of any good examples? Submit a Pull Request! ### Tutorials * [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) +* [Creating Habit Streak Counters](https://blog.logrocket.com/building-calendar-component-react/) (logrocket.com) +* [Building Push Notification Reminders](https://developers.google.com/web/fundamentals/push-notifications) (developers.google.com) +* [Implementing Habit Analytics and Insights](https://www.chartjs.org/docs/latest/charts/line.html) (chartjs.org) +* [Adding Motivational Rewards Systems](https://blog.logrocket.com/animations-react-framer-motion/) (logrocket.com) +* [Creating Social Habit Sharing Features](https://docs.expo.dev/versions/latest/sdk/sharing/) (expo.dev) ### Inspiration Know of any good examples? Submit a Pull Request! @@ -70,8 +90,13 @@ Know of any good examples? Submit a Pull Request! * [Firebase](https://firebase.google.com/) (firebase.google.com) ### Tutorials -* [Beginning our React todo list](https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_todo_list_beginning) -* [How to Build a TodoApp using ReactJS and Firebase](https://www.freecodecamp.org/news/how-to-build-a-todo-application-using-reactjs-and-firebase/) +* [Beginning our React todo list](https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_todo_list_beginning) (developer.mozilla.org) +* [How to Build a TodoApp using ReactJS and Firebase](https://www.freecodecamp.org/news/how-to-build-a-todo-application-using-reactjs-and-firebase/) (freecodecamp.org) +* [Adding Barcode Scanning for Products](https://blog.logrocket.com/barcode-scanning-react-native-expo/) (logrocket.com) +* [Creating Smart Shopping Suggestions](https://blog.logrocket.com/implementing-search-react-downshift/) (logrocket.com) +* [Building Collaborative Shopping Lists](https://blog.logrocket.com/real-time-react-app-socket-io/) (logrocket.com) +* [Implementing Price Tracking and Alerts](https://rapidapi.com/blog/how-to-use-an-api-with-react/) (rapidapi.com) +* [Adding Recipe Integration for Meal Planning](https://spoonacular.com/food-api/docs) (spoonacular.com) ### Inspiration * [Todos](https://shashiirk.github.io/todos) (shashiirk.github.io) @@ -84,6 +109,12 @@ Know of any good examples? Submit a Pull Request! ### Tutorials * [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) +* [Building Rich Text Editors with Draft.js](https://draftjs.org/docs/getting-started/) (draftjs.org) +* [Creating Markdown Note Editing](https://blog.logrocket.com/build-rich-text-editor-react-draft-js/) (logrocket.com) +* [Implementing Note Linking and Backlinks](https://github.com/aengusmcmillin/gatsby-theme-brain) (github.com) +* [Adding Tag-Based Organization](https://blog.logrocket.com/build-tags-input-react/) (logrocket.com) +* [Creating Note Templates and Quick Actions](https://blog.logrocket.com/react-templates-component-design-patterns/) (logrocket.com) +* [Building Full-Text Search Capabilities](https://lunrjs.com/guides/getting_started.html) (lunrjs.com) ### Inspiration * [Foam](https://foambubble.github.io/foam/) (foambubble.github.io) diff --git a/Tools & Libraries/README.md b/Tools & Libraries/README.md index df8e558..735a10b 100644 --- a/Tools & Libraries/README.md +++ b/Tools & Libraries/README.md @@ -10,6 +10,10 @@ ### Tutorials * [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) +* [Building Design Systems with Storybook](https://storybook.js.org/tutorials/design-systems-for-developers/) (storybook.js.org) +* [Creating and Publishing a React Component Library](https://dev.to/alexeagleson/how-to-create-and-publish-a-react-component-library-2oe) (dev.to) +* [Component Testing with Storybook Test Runner](https://storybook.js.org/docs/react/writing-tests/test-runner) (storybook.js.org) +* [Documenting Components with MDX in Storybook](https://storybook.js.org/docs/react/writing-docs/mdx) (storybook.js.org) ## Custom React Hook @@ -23,6 +27,10 @@ * [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) * [Destructuring the Fundamentals of React Hooks](https://www.colbyfayock.com/2019/04/destructuring-the-fundamentals-of-react-hooks) (colbyfayock.com) +* [Building Custom Hooks for Data Fetching](https://kentcdodds.com/blog/how-to-use-react-context-effectively) (kentcdodds.com) +* [Testing Custom React Hooks with React Testing Library](https://react-hooks-testing-library.com/) (react-hooks-testing-library.com) +* [Advanced Custom Hook Patterns](https://blog.logrocket.com/create-your-own-custom-react-hooks/) (logrocket.com) +* [Custom Hook for Local Storage Management](https://usehooks.com/useLocalStorage/) (usehooks.com) ## Framework Theme @@ -35,6 +43,10 @@ * [Building a Theme](https://www.gatsbyjs.org/tutorial/building-a-theme/) (gatsbyjs.org) * [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) +* [Creating a Design System with Tailwind CSS](https://www.smashingmagazine.com/2020/05/design-system-tailwindcss/) (smashingmagazine.com) +* [Building Responsive Layouts with Tailwind CSS](https://tailwindcss.com/docs/responsive-design) (tailwindcss.com) +* [Custom Theming and Dark Mode with Tailwind CSS](https://tailwindcss.com/docs/dark-mode) (tailwindcss.com) +* [Component Variants with Tailwind CSS and React](https://www.youtube.com/watch?v=0-jzSureq8s) (youtube.com) ### Inspiration @@ -49,6 +61,11 @@ ### Tutorials * [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) +* [CSS Keyframe Animations from Scratch](https://css-tricks.com/almanac/properties/a/animation/) (css-tricks.com) +* [Creating Smooth CSS Transitions and Transforms](https://www.joshwcomeau.com/animation/css-transitions/) (joshwcomeau.com) +* [Building a CSS Animation Library with SASS Variables](https://scotch.io/tutorials/getting-started-with-sass) (scotch.io) +* [Performance Optimization for CSS Animations](https://developers.google.com/web/fundamentals/design-and-ux/animations/animations-and-performance) (developers.google.com) +* [Creating Micro-interactions with CSS](https://tympanus.net/codrops/2019/06/04/inspirational-websites-roundup-23/) (codrops.com) ### Inspiration @@ -66,6 +83,10 @@ * [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) * [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) +* [GitHub Actions for Node.js Projects](https://docs.github.com/en/actions/automating-builds-and-tests/building-and-testing-nodejs) (github.com) +* [Creating Docker Container Actions](https://docs.github.com/en/actions/creating-actions/creating-a-docker-container-action) (github.com) +* [Publishing Actions to GitHub Marketplace](https://docs.github.com/en/actions/creating-actions/publishing-actions-in-github-marketplace) (github.com) +* [Advanced GitHub Actions Workflows and Strategies](https://github.blog/2021-11-18-7-advanced-workflow-automation-features-with-github-actions/) (github.com) ### Inspiration @@ -84,6 +105,10 @@ Know of any good examples? Submit a Pull Request! * [MDX: Next.js](https://mdxjs.com/getting-started/next) (mdxjs.com) * [Use MDX in Next.js to Dynamically Create Pages for a Blog](https://youtu.be/1-1ZLAHpa2U) (youtube.com) * [Next.js with Headless WordPress - GraphQL Queries with WPGraphQL & Deploy to Netlify](https://youtu.be/X8fY011u0tE) (youtube.com) +* [Creating a CLI Tool to Generate Next.js Boilerplate](https://blog.logrocket.com/creating-command-line-interface-node-js/) (logrocket.com) +* [Setting up ESLint and Prettier in Next.js](https://paulintrognon.fr/blog/typescript-prettier-eslint-next-js) (paulintrognon.fr) +* [Configuring Absolute Imports and Module Path Mapping](https://nextjs.org/docs/advanced-features/module-path-mapping) (nextjs.org) +* [Building Reusable Next.js Components](https://www.smashingmagazine.com/2021/06/build-blog-nextjs-mdx/) (smashingmagazine.com) ### Inspiration From 8748655c8e31b55c334984039fd5037a0fc13057 Mon Sep 17 00:00:00 2001 From: Kartikeya Nainkhwal Date: Mon, 6 Oct 2025 15:57:56 +0530 Subject: [PATCH 2/2] Add working inspiration examples to project sections - Add publicly visible, working examples for each project type - Include professional applications like Stripe, Linear, Todoist, Habitica - Cover component libraries (Ant Design, Material-UI, Chakra UI) - Add portfolio examples (Brittany Chiang, Josh Comeau, Sarah Drasner) - Include marketing sites, newsletters, and productivity tools - Provide real-world references for developers to study and emulate Resolves issue: Each project should have at least one working, publicly visible example as inspiration --- Business & Real-World/README.md | 18 +++++++++++++++++- Personal & Portfolio/README.md | 21 +++++++++++++++++++++ Productivity/README.md | 12 ++++++++++-- Tools & Libraries/README.md | 19 ++++++++++++++++++- 4 files changed, 66 insertions(+), 4 deletions(-) diff --git a/Business & Real-World/README.md b/Business & Real-World/README.md index 5f27c29..86dfcb6 100644 --- a/Business & Real-World/README.md +++ b/Business & Real-World/README.md @@ -1,5 +1,14 @@ # Business### Tutorials -*### Tutorials +* [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) + +### Inspiration + +* [Stripe](https://stripe.com/) (stripe.com) - Clean, professional fintech marketing site +* [Linear](https://linear.app/) (linear.app) - Modern SaaS marketing website with great design +* [Vercel](https://vercel.com/) (vercel.com) - Developer-focused marketing site with excellent UX +* [Framer](https://www.framer.com/) (framer.com) - Creative marketing website showcasing product features + +## Conference Schedule# Tutorials * [Create Massive Random Data Using faker.js](https://medium.com/nerd-for-tech/create-massive-random-data-using-faker-js-f47909f6fab5) (medium.com) * [Getting Started With Faker.js: A Developer's Guide](https://www.testim.io/blog/getting-started-with-faker-js/) (testim.io) * [How to Generate Fake Data in Javascript Using Faker.js](https://www.youtube.com/watch?v=SeHT0ee4waU) (youtube.com) @@ -34,6 +43,13 @@ * [Getting Started With Faker.js: A Developer’s Guide](https://www.testim.io/blog/getting-started-with-faker-js/) (testim.io) * [How to Generate Fake Data in Javascript Using Faker.js](https://www.youtube.com/watch?v=SeHT0ee4waU) (youtube.com) +### Inspiration + +* [Google I/O Schedule](https://events.google.com/io/) (events.google.com) - Professional conference scheduling interface +* [React Conf](https://conf.reactjs.org/) (conf.reactjs.org) - Clean conference website with schedule features +* [JSConf Schedule](https://jsconf.com/) (jsconf.com) - Well-organized conference schedule presentation +* [Eventbrite](https://www.eventbrite.com/) (eventbrite.com) - Comprehensive event scheduling platform + ## Ecommerce Store ### Toolbox diff --git a/Personal & Portfolio/README.md b/Personal & Portfolio/README.md index b7acc62..e9ee23d 100644 --- a/Personal & Portfolio/README.md +++ b/Personal & Portfolio/README.md @@ -15,6 +15,11 @@ ### Inspiration +* [Brittany Chiang's Portfolio](https://brittanychiang.com/) (brittanychiang.com) - Clean, interactive developer portfolio with smooth animations +* [Josh Comeau's Portfolio](https://www.joshwcomeau.com/) (joshwcomeau.com) - Modern React developer portfolio with excellent UX +* [Sarah Drasner's Site](https://sarah.dev/) (sarah.dev) - Creative developer portfolio showcasing technical skills +* [Addy Osmani's Resume](https://addyosmani.com/) (addyosmani.com) - Professional developer resume website with performance focus + ## Blog ### Toolbox @@ -60,6 +65,11 @@ ### Inspiration +* [Todoist](https://todoist.com/) (todoist.com) - Professional goal and task management with clean UI +* [Notion Goals Template](https://www.notion.so/templates/goal-tracker) (notion.so) - Comprehensive goal tracking system +* [Habitica](https://habitica.com/) (habitica.com) - Gamified goal and habit tracking application +* [Strava Goals](https://www.strava.com/) (strava.com) - Fitness goal tracking with social features + ## Project Tracker ### Toolbox @@ -76,6 +86,13 @@ ### Inspiration * [Jira Clone with with React/Babel (Client), and Node/TypeScript (API)](https://github.com/oldboyxx/jira_clone) (github.com) +### Inspiration + +* [Linear](https://linear.app/) (linear.app) - Modern project management with excellent design +* [Monday.com](https://monday.com/) (monday.com) - Comprehensive project tracking platform +* [Asana](https://asana.com/) (asana.com) - Professional project management interface +* [GitHub Projects](https://github.com/features/project-management/) (github.com) - Developer-focused project tracking + ## Newsletter ### Toolbox @@ -93,6 +110,10 @@ ### Inspiration +* [ConvertKit](https://convertkit.com/) (convertkit.com) - Professional email marketing platform +* [Substack](https://substack.com/) (substack.com) - Newsletter platform with clean, readable design +* [Buttondown](https://buttondown.email/) (buttondown.email) - Minimal newsletter service +* [Ghost Newsletter](https://ghost.org/newsletter/) (ghost.org) - Professional newsletter and publishing platform --- diff --git a/Productivity/README.md b/Productivity/README.md index cf7c5a5..b2a138b 100644 --- a/Productivity/README.md +++ b/Productivity/README.md @@ -48,7 +48,11 @@ * [Create a bookmark manager app using FaunaDB and Netlify](https://dev.to/myogeshchavan97/create-a-bookmark-manager-app-using-faunadb-and-netlify-serverless-functions-4cp0) (dev.to) ### Inspiration -Know of any good examples? Submit a Pull Request! + +* [Pocket](https://getpocket.com/) (getpocket.com) - Popular bookmark and article saving service +* [Raindrop.io](https://raindrop.io/) (raindrop.io) - Beautiful bookmark manager with collections +* [Pinboard](https://pinboard.in/) (pinboard.in) - Simple, fast bookmarking service +* [Bookmarks.dev](https://www.bookmarks.dev/) (bookmarks.dev) - Developer-focused bookmark manager ## Budget Manager @@ -82,7 +86,11 @@ Know of any good examples? Submit a Pull Request! * [Creating Social Habit Sharing Features](https://docs.expo.dev/versions/latest/sdk/sharing/) (expo.dev) ### Inspiration -Know of any good examples? Submit a Pull Request! + +* [Habitica](https://habitica.com/) (habitica.com) - Gamified habit tracking with RPG elements +* [Streaks](https://streaksapp.com/) (streaksapp.com) - Simple habit tracking focused on streaks +* [Way of Life](https://wayoflifeapp.com/) (wayoflifeapp.com) - Color-coded habit tracking +* [Loop Habit Tracker](https://github.com/iSoron/uhabits) (github.com) - Open-source habit tracker ## Shopping List diff --git a/Tools & Libraries/README.md b/Tools & Libraries/README.md index 735a10b..64b969d 100644 --- a/Tools & Libraries/README.md +++ b/Tools & Libraries/README.md @@ -15,6 +15,13 @@ * [Component Testing with Storybook Test Runner](https://storybook.js.org/docs/react/writing-tests/test-runner) (storybook.js.org) * [Documenting Components with MDX in Storybook](https://storybook.js.org/docs/react/writing-docs/mdx) (storybook.js.org) +### Inspiration + +* [Ant Design](https://ant.design/) (ant.design) - Comprehensive React UI library with excellent documentation +* [Material-UI (MUI)](https://mui.com/) (mui.com) - Popular React component library following Material Design +* [Chakra UI](https://chakra-ui.com/) (chakra-ui.com) - Modular and accessible component library +* [React Bootstrap](https://react-bootstrap.github.io/) (react-bootstrap.github.io) - Bootstrap components for React + ## Custom React Hook ### Toolbox @@ -32,6 +39,13 @@ * [Advanced Custom Hook Patterns](https://blog.logrocket.com/create-your-own-custom-react-hooks/) (logrocket.com) * [Custom Hook for Local Storage Management](https://usehooks.com/useLocalStorage/) (usehooks.com) +### Inspiration + +* [useHooks.com](https://usehooks.com/) (usehooks.com) - Collection of easy-to-understand React Hook recipes +* [React Use](https://github.com/streamich/react-use) (github.com) - Essential React Hooks library +* [Ahooks](https://ahooks.js.org/) (ahooks.js.org) - High-quality & reliable React Hooks library +* [Beautiful React Hooks](https://github.com/beautifulinteractions/beautiful-react-hooks) (github.com) - Collection of beautiful React hooks + ## Framework Theme ### Toolbox @@ -90,7 +104,10 @@ ### Inspiration -Know of any good examples? Submit a Pull Request! +* [GitHub Actions Marketplace](https://github.com/marketplace?type=actions) (github.com) - Official marketplace with thousands of actions +* [Semantic Release Action](https://github.com/semantic-release/semantic-release) (github.com) - Popular automated release action +* [Deploy to Netlify Action](https://github.com/marketplace/actions/deploy-to-netlify) (github.com) - Deployment automation example +* [Lighthouse CI Action](https://github.com/treosh/lighthouse-ci-action) (github.com) - Performance testing automation ## Framework Starter