Open Source Front End·1yI built a Flexbox Playground with Awesome Animations
Flexbox labs is an open source visual tool designed to help you create and customize CSS Flexbox layouts. Key features include an edit tab, save tab, pre-built layouts, and options for customizing the app. The tool is built using React, TypeScript, Sass, and Framer Motion.
ReactTsx·1yCursify - Cursor Animation Library
Cursify is an open-source library designed for creating stunning cursor animations. It is built with React, TypeScript, Tailwind CSS, and Framer Motion, making it 100% customizable and easy to integrate into projects, enhancing interactivity effortlessly.
LogRocket·1yBuild a micro-frontend application with React
Building and managing large-scale projects can be challenging, and the micro-frontend architecture is gaining popularity for handling these challenges. It extends the concept of microservices to the frontend, allowing multiple teams to work independently on different modules. React is highlighted as a strong tech stack for implementing micro-frontends due to its extensive ecosystem and community support. The post includes a practical guide on creating a micro-frontend application using React and the create-mf-app package, as well as best practices and solutions to common issues in micro-frontend development.
Community Picks·1y✨ How to Study Frontend Development the Lazy Way
The post details two effective approaches for learning frontend development, even for complete beginners. It highlights using paid resources like FrontendMasters, or leveraging free tools and tutorials, emphasizing the importance of building projects to facilitate learning. The author shares a 7-step plan for both approaches, covering foundational courses, project-building, mastering JavaScript, and diving into React and intermediate projects.
Product Hunt·1yReact Scan - Scan your React app for problematic renders and performance
React Scan is a new open-source developer tool designed to identify and address problematic renders and performance issues in React applications. It made its first launch on November 15th, 2024, and aims to help developers optimize their React apps.
Dev Squad·1yI built a Flexbox Playground with Awesome Animations
Flexbox Labs is an open source visual tool designed to help users create layouts using CSS Flexbox. The tool includes customizable features such as edit, save, pre-built layouts, and settings tabs. Additional functionalities include clone, undo, redo, reset, generate code, and more. Built with React, TypeScript, Sass, and Framer Motion, it aims to simplify layout creation and animations for developers.
Community Picks·1yEssential Typescript for React
This guide highlights essential TypeScript knowledge for effective product development in React. Key points include using ReturnType and Awaited to manage return types, typing components based on their requirements to avoid tight coupling with database schemas, using ReactNode for typing children, and employing React.ComponentProps for passing props. It also covers using intersections, unions, and Omit to handle props effectively.
Community Picks·1yShadcn Form Builder
Shadcn Form Builder allows developers to create forms quickly using Shadcn UI, react-hook-form, and Zod. Offering customizable and ready-to-use form solutions, it simplifies validation with support for both Zod and Yup. Developers can easily integrate pre-built components, rearrange fields, and define behavior with just a few steps, making form creation efficient and seamless.
Community Picks·1yFramer Motion is now independent, introducing Motion
Framer Motion is transitioning into a new independent open-source project called Motion, focusing on broader community support and integration beyond React. Motion will feature vanilla JavaScript APIs, improved search functionality, and expanded documentation, aiming to serve users of various frameworks such as Vue. The move is designed to better support a wider user base and ensure future growth and innovation.
DEV·1y⚡🚀 ReactJS, TypeScript, Vite with Redux and TanStack (React Query) In Practice ⚛️
Learn how to combine Redux with Thunk and React Query (TanStack) for managing client-side and server-side state in a ReactJS application. The guide explains setting up a Node.js Express server to handle CRUD operations and provides a step-by-step implementation of the frontend using Vite, TypeScript, Redux, and React Query. This setup leverages Redux for local UI state and React Query for asynchronous data fetching, caching, and synchronization with the server.
Community Picks·1yConditional React hooks pattern
Refactoring internal hooks in Headless UI revealed a pattern for conditionally enabling React hooks. By passing an 'enabled' boolean as the first argument to hooks like useOutsideClick and useScrollLock, developers can control their activation based on component state, such as whether a dialog is open. This approach avoids unnecessary event listeners and memory usage, enhancing performance.
Cerbos·1yHow to use ReactJS for secure Role Based Access Control
ReactJS simplifies building interactive user interfaces through reusable components. By integrating Cerbos, a modern Authorization-as-a-Service solution, developers can efficiently handle authorization for an internal admin dashboard. Cerbos provides a flexible Policy Decision Point (PDP) that can be deployed in various environments, ensuring secure Role Based Access Control (RBAC). Using Docker, developers can test and implement policies to manage roles and permissions precisely, preventing unauthorized access to sensitive information and streamlining user role management.
TkDodo·1yReact Query API Design - Lessons Learned
Dominik, a frontend tech lead at Adverity and maintainer of TanStack React Query, shares insights from his talk at React Advanced in London. He discusses the challenges of API design in open source, the balance between minimal and flexible APIs, and the importance of considering types from the beginning. He also touches on managing user expectations and feedback for new features, and the significance of early user feedback in open source projects. Key points include the evolution of React Query, handling API complexity, and the role of effective API design in user adoption.
Community Picks·1yThe Art of Managing Re-renders in React Applications
Learn techniques to optimize React applications and avoid unnecessary re-renders, such as using useMemo for expensive calculations, React.memo for component memoization, useCallback to maintain stable function references, and avoiding inline functions and objects. React 19 introduces features like Suspense and Concurrent Mode to automate performance optimization, enabling developers to focus on building new features.
freeCodeCamp·1yLearn Redux and Redux Toolkit for State Management
State management in React applications is crucial for scalability and efficiency. Redux and Redux Toolkit are essential tools for handling state, offering a structured and predictable way to manage it. A new, comprehensive course by Khaiser Khanam on freeCodeCamp.org's YouTube channel covers everything from foundational concepts to advanced state management patterns, practical examples, and best practices. It starts with Redux basics and moves to Redux Toolkit essentials, making complex topics accessible through real-world projects.
Community Picks·1yMastering JavaScript Event Delegation
Event Delegation in JavaScript is a technique to manage events efficiently by attaching a single event listener to a parent element to handle events for its children. This method leverages event propagation, enhancing performance, control, and memory handling. It includes practical scenarios, best practices, and comparisons with direct event handling. Key benefits are reduced memory usage and improved efficiency, with support for dynamic elements.
DEV·1yWhy Virtual DOM: Faster Rendering and Performance
Explores the Document Object Model (DOM) and the virtual DOM, detailing how the browser creates and manipulates the DOM from HTML or XML content. The virtual DOM concept is introduced as a performance enhancement, describing how it maintains a copy in memory to optimize updates and rendering in modern web libraries.
freeCodeCamp·1yHow to Build a Memory Card Game Using React
This post walks you through building a memory card game using React. It includes details on the project's tech stack (NPM, Vite, React, CSS Modules), project structure, and performance optimizations for mobile devices. The game tests memory skills by challenging players to click unique anime images without repeating. It features dynamic gameplay, score tracking, responsive design, and smooth animations. The post explains how to set up the development environment, create components, manage state, and implement custom hooks, while also providing a GitHub repository for code reference.
YouTube·1yFull Stack NextJs Course : AI Note Taking App Using React, Tailwind css | SaaS App
Learn to build a full-stack AI PDF note-taking application using React and Next.js from scratch. This tutorial covers using AI to generate answers from PDF content, building a feature-rich interface with React and Tailwind CSS, implementing authentication with Clerk, real-time database with Convex, and deploying the application. Users will be able to upload PDFs, ask questions, and take notes efficiently with AI assistance. The guide also includes options for upgrading to a paid plan with payment integration.
AI·1yI've build a platform for everything-AI!
MyAiHub.ai is a newly launched platform for AI enthusiasts and professionals, designed to consolidate AI resources in one place. It was built using React, TypeScript, MongoDB, and Express.js. The project is open to feedback and aims to evolve with the AI community's needs.
Community Picks·1y7 challenges to do before a React interview
The post lists seven coding challenges to help candidates prepare for a React interview. Each challenge focuses on different skills such as data fetching, state management, working with intervals, local storage, forms, and component structuring. Completing these tasks will assist in warming up for potential interview tasks.
