Tutorials
4 min read
How to Build a Notification Center in React
Build a complete notification center with a bell icon badge, dropdown panel, read/unread states, and real-time updates.
Dec 14, 2024
Read more 290 Articles
TutorialsPage 13
Articles and guides about tutorials.
Tutorials
3 min read
How to Build a Dashboard with Drag-and-Drop Widgets in React
Create a customizable dashboard with resizable, draggable widget cards using react-grid-layout in React.
Dec 13, 2024
Read more Tutorials
2 min read
How to Implement Feature Toggles with LaunchDarkly in Next.js
Integrate LaunchDarkly feature flags in Next.js for server and client components, with targeting rules and A/B testing.
Dec 13, 2024
Read more Tutorials
4 min read
How to Build a Rich Text Editor in React with Tiptap
Build a full-featured rich text editor with Tiptap in React with a toolbar, image uploads, slash commands, and markdown shortcuts.
Dec 13, 2024
Read more Tutorials
4 min read
How to Secure a Next.js App: Authentication, CSRF, Headers, and More
Harden your Next.js app with security headers, CSRF protection, input sanitization, rate limiting, and secure authentication patterns.
Dec 13, 2024
Read more Tutorials
4 min read
How to Build Unit and Integration Tests for React Components
Write unit and integration tests for React components using Vitest and React Testing Library with practical patterns.
Dec 13, 2024
Read more Tutorials
3 min read
How to Build a Code Syntax Highlighter Component in React
Build a code syntax highlighter component using Shiki with line numbers, copy button, language badge, and line highlighting.
Dec 12, 2024
Read more Tutorials
3 min read
How to Build a Custom React Hook Collection
Build a collection of reusable React hooks including useLocalStorage, useMediaQuery, useClickOutside, useIntersectionObserver, and more.
Dec 12, 2024
Read more Tutorials
3 min read
How to Build a GraphQL API in Next.js with Yoga and Pothos
Set up a type-safe GraphQL API inside your Next.js app using GraphQL Yoga for the server and Pothos for the schema builder.
Dec 12, 2024
Read more Tutorials
4 min read
How to Build a Performance Monitoring Dashboard in Next.js
Build a Core Web Vitals monitoring dashboard that tracks LCP, FID, CLS, INP, and TTFB with historical trends in Next.js.
Dec 12, 2024
Read more Tutorials
3 min read
How to Implement Progressive Web App Features in Next.js
Turn your Next.js app into a Progressive Web App with offline support, install prompts, push notifications, and background sync.
Dec 12, 2024
Read more Tutorials
5 min read
How to Build a Video Player Component in React
Create a custom video player component in React with play/pause, progress bar, volume control, fullscreen, and keyboard shortcuts.
Dec 12, 2024
Read more