--- title: Best freeCodeCamp posts — October 2024 | daily.dev description: The most upvoted freeCodeCamp posts from October 2024, curated by the daily.dev community. canonical: https://daily.dev/sources/freecodecamp/best-of/2024/10 twitter:card: summary_large_image twitter:site: @dailydotdev og:url: https://daily.dev/sources/freecodecamp/best-of/2024/10 og:type: website og:site_name: daily.dev og:title: Best freeCodeCamp posts — October 2024 | daily.dev og:description: The most upvoted freeCodeCamp posts from October 2024, curated by the daily.dev community. og:image: https://media.daily.dev/image/upload/s--VAY5ToZt--/f_auto/v1724209435/public/daily.dev%20-%20open%20graph --- # Best of freeCodeCamp — October 2024 1. 1 [](https://daily.dev/posts/react-best-practices-ever-developer-should-know-nae6ypy7x "React Best Practices Ever Developer Should Know") Article freeCodeCamp · 2y React Best Practices Ever Developer Should Know This guide offers crucial tips on optimizing React development using hooks. It covers the importance of maintaining immutability in state management, avoiding the overuse of useState, leveraging useMemo for performance improvements, ensuring unique keys for list items, and properly handling dependencies in useEffect. The guide also advises on alternatives to useEffect for managing side effects efficiently, contributing to cleaner and more efficient code. 1.4K 54 2. 2 [](https://daily.dev/posts/learn-generative-ai-for-developers-tznclrccq "Learn Generative AI for Developers") Article freeCodeCamp · 2y Learn Generative AI for Developers Generative AI is transforming AI by enabling machines to produce text, images, and audio. A new 21-hour course on the freeCodeCamp.org YouTube channel offers a comprehensive guide for developers, covering foundational concepts, advanced methods, hands-on projects, and deployment. Key tools include Hugging Face, OpenAI, LangChain, and vector databases, with practical applications like chatbots and text summarizers. The course also delves into Retrieval-Augmented Generation (RAG) and deploying AI apps on Google Cloud and AWS. 736 12 3. 3 [](https://daily.dev/posts/mobile-app-development-course-with-react-native-supabase-next-js-y1eroosee "Mobile App Development Course with React Native, Supabase, Next.js") Article freeCodeCamp · 2y Mobile App Development Course with React Native, Supabase, Next.js Learn to build a complete e-commerce mobile app with React Native, Supabase, Stripe, and Next.js through a comprehensive freeCodeCamp course. The course covers front-end design, secure back-end setup, payment integration, and deployment, making it ideal for full-stack developers aiming to enhance their skills. 294 7 4. 4 [](https://daily.dev/posts/how-to-create-linux-device-drivers-ligbywq2l "How to Create Linux Device Drivers") Article freeCodeCamp · 2y How to Create Linux Device Drivers Linux device drivers facilitate communication between the operating system and hardware. A new hands-on course by freeCodeCamp teaches how to develop these drivers, covering topics from the Linux kernel and system calls to file operations and kernel module management. The course includes practical steps for setting up a development environment and writing a loadable module. 145 2 5. 5 [](https://daily.dev/posts/from-concept-to-code-how-to-use-ai-tools-to-design-and-build-ui-components-gkkwmzhsh "From Concept to Code: How to Use AI Tools to Design and Build UI Components") Article freeCodeCamp · 2y From Concept to Code: How to Use AI Tools to Design and Build UI Components Learn how to streamline your UI development process by using AI tools like Sourcegraph's Cody and Tailwind CSS. This guide walks you through setting up your environment, creating foundational components, and leveraging Cody for generating efficient, functional, and visually appealing UI elements. By integrating these technologies, you enhance productivity and ensure a better user experience for your web applications. 143 2 6. 6 [](https://daily.dev/posts/how-to-create-database-documentation-using-dbdocs-with-dbml-ugupat89v "How to Create Database Documentation Using dbdocs with DBML") Article freeCodeCamp · 2y How to Create Database Documentation Using dbdocs with DBML Database documentation is crucial for maintaining and scaling systems. This guide demonstrates creating database documentation using DBML and dbdocs. The step-by-step process includes installing the necessary CLI tools, exporting a database schema to DBML, editing the DBML file, and generating documentation with dbdocs. Benefits include simplicity, automation, collaboration, version control, and visualization. 98 7. 7 [](https://daily.dev/posts/mobile-app-development-course-with-react-native-supabase-next-js-h3nmwgynz "Mobile App Development Course with React Native, Supabase, Next.js") Video freeCodeCamp · 2y Mobile App Development Course with React Native, Supabase, Next.js 95 8. 8 [](https://daily.dev/posts/how-to-build-a-documentation-site-using-react-and-docusaraus-aoztt7tyj "How to Build a Documentation Site using React and Docusaraus") Article freeCodeCamp · 2y How to Build a Documentation Site using React and Docusaraus Creating a well-designed documentation site is crucial for any project, and Docusaurus, combined with React, offers a robust solution. This guide covers the installation and setup of Docusaurus, customization of the site's structure, creating documentation, using MDX and React components, and styling. Furthermore, it discusses the SEO features and deployment process, making it suitable for both developers and technical writers. 88 4 9. 9 [](https://daily.dev/posts/build-a-full-stack-book-store-app-using-react-node-mongodb-ryann1wq0 "Build a Full Stack Book Store App Using React, Node, MongoDB") Video freeCodeCamp · 2y Build a Full Stack Book Store App Using React, Node, MongoDB Learn how to build a full stack M Stack application that includes both front end and back end, featuring React on the front end, Node and Express on the back end, and MongoDB as the database. The project will cover essential functionalities such as an admin dashboard, cash on delivery features, inventory management, and a user-friendly interface for adding and removing products. The tutorial also includes JWT for authentication and Redux toolkit for state management. 79 10. 10 [](https://daily.dev/posts/how-to-build-your-own-private-hacking-lab-with-virtualbox-qti5lbtmm "How to Build Your Own Private Hacking Lab with VirtualBox") Article freeCodeCamp · 2y How to Build Your Own Private Hacking Lab with VirtualBox Learn how to set up a private hacking lab using VirtualBox to practice ethical hacking safely. The guide covers installing necessary software like VirtualBox and Kali Linux, setting up attacking and target machines, and configuring a host-only network to ensure isolation from the public internet. Finally, it shows basic scanning techniques using Nmap for identifying and understanding the target machine's network configuration. 77 3 11. 11 [](https://daily.dev/posts/how-to-build-a-css-component-library-and-improve-your-web-development-skills-32pafyoiq "How to Build a CSS Component Library and Improve Your Web Development Skills") Article freeCodeCamp · 2y How to Build a CSS Component Library and Improve Your Web Development Skills Building a CSS component library can dramatically improve UI development efficiency and consistency. Key steps include designing component layouts, structuring them with HTML, styling with CSS, and hosting the CSS file for easy reuse. This process not only speeds up development but also ensures maintainable and scalable code. Benefits include faster development, uniform styling, better maintainability, community support, and customization options. The post details steps for creating, styling, and hosting components, emphasizing the importance of a structured, modular approach to web design. 76 1 12. 12 [](https://daily.dev/posts/generative-ai-for-developers-comprehensive-course-maxme5se0 "Generative AI for Developers – Comprehensive Course") Video freeCodeCamp · 2y Generative AI for Developers – Comprehensive Course This comprehensive course on generative AI covers essential concepts like large language models, data preprocessing, and advanced techniques such as fine-tuning and prompt engineering. Through hands-on projects using tools like Hugging Face, OpenAI, and LangChain, participants will learn to build real-world applications including text summarization and custom chatbots. The course also delves into vector databases, AI pipelines, and deployment techniques using platforms like Google Cloud Vertex AI and AWS Bedrock. 69 13. 13 [](https://daily.dev/posts/how-to-pass-additional-arguments-to-next-js-server-actions-uzxl1gd61 "How to Pass Additional Arguments to Next.js Server Actions") Article freeCodeCamp · 2y How to Pass Additional Arguments to Next.js Server Actions Learn how to pass additional arguments to Next.js server actions, which are asynchronous functions that execute on the server. The guide walks through handling extra arguments programmatically using the bind() method in JavaScript, avoiding security issues associated with hidden form fields. It includes an example of creating a form and a working server action, showing how to enhance the form to include additional parameters securely. 62 14. 14 [](https://daily.dev/posts/how-to-build-a-crud-application-using-react-and-convex-mhlfh3lax "How to Build a CRUD Application using React and Convex") Article freeCodeCamp · 2y How to Build a CRUD Application using React and Convex Learn how to build a CRUD application using React and Convex, featuring a book collection project where users can add books and update their status. The guide covers setting up Convex and React, creating a schema, building a UI, and implementing CRUD functions in the backend using Convex's built-in methods. 58 15. 15 [](https://daily.dev/posts/electron-course---code-desktop-applications-inc-react-and-typescript--48r004amx "Electron Course - Code Desktop Applications (inc. React and Typescript)") Video freeCodeCamp · 2y Electron Course - Code Desktop Applications (inc. React and Typescript) This comprehensive course guides you through building robust desktop applications using Electron, React, and Typescript. It covers everything from setting up your development environment to implementing advanced features like data visualization, secure communication, and custom window frames. You'll build a resource manager inspired by the Windows Task Manager, learning to create complex UI components, interact with system APIs, and bundle your app for different operating systems. 51 [See all freeCodeCamp archives](/sources/freecodecamp/best-of) ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@graph":[{"@type":"CollectionPage","@id":"https://daily.dev/sources/freecodecamp/best-of/2024/10#page","url":"https://daily.dev/sources/freecodecamp/best-of/2024/10","name":"Best freeCodeCamp Posts — October 2024","description":"The most upvoted freeCodeCamp posts from October 2024, curated by the daily.dev community.","isPartOf":{"@type":"WebSite","url":"https://daily.dev"}},{"@type":"ItemList","@id":"https://daily.dev/sources/freecodecamp/best-of/2024/10#items","numberOfItems":15,"itemListElement":[{"@type":"ListItem","position":1,"url":"https://daily.dev/posts/react-best-practices-ever-developer-should-know-nae6ypy7x","name":"React Best Practices Ever Developer Should Know"},{"@type":"ListItem","position":2,"url":"https://daily.dev/posts/learn-generative-ai-for-developers-tznclrccq","name":"Learn Generative AI for Developers"},{"@type":"ListItem","position":3,"url":"https://daily.dev/posts/mobile-app-development-course-with-react-native-supabase-next-js-y1eroosee","name":"Mobile App Development Course with React Native, Supabase, Next.js"},{"@type":"ListItem","position":4,"url":"https://daily.dev/posts/how-to-create-linux-device-drivers-ligbywq2l","name":"How to Create Linux Device Drivers"},{"@type":"ListItem","position":5,"url":"https://daily.dev/posts/from-concept-to-code-how-to-use-ai-tools-to-design-and-build-ui-components-gkkwmzhsh","name":"From Concept to Code: How to Use AI Tools to Design and Build UI Components"},{"@type":"ListItem","position":6,"url":"https://daily.dev/posts/how-to-create-database-documentation-using-dbdocs-with-dbml-ugupat89v","name":"How to Create Database Documentation Using dbdocs with DBML"},{"@type":"ListItem","position":7,"url":"https://daily.dev/posts/mobile-app-development-course-with-react-native-supabase-next-js-h3nmwgynz","name":"Mobile App Development Course with React Native, Supabase, Next.js"},{"@type":"ListItem","position":8,"url":"https://daily.dev/posts/how-to-build-a-documentation-site-using-react-and-docusaraus-aoztt7tyj","name":"How to Build a Documentation Site using React and Docusaraus"},{"@type":"ListItem","position":9,"url":"https://daily.dev/posts/build-a-full-stack-book-store-app-using-react-node-mongodb-ryann1wq0","name":"Build a Full Stack Book Store App Using React, Node, MongoDB"},{"@type":"ListItem","position":10,"url":"https://daily.dev/posts/how-to-build-your-own-private-hacking-lab-with-virtualbox-qti5lbtmm","name":"How to Build Your Own Private Hacking Lab with VirtualBox"},{"@type":"ListItem","position":11,"url":"https://daily.dev/posts/how-to-build-a-css-component-library-and-improve-your-web-development-skills-32pafyoiq","name":"How to Build a CSS Component Library and Improve Your Web Development Skills"},{"@type":"ListItem","position":12,"url":"https://daily.dev/posts/generative-ai-for-developers-comprehensive-course-maxme5se0","name":"Generative AI for Developers – Comprehensive Course"},{"@type":"ListItem","position":13,"url":"https://daily.dev/posts/how-to-pass-additional-arguments-to-next-js-server-actions-uzxl1gd61","name":"How to Pass Additional Arguments to Next.js Server Actions"},{"@type":"ListItem","position":14,"url":"https://daily.dev/posts/how-to-build-a-crud-application-using-react-and-convex-mhlfh3lax","name":"How to Build a CRUD Application using React and Convex"},{"@type":"ListItem","position":15,"url":"https://daily.dev/posts/electron-course---code-desktop-applications-inc-react-and-typescript--48r004amx","name":"Electron Course - Code Desktop Applications (inc. React and Typescript)"}]},{"@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"Sources","item":"https://daily.dev/sources"},{"@type":"ListItem","position":3,"name":"freeCodeCamp","item":"https://daily.dev/sources/freecodecamp"},{"@type":"ListItem","position":4,"name":"Best of","item":"https://daily.dev/sources/freecodecamp/best-of"},{"@type":"ListItem","position":5,"name":"October 2024"}]}]} ```