Our great sponsors
-
react-detect-click-outside
Detects clicks outside React components to close them. Also handles keypresses.
You can create your own hook for this following this tutorial, however, for the sake of this tutorial I'll just use react-detect-click-outside.
-
SurveyJS
Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.
-
Using npx or yarn, create a new Next.js or React project
-
Since I'm in love with it, I'll be doing this project in Next.js with TypeScript - however, the procedure for implementing this in other React frameworks shouldn't be too different.
-
While we're at it, let's also download some icons from React Icons, and import them up top.
-
Since I'm in love with it, I'll be doing this project in Next.js with TypeScript - however, the procedure for implementing this in other React frameworks shouldn't be too different.
-
monkeytype
The most customizable typing website with a minimalistic design and a ton of features. Test yourself in various modes, track your progress and improve your speed.
MonkeyType is an open-source, minimalistic, and customisable typing test. It's designed to be accessed from just your keyboard, eliminating the need to switch back and forth with your mouse.
-
WorkOS
The modern identity platform for B2B SaaS. The APIs are flexible and easy-to-use, supporting authentication, user identity, and complex enterprise features like SSO and SCIM provisioning.
-
Animations using Framer Motion
Related posts
- Using Notion as your Database
- Building a Dynamic Job Board with Issues Github, Next.js, Tailwind CSS and MobX-State-Tree
- What is the ideal Tech stack to build a website in 2024? 👨💻
- The art of conditional rendering: Tips and tricks for React and Next.js developers
- 😳 Next.js vs React - A Beginner's Guide