DEV Community: Luca Restagno

From 0 to $1.5k MRR: lessons from our first year building BlackTwist

Luca Restagno — Sun, 20 Jul 2025 16:39:37 +0000

Hey friends,

Exactly one year ago, Mattia and I started building a small idea on the side.

We didn’t have a team.

We didn’t have an audience.

Just an itch — and the belief that Threads would need its own ecosystem of tools.

Today, BlackTwist just passed $1.5k MRR.

It’s still early. But it feels real.

So I wanted to share a few things from behind the scenes — not just the wins, but the messy parts too.

🚀 The beginning

We started from scratch.

Zero followers. Zero traffic. Zero hype.

Our only “unfair advantage” was that we had been power users of Twitter/X schedulers for years.

So when Threads launched, I knew exactly what I wanted as a creator — and no one had built it yet.

So we did.

🛠 Building and balancing

I handled the tech.

Mattia handled the marketing.

At least… that’s what we tried to do.

The reality is: we both love building, and sometimes that leads to blurred roles, duplicate work, or missed communication.

Some weeks it works great.

Other weeks it creates tension.

We’re constantly learning how to work together better — how to trust, delegate, and stay in sync without losing the joy of creating.

📈 The growth (slow, then suddenly)

We launched fast.

Added scheduling, calendar view, carousels, auto-reposting, analytics.

We also launched a #Threads100 challenge — post for 100 days straight, with a leaderboard and streak tracking.

It was hard to measure the ROI directly, but it definitely brought attention.

Brand awareness matters, even when it doesn’t “convert” immediately.

Then we got our first paying users.

Then more.

Now, creators are writing about BlackTwist in their guides.

They tag us.

They share wins using our tools.

They recommend us — not because we asked, but because it actually helps them grow.

💸 The business model (and how creators help us grow)

One of the best decisions we made was launching an affiliate program.

We wanted creators to feel like real partners — not just users.

So we made it easy:

Creators use BlackTwist to schedule content, build streaks, and stay consistent
They include us in their growth guides, newsletters, and tool stacks
When someone signs up through them, they get paid

No weird requirements. No gatekeeping.

Just a way for people to earn by sharing something they genuinely use.

And it’s working.

We’re seeing more creators mention BlackTwist in their:

Growth strategy threads
“Tools I use” posts
YouTube videos
Notion templates
Even paid courses

What makes it special is: they’re not doing exclusively for the money.

They do it because the tool helps them — and then the affiliate link becomes a bonus.

This organic love has been one of the biggest drivers of momentum recently.

It’s not explosive, but it’s steady.

And it’s real.

The win-win dynamic keeps us focused on making the product genuinely valuable — not just “marketable.”

🧭 What’s next

We’re just getting started. Here’s what we’re focused on now:

Keep building what creators ask for

Double down on SEO

Release more free tools (like our Text Carousel Generator or Fake Threads Post Generator)

Listen, iterate, repeat

💬 Final thoughts

If you’re building something right now and it feels slow — keep going.

We didn’t go viral. We didn’t launch on Product Hunt.

We just showed up every week, fixed bugs, improved the product, and listened to users.

Momentum is often invisible at the start.

Thanks for reading — and for supporting our journey.

Talk soon,

Luca

Best 11 React UI Component Libraries in 2025

Luca Restagno — Tue, 11 Mar 2025 07:44:03 +0000

As a developer deeply familiar with the React ecosystem, I've seen firsthand how React remains a dominant force in front-end development. Its popularity isn't just hype; it's rooted in the framework's ability to enable developers to build modern, efficient, and accessible user interfaces. The real game-changer, in my experience, has been the rise of React UI component libraries. These libraries provide a treasure trove of pre-built, reusable UI components that can be dropped into projects, saving countless hours of development time. From basic buttons and forms to complex data tables and charts, these libraries offer a wide range of elements that accelerate the development process. What I appreciate most is that these components aren't just about speed; they embody design and accessibility best practices, ensuring that the user interfaces are both visually appealing and highly functional.

React UI component libraries offer tools for building efficient and accessible user interfaces by providing pre-designed UI elements that simplify and accelerate software development. These elements, ranging from basic components like buttons and modals to more complex ones like data tables and charts, serve as building blocks for developers. By using these libraries, developers can implement common UI patterns more efficiently, ensure consistency across the project, and enhance the overall quality of their applications. Many of these libraries also prioritize accessibility, making it easier to create applications that are usable by everyone. Furthermore, React UI component libraries help to reduce development costs, increase productivity, and minimize the risk of introducing bugs into applications. Some libraries also integrate with design tools and offer improved TypeScript support, further streamlining the development process.

Benefits of using component libraries

In my experience, the benefits of using React UI component libraries are substantial, impacting various facets of the development lifecycle. Here's a detailed look at the advantages I've observed:

Efficiency and Speed: One of the most immediate benefits I've noticed is the significant boost in development speed. React component libraries offer pre-built solutions, which streamlines the implementation of design features and functionalities. Instead of writing code for every React component from scratch, you can simply import and use the available elements. This is particularly useful when implementing common UI patterns.
Consistency: React UI libraries ensure a consistent look and feel across your application. Since these libraries are designed with a cohesive style guide, the user interface maintains uniformity, which enhances the overall user experience. This is especially beneficial for large teams working on multiple projects.
Quality Enhancement: Top-tier React component libraries are well-tested and maintained, which ensures high quality and reduces the risk of introducing bugs into applications. These libraries often follow accessibility best practices, making it easier to create applications usable by everyone.
Cost Reduction: By using pre-built components, the overall development costs can be significantly reduced. The time and resources saved on designing and developing components from scratch can be allocated to other critical aspects of the project.
Productivity Boost: The use of pre-built components saves a significant amount of time and effort, allowing developers to focus on the more complex and unique aspects of their applications. This increased productivity translates to faster project completion and more efficient resource utilization.
Access to Expertise: Component libraries are often developed and maintained by experienced developers. This means that when using these libraries, you benefit from the expertise and best practices embedded within the components.
Community Support: Many component libraries have active communities of users. These communities provide support, help, and resources, making it easier to troubleshoot issues and find solutions. The continuous development, bug fixes, and extensive documentation further enhance the value of these libraries.
Customization: Despite offering ready-to-use components, React UI libraries are highly customizable to fit project-specific requirements. Theming and style props allow you to override and extend component styles, ensuring that the UI aligns with your design vision.
Accessibility: Many UI libraries prioritize accessibility, making it easier to create applications that are usable by everyone. By adhering to accessibility standards like WAI-ARIA, these libraries ensure that components are keyboard navigable, screen reader compatible, and adhere to WCAG guidelines.

In essence, React UI component libraries offer a blend of speed, consistency, quality, and community support, making them an indispensable tool in modern React development. The ability to customize and extend these components further enhances their value, allowing you to create unique and efficient user interfaces.

Trends in 2025

Based on what I've gathered, several key trends are apparent in React UI libraries as we move into 2025. These trends are all about making the development process smoother, ensuring higher code quality, and tackling the ever-changing demands of modern web applications.

One of the most interesting things I'm seeing is the increasing use of Artificial Intelligence in UI development. It's not just a gimmick; AI is being used to make some real improvements. For example, AI systems can now suggest the best component setups for a project, create color schemes that perfectly match a brand's style, and even study how users interact with the UI to fine-tune layouts. I've also noticed AI helping with tasks like writing component documentation and suggesting properties for components. While it's still early days, the potential of AI to transform UI development is hard to ignore.

I'm also seeing React UI libraries integrating more closely with design tools like Figma, Sketch, and Adobe XD. This means that changes in design can be synced with the component code in real-time. I've even seen tools that can automatically turn design files into React components. The goal here is to cut down on the time and effort it takes to turn designs into working code.

Another big trend is the enhanced support for TypeScript. As more and more developers adopt TypeScript with React, UI libraries are stepping up their game by providing better type definitions for components and utilities. I've found that this makes it easier to catch mistakes early on and work with complicated component APIs.

How to choose a React Component Library

There are several key factors to consider when choosing a React UI library. These considerations can help ensure that the selected library aligns well with the project’s specific needs, design goals, and technical constraints.

Project Needs: A primary consideration is whether the library provides the necessary components and features required for the project. It's important to assess the project’s scale and type, and any specific requirements. For instance, a large enterprise application will require a library capable of supporting a high level of complexity.
Customizability: Another important aspect is the degree to which the library can be tailored to fit the brand's design guidelines. Some libraries offer more customization options than others.
Longevity: It's crucial to consider how frequently the library is updated and whether it is likely to be supported in the future. Choosing a library that is actively maintained ensures that you won't need to migrate to a new library in the near future.
Learning Curve: The ease with which a new developer can learn and use the library is also an important consideration. Selecting a library that is easy for new developers to learn is particularly important when working in a team.
Community Support: The presence of a large and active community can provide support and help when resolving issues.
Documentation: Well-written documentation can make it easier to learn how to use the library and find solutions to problems.
Accessibility: It's essential to ensure that the library follows accessibility best practices and guidelines, such as WAI-ARIA. This ensures that components function well with screen readers and are accessible to all users.
Performance: Performance is another critical factor to consider. If high performance is a priority, choose a React component library known for its speed and responsiveness.
Consistency: Libraries designed with a cohesive style guide ensure a consistent look and feel across the application, enhancing the overall user experience.
Specific Use Cases: The best library for a project depends on your requirements. Some libraries may be more suited for dashboards, while others are better for static pages.

By carefully evaluating these factors, you can choose a React component library that is a good fit for your project, enhancing both the development process and the final product.

Let’s discover together the 11 best React UI Components Libraries, with an in-depth description of their characteristics.

MaterialUI (MUI)

https://mui.com/

Material UI (MUI) stands out as a prominent React component library that implements Google's Material Design. It offers a comprehensive set of pre-built components ready for production use. With over 89.3k stars on GitHub and more than 3 million weekly downloads on NPM, it's clear that MUI is a popular choice among developers.

Key Features:

Comprehensive Components: MUI provides a wide array of pre-built components, including buttons, forms, tables, and charts.
Accessibility: Accessibility is a key focus, ensuring components meet high usability standards. MUI components are designed to be accessible by default, making it easier to create usable applications for everyone.
Customization: It has customization options for implementing custom design systems. Developers can easily tailor components and themes to their preferred designs.
Theme Support: MUI supports theming, which allows for easy changes to the look and feel of an entire application. It offers theme toggling customization with support for dark and light modes. You can customize the theme to your preferred choice using the ThemeProvider component.
Strong Community: A large and active community of users and contributors supports MUI. The documentation is well-written, so developers can easily understand and use the library.
Typography: MUI follows its typography guidelines to ensure all text elements have consistent text styling.
Icons: It provides a collection of icons that can be used in your application. The icons can be imported from the @mui/icons-material package.
Form Controls: MUI provides a range of form components like text fields, checkboxes, radio buttons, and select menus, to make creating a user-friendly form easy and accessible.
Responsive Design: MUI components are responsive to ensure your application works well on different screen sizes and devices.

Use Cases

MUI can be used to build various React applications, from simple websites to complex enterprise applications. It is particularly suitable for applications needing to be visually appealing and consistent. Also, it is a good choice for applications that need to be accessible to all users.

Benefits:

Aesthetics: Material UI has modern, beautiful designs.
Customization: It offers customization options that allow developers to easily tailor components and themes to their preferred designs.
Accessibility: The library is designed to be accessible by default, making it easier to create usable applications for everyone.
Responsive Design: Material UI components are responsive to ensure your application works well on different screen sizes and devices.
Developer-Friendly: The documentation is well-written, so developers can easily understand and use the library. The components are also easy to import and implement.
Designed-friendlt: MUI provides a Figma representation of React’s components, allowing designers and developers to easily collaborate.

In summary, Material UI remains a robust choice for React developers, offering a blend of comprehensive components, strong community support, and continuous updates that keep it relevant in the evolving landscape of UI libraries.

Ant Design

https://ant.design/

Ant Design is a React component library that implements the Ant Design system, originally created by Ant Financial. It is particularly well-suited for building enterprise-level applications. With over 88k stars on GitHub and more than 1.3 million weekly downloads on NPM, it's a popular choice, especially for those needing robust, professional-looking components.

Key Features:

Enterprise-Level Components: Ant Design offers a wide range of enterprise-level components, such as data tables, form layouts, and organization charts.
Professional Look: The design system is heavily influenced by Chinese design principles, resulting in a more elegant and professional aesthetic.
Out-of-the-Box Features: Ant Design provides features not always available in other libraries, like internationalization support and type safety.
Customizability: It provides customizable options that simplify the implementation of custom design systems. It allows theming and customization, giving control over typography, style, and colors.
Internationalization Support: Ant Design supports dozens of languages and has built-in internationalization support for global users.
Theme: Ant Design allows theme customization, so light and dark themes can be integrated, and the preferred theme mode customized.
Icons: It offers a variety of icons from the @ant-design/icons package.
Navigation Menus: The library includes React components for navigation, like Menus and Sidebars.
Data Visualization: Ant Design provides data visualization components like Charts and Graphs, accessible from the @ant-design/charts package.
Date Pickers and Calendar: It also provides customizable date pickers, time pickers, and calendars.
Popovers and Tooltips: It offers popups and tooltips that show context-sensitive information.

Use Cases

So, when would you actually use Ant Design for a project? Well, it's particularly great if you're building enterprise-level applications, especially ones that involve a lot of complex data. Think projects that need intricate data tables, well-organized form layouts, or even organization charts. It has components to solve a lot of common problems in this space. Also, consider Ant Design if you're going for an elegant and professional look for your application. Ant Design's style takes cues from Chinese design principles, giving it a distinct feel. Finally, Ant Design is useful if you need to support multiple languages or ensure type safety. Ant Design has built-in internationalization features, making it easier to cater to a global audience.

In essence, Ant Design is a go-to when you need a robust, polished, and scalable solution for complex applications, especially in the enterprise domain.

Benefits:

Customization: Ant Design allows theming and customization, giving you customization control over typography, style, and colors to fit your preferred design.
Accessibility: It follows accessibility best practices, allowing you to build for all types of users.
Form Controls: It has robust form validation that helps simplify form validation logic.
Community Support: The library has a large and active community of developers who are maintaining, contributing, and improving the library. There are also articles to help you as you build.
Enterprise-Grade: It is designed and built with enterprise applications in mind and provides a well-designed and professional look for your enterprise or business applications.

Ant Design remains a strong choice for developers focused on enterprise-level applications, offering a rich set of components, excellent internationalization support, and a professional design aesthetic.

Chakra UI

https://chakra-ui.com/

Chakra UI is a modular and accessible React component library that provides the building blocks needed to construct React applications. It is designed to be simple, flexible, and extensible. Chakra UI has over 34.7k stars on GitHub.

Chakra UI offers a range of components, including buttons, forms, tables, and charts. It allows React developers to efficiently create newer components. In Chakra UI, the components are customizable, reusable, and adhere to the WAI-ARIA standards.

Key Features:

Style Props: Chakra UI uses style props to style components.
Icons: It provides a collection of icons from the @chakra-ui/icons package.
Form Controls: Chakra UI also provides components like Textarea, Input, and Checkbox that have built-in validations and form controls like isDisabled and isInvalid.
Notification: Chakra UI has notification components like Toast and Alert that display state notification messages to users.
Theme: Chakra UI is dark mode compatible by default.

Use Cases

So, when would you actually use Chakra UI for a project? Well, it's particularly great if you're focused on building accessible React applications. Also, consider Chakra UI if you're interested in building modular and reusable React components. Furthermore, Chakra UI is useful when creating custom React themes. Finally, Chakra UI is a good choice for building React applications with a consistent look and feel.

In essence, Chakra UI is a go-to when you prioritize accessibility, modularity, and theming in your React projects.

Benefits:

Simplicity: Chakra UI is simple to use and understand, reducing the learning curve and allowing developers to focus on development.
Accessibility: Chakra UI is built with accessibility in mind. Chakra UI components meet WAI-ARIA standards, making apps easily accessible.
Theme: Chakra UI is dark mode compatible by default. The theme color can be adjusted.
Customization: All component styles can be overridden or extended via style props. Components, including colors and spacing, are easily customizable.
Documentation: The documentation is comprehensive and well-written, with usage guidelines and examples.
Developer Community: It has an active and growing community of developers. Aside from the core team, approximately 100 developers are actively contributing to the project, so there are sure to be resources and improvements in the library.
Important UI Components: Chakra UI provides customizable React components for web projects including buttons, menus, modals, and forms. Variations serve different purposes.
Seamless Form Integrations: Chakra UI’s form components work well with React Hook Form, Formik, and Final Form. This makes forms adaptable and accessible.
Coding Collaboration Tools: Chakra UI Figma design kits ensure design-to-code fidelity between designers and developers.
Lightweight and Reusable Logic: Built-in performance measures, such as automated code splitting, reduce bundle sizes. Composable component architecture maximizes logic reuse across an application.

Chakra UI is a strong choice for developers focused on modularity, accessibility, and ease of use, offering a blend of comprehensive components, excellent documentation, and a growing community.

Headless UI

https://headlessui.com/

Headless UI is a React component library that provides a set of unstyled UI components that can be used to build custom UI components. This makes it a good choice for developers who want to have full control over the look and feel of their UI. Headless UI has over 22.5k stars on GitHub.

Key Features:

Unstyled components: The components in Headless UI are unstyled, which means that there is full control over their appearance. This makes it easy to create custom UI components that match the design of the application.
Accessible: All of the components in Headless UI are built to be accessible, so you can be sure that your applications will be accessible to users with disabilities.
Well-documented: Headless UI is well-documented, with clear and concise examples for each component. This makes it easy to learn how to use the library and to start building custom UI components right away.
Tailwind CSS Integration: Headless UI seamlessly integrates with Tailwind CSS for rapid styling and customization.

Use Cases

So, when would you actually use Headless UI for a project? Well, it's particularly great if you're focused on building custom UI components and want to have full control over the look and feel of your UI. Also, consider Headless UI if you're interested in building complex UI components, breaking them down into smaller, more manageable pieces.

In essence, Headless UI is a go-to for React projects where complete customization, accessibility, and performance are top priorities

Mantine

https://mantine.dev/

Mantine is a fully functional React UI library that has over 100 customizable components and 50 hooks that can be used to build React web applications. It is also open-source and TypeScript-supported. Mantine has over 21.9k stars on GitHub.

Key Features:

Theme engine: Mantine provides a powerful theme engine that allows easy customization of the look and feel of an application. The theme engine is also extensible, allowing the creation of custom themes.
Hooks library: Mantine provides hooks that can be used to manage state and side effects in React applications. Mantine hooks are designed to be easy to use and to work well with other React libraries.
Customize components: Every Mantine component supports visual customizations with props, which facilitates quick prototyping and experimentation by modifying component props.
Styles overriding: Each Mantine component supports styles overriding for every internal element inside with classes or inline styles. This feature, alongside other customization options, allows implementation of any visual modifications to components and adapts them to fit almost any design requirements.
Flexible theming: The default theme can be extended with any amount of additional colors, and properties such as shadows, radius, spacing, and fonts can be replaced to match design requirements.
Components: Mantine offers various UI components, from basic components like buttons and input fields to complete components like modals and notifications.
Animations and Transitions: Mantine has built-in support for smooth animations and transitions for a better user experience.
Icons: This library supports icon libraries like react-icons, font awesome, and radix icons.

Use Cases

Here's a more conversational take on Mantine's use cases, without bullet points:

So, when would you actually use Mantine for a project? It's a great fit when you need to focus on customizing the appearance and behavior of components using theme and context providers. Also, Mantine is useful when integrating with popular libraries like react-hook-form, react-query, and react-table. Furthermore, consider Mantine when building complex layouts and interactions with its hooks and utilities. Finally, Mantine can be helpful when you're developing and testing components in isolation with Mantine/Prism.

In essence, Mantine is a go-to when you need a highly customizable and integratable React UI library for a wide range of development tasks.

Benefits:

Developer Experience: Mantine provides a good developer experience as the documentation is written well and arranged orderly for easy navigation. It is also easy to learn and use so that beginners can use it without hassle.
Customization: Developers can customize the typography and themes and adjust stylings to their needs.
Community Support: With a growing and active developer community, Mantine is well-maintained and updated.
Accessibility: This is also a priority for Mantine; all components are built to be fully accessible so that developers can build applications for all types of users.

Mantine is a strong choice for developers looking for a fully functional, customizable, and accessible React UI library with a wide range of components and hooks.

HeroUI (previously NextUI)

https://www.heroui.com/

HeroUI is a React component library that provides pre-built components designed for speed, accessibility and being lightweight. It is built on React and Tailwind CSS. Next UI has over 16.3k stars on GitHub.

Key Features:

Custom themes: HeroUI provides a custom TailwindCSS plugin that allows customization of the default themes or creation of custom themes.
Accessibility: HeroUI components are built on top of React Aria ensuring accessibility support.
Dark mode: HeroUI comes with a default dark theme that can be applied by adding the dark attribute to the HTML.
Easy customizations: HeroUI simplifies component slots customization while avoiding Tailwind class conflicts.
Theme : HeroUI has a default dark theme, and you can define themes, color schemes, and styles according to your project.
Lazy Loading : Many HeroUI components support lazy loading, which can help improve your app’s performance by loading components and assets only when needed.
Internationalization Support : HeroUI includes internationalization support, making creating multilingual applications for a global user base easier.
Form Validation : Form components in HeroUI come with built-in form validations, helping to simplify the process of handling form validation logic.
Animations and Transition : HeroUI components often include animations and transition support for smooth and clean UI interactions. It uses Framer Motion to animate some components due to the complexity of the animations.

Use Cases

HeroUI is a good choice when you want to utilize the React component model and hooks to manage the state and behavior of your UI elements. HeroUI can be used for building web applications that need to be supported in both dark and light mode. Also, consider HeroUI when building web applications that need to be translated into multiple languages. Finally, HeroUI is useful because it is compatible with React, Vue, and Angular frameworks, and supports TypeScript and Sass.

In essence, HeroUI is a go-to when you need a versatile, themable, and accessible React UI library for a variety of web application needs.

Benefits:

Accessibility : HeroUI components are built on top of React Aria and follow WAI-ARIA guidelines to ensure accessibility support.
Customization : HeroUI allows easy customization for themes, typography, and styles, allowing for unique and beautiful UI designs.
Developer Experience : HeroUI offers a user-friendly and intuitive API for beginner and advanced developers. The documentation also provides a thorough explanation with examples of using and configuring the library.
Reusable Components : HeroUI provides a comprehensive set of reusable UI components that can be easily integrated into your React application, reducing development time.
Community : The community is active and growing. The library is actively maintained, bugs are fixed, and new features are regularly introduced and added.

HeroUI is a strong choice for developers looking for a fully-featured, accessible, and customizable React UI library, especially when working with Next.js and requiring server-side rendering.

Semantic UI React

https://react.semantic-ui.com/

Semantic UI React is a React component library that implements the Semantic UI CSS framework. It provides pre-built components ready for use in production. As of the article's writing, Semantic UI React has over 13.1k stars on GitHub.

Key Features:

Semantic HTML: Semantic UI React is built around semantic HTML, meaning components are named and structured to easily understand their purpose.
Accessibility: Semantic UI React is committed to accessibility, with all components designed to meet Web Content Accessibility Guidelines (WCAG) standards.
Theming: Semantic UI React provides built-in theming support, allowing customization of the look and feel of your application.
Extensibility: Semantic UI React is extensible, so you can create custom components and themes.
Auto Controlled State : Components with states self-manage their states out-of-the-box, without wiring, so you don’t need to write the state logic explicitly, as it is handled automatically.
Shorthand props : Semantic UI React uses shorthand props to generate markups. For instance, icon props can accept string names, can be object props, or an <Icon /> instance.
Augmentation : A component can be rendered as another component using the as props.

Use Cases

Semantic UI React is particularly useful when you're focused on building accessible React applications or when you need your React applications to have a consistent look and feel. It's also a good choice if you plan on creating custom React components and themes. Furthermore, Semantic UI React is helpful when you're building React applications that need to be translated into multiple languages or integrated with third-party libraries and services.

Benefits:

Semantic HTML
Accessibility
Theming: Semantic UI React offers theme support and allows you to customize the layout and styles.
Community Support: Semantic UI React has an active community, so you will always find tutorials, third-party extensions, bug fixes, and answers to your questions and challenges.
Developer Experience: Semantic UI React is easy to use, and the documentation is also easy to work around and locate the things you need.

Semantic UI React appears to focus on providing a balance between ease of use, customization, and adherence to web standards, making it a solid choice for a variety of React projects.

Grommet

https://v2.grommet.io/

Grommet UI is a React component library that provides a comprehensive collection of accessible, reusable, and responsive components that can be used to build modern web applications. It is designed with a focus on accessibility, performance, and usability. As of the article's writing, Grommet has over 8.4k GitHub stars.

Key Features:

Theming: Grommet UI provides a powerful theming system that allows easy customization of the look and feel of your application. It has built-in themes that you can choose from, allowing you to customize it with your preferred color scheme.
Styling: Grommet UI components are styled with CSS-in-JS, which gives you full control over the appearance of your application.
Accessibility: Grommet UI is committed to accessibility, and all of its components are designed to meet the Web Content Accessibility Guidelines (WCAG) standards. Accessibility is also a top priority, and it follows the web accessibility standard for its components. This allows you to build applications for all users.
Responsiveness: Grommet is built with responsive design in mind so your application works well on multiple screen sizes. It is a mobile-first UI library that approaches design to ensure that it is responsive on mobile devices.
Form Validation: The text inputs come with validation features, reducing the task of writing your validation logic.
Animation and Transition: Grommet supports animation and transitions, allowing you to create smooth and user-interactive user interfaces.

Use Cases

Consider Grommet when you want to create responsive and accessible web applications that follow the WAI-ARIA guidelines and support keyboard navigation, screen reader, and typeahead. Also, Grommet is useful when you need to import individual components without heavy dependencies and want to customize those components. Furthermore, Grommet works well when you plan to use React component model and hooks to manage UI behavior. Finally, Grommet is a good choice for building web applications that need to support multiple languages.

Semantic UI React: Semantic UI React is particularly useful when you're focused on building accessible React applications or when you need your React applications to have a consistent look and feel. It's also a good choice if you plan on creating custom React components and themes. Furthermore, Semantic UI React is helpful when you're building

Benefits:

Responsiveness: Grommet is designed to be responsive out-of-the-box, making your application look good on various screen sizes.
Accessibility: This benefits both the developer and the global user base.
Developer Experience: The developer's experience is good as it is easy to use and understand.
Community Support: Grommet has an active community, and the documentation is updated as new features are added/introduced.

Grommet is known for its focus on usability, theming, and extensive intuitive components. It is a part design system and part framework.

Here's a more conversational take on Grommet's use cases, without bullet points:

Grommet is a solid choice when you need a responsive, accessible, and themable React UI library with good community support.

Shadcn UI

https://ui.shadcn.com/

Shadcn UI is a rapidly growing component library that leverages Tailwind CSS and Radix UI for styling. It offers a fresh approach to building user interfaces with a focus on simplicity, speed, and accessibility. Instead of installing a package, Shadcn UI takes a copy-and-paste approach and allows you to copy the code for any document directly into your project. As of the article’s writing, Shadcn UI has over 66k stars on GitHub.

Key Features:

Themes and Theme Editor: It provides a robust theme editor that allows you to easily customize colors, border radius, and other visual elements to match your brand identity or project requirements.
Light and Dark Mode: Shadcn UI supports light and dark mode out of the box. You can use this feature to integrate theme toggling functionality into your application.
Supports Tailwind CSS: It is built on top of Tailwind CSS and benefits from Tailwind’s utility-first approach. This means you can quickly create custom styles without writing extensive CSS code.
Edit in v0: This feature allows you to open a Shadcn UI component in the v0 app and adjust the component via prompts.

Use cases

Shadcn UI is useful when building user interfaces with a focus on simplicity, speed, and accessibility. It is also helpful when creating unique and branded user interfaces that match a project's and brand's requirements, because of the freedom of customization offered by the theme editor and integration with Tailwind CSS. Consider Shadcn UI for projects where you want component ownership, giving you more control and direct access to the components’ code. Furthermore, Shadcn UI is a good choice for building responsive, professional web applications. It is also helpful for creating custom styles that can offer consistent components across a project.

Shadcn UI is suitable for projects where you want highly customizable components, full control over your codebase, and a streamlined development process leveraging Tailwind CSS.

Benefits:

Tailored Designs: The theme editor and its integration with Tailwind CSS provide greater freedom for customizations. It allows you to create unique and branded user interfaces that match your project’s and brand’s requirements.
Component Ownership: Shadcn UI gives you more control and ownership over its components by giving you direct access to the components’ code. With this approach, every component you use will live directly in your codebase.
Beautifully designed components that you can copy and paste into your apps.
Tools for theming and a simple setup process.
Flexible architecture enables developers to create custom styles that can offer consistent components across the project.

Shadcn UI distinguishes itself through its copy-and-paste approach, integration with Tailwind CSS, and focus on customization and component ownership.

There are varying perspectives on Shadcn UI within the React community. Some argue that Shadcn UI isn't a component library, but rather a collection of reusable components. Others highlight that by copying components into your app, you establish a foundation for your own component library and gain complete control over the component's functionality and styling.

React Aria

https://react-spectrum.adobe.com/react-aria/

React Aria is a library of React Hooks that provides accessible UI primitives for your design system. As of January 2025, Adobe's React Aria has matured into a full-fledged component library, offering advanced accessibility and customization options for complex UI patterns.

Key Features:

Offers over 40 components with built-in behavior, adaptive interactions, accessibility, and internationalization, ready for custom styles.
Provides an excellent user experience, notably with functions such as screen reader assistance, keyboard controls, focus handling, language translations, and additional features.
Provides accessible components out of the box and utilizes ARIA attributes and roles.

Use Cases

React Aria is useful when you need accessible UI primitives for your design system. It is also helpful to consider when you need components with built-in behavior, adaptive interactions, accessibility, and internationalization, ready for custom styles. Furthermore, consider React Aria when aiming for an excellent user experience, notably with functions such as screen reader assistance, keyboard controls, focus handling, language translations, and additional features. It's also helpful to consider when you want accessible components out of the box that utilize ARIA attributes and roles.

React Aria is suitable for projects where you prioritize accessibility, customization, and meeting the needs of modern web applications.

Benefits:

Offers over 40 components with built-in behavior, adaptive interactions, accessibility, and internationalization, ready for custom styles.
Provides an excellent user experience, notably with functions such as screen reader assistance, keyboard controls, focus handling, language translations, and additional features.
Provides accessible components out of the box that utilize ARIA attributes and roles.
Prioritizes accessibility from the ground up, helping developers build inclusive applications that cater to users with disabilities.
Evolves to meet the needs of modern web applications by focusing on accessibility, performance, and developer experience.
ARIA attributes are useful for Stylish and Greasemonkey because it's the only semantic way to target specific tags.

React Aria prioritizes accessibility from the ground up, helping developers build inclusive applications that cater to users with disabilities. By focusing on accessibility, performance, and developer experience, React Aria evolves to meet the needs of modern web applications.

In the React community, there is the perspective that React Aria, with Tailwind CSS, makes ARIA attributes useful for Stylish and Greasemonkey because it's the only semantic way to target specific tags.

Base UI

https://base-ui.com/

Base UI is known for providing unstyled, accessible components. It's designed to be a starting point for custom designs.

Key Features:

Unstyled, accessible components
Tree-shakeable architecture for optimized bundle sizes
Flexible styling options (works with CSS Modules, Tailwind, or any CSS-in-JS solution)
Built-in portal system for complex components like modals and popovers
TypeScript support out of the box

Use Cases

Base UI is useful when providing unstyled, accessible components. It is also helpful as a starting point for custom designs. Furthermore, Base UI is helpful because of its tree-shakeable architecture for optimized bundle sizes and its flexible styling options (works with CSS Modules, Tailwind, or any CSS-in-JS solution). In addition, Base UI has a built-in portal system for complex components like modals and popovers and supports TypeScript out of the box.

Key Benefits:

Offers unstyled, accessible components.
Has a tree-shakeable architecture for optimized bundle sizes.
Offers flexible styling options, making it compatible with CSS Modules, Tailwind, or any CSS-in-JS solution.
Includes a built-in portal system for complex components such as modals and popovers.
Provides TypeScript support out of the box.

Base UI is relatively new and designed to be a starting point for custom designs.

Other Notable Libraries

When to use a React component library

Using React component libraries can be a compelling choice for developers because they offer numerous advantages. However, the decision to use a component library should be based on the project and its specific requirements.

When to consider using a React component library:

Implementing common UI patterns React component libraries provide pre-built UI components that implement common UI patterns, saving developers time and effort.
Ensuring consistency Component libraries help ensure a consistent look and feel across projects, which is especially beneficial for large teams working on multiple projects.
Needing a Beautiful UI UI libraries include nicely designed, ready-to-use components as application building blocks.
Reducing development costs Using pre-built components can reduce overall development costs.
Increasing productivity Component libraries save time and effort, allowing developers to focus on more complex aspects of applications.
Reducing risk Well-tested and maintained libraries reduce the risk of introducing bugs.
When Lacking Design Knowledge: If you have an intuitive design idea but lack design knowledge, component libraries allow the creation of stunning layouts and rich user experiences.
Building administrative panels Component libraries can help create functional and understandable user interfaces, and implement standard back-office apps.
Having aligned interest projects: It is important to ensure that all project participants are on the same page. Discuss the library’s benefits and downsides after the designer and client agree on the library and before proceeding. Start by explaining library functions to handle client expectations.
For rapid prototyping UI component libraries allow faster prototyping because implementation is faster. They help build user interfaces and test functionality with minimal resources.

However, there are potential challenges to consider:

Misunderstanding the library's philosophy Each UI component has its ideology, which you must comprehend to implement it properly.
Inconsistent use Developers must utilize React UI component libraries consistently to learn how they function. Switching component libraries takes time.
Predetermined choices React UI library selection for your projects must be flexible, as some libraries may not suit all projects.

In conclusion, React UI component libraries are essential tools, offering a wide array of pre-built and customizable components that can significantly enhance development speed, ensure design consistency, and improve the overall user experience.

Choosing the right library is a ****critical decision that should align with the specific requirements, design goals, and technical constraints of your project. Factors to consider include project needs, longevity, learning curve, customizability, community support, documentation, and performance.

The rise of headless UI libraries offers developers greater flexibility and control over styling, with libraries like Radix UI and Headless UI gaining popularity. Accessibility has become a key focus, with many libraries now incorporating built-in accessibility features to ensure applications are usable by everyone.

AI integration and innovative approaches like Shadcn UI's copy-and-paste component code are emerging trends, further streamlining development and customization. While each library offers its unique strengths, the ultimate choice depends on the project's specific needs and priorities.

See you next time!

Luca

How to validate your Next.js API with Zod and Typescript

Luca Restagno — Tue, 03 Dec 2024 21:09:13 +0000

Next.js is a popular React framework known for building end-to-end web applications. It enables developers to manage both the front-end and back-end of a project within a unified codebase, simplifying development and maintenance.

When building web APIs, input validation becomes crucial because your routes may be consumed by various clients. These clients could range from the React UI you’re developing to external systems accessing your public APIs. Ensuring that your API only processes valid data is important for maintaining security and reliability, especially when inputs come from sources beyond your control.

Zod is a popular library in the JavaScript and TypeScript ecosystem for schema validation. It offers an intuitive and expressive API, allowing you to define the structure (or schema) of your data and enforce validation rules. Zod is widely integrated with other tools and libraries, such as react-hook-form for form handling, tRPC for building type-safe APIs, and zod-to-json-schema for generating JSON Schema definitions, making it a versatile choice for developers.

Why Validate API Inputs?

Input validation is important for enhancing the reliability and security of your software. It helps safeguard your application by preventing common vulnerabilities like injection attacks, cross-site scripting (XSS), and denial-of-service (DoS) exploits.

Beyond security, validation also prevents application errors caused by invalid or unsupported data. Without proper checks, your API might encounter unexpected values or incorrect types, leading to runtime errors, application crashes, or unpredictable behavior. Ensuring only valid data reaches your code minimizes these risks and keeps your application running smoothly.

How can I use Zod?

The key features of Zod are schema declaration, parsing, and type inference. Let’s see how to use Zod and how to leverage them.

Let’s start by installing zod into your project.

npm install zod

With Zod we can create the schema definition of an object, like this one:

import { z } from 'zod';

const userSchema = z.object({
  name: z.string().min(1, 'Name is required'),
  email: z.string().email('Invalid email format'),
  age: z.number().int().gte(18, 'Must be 18 or older'),
});

This code defines the schema of an object with a mandatory name property, a valid email address, and a numeric integer value age, greater than or equals to 18.

With Zod you can also define the error message when the value provided doesn’t satisfy the conditions.

Now that we have a schema definition, let’s parse an object to validate it.

const user = {
    name: 'Luca',
    email: 'hey@shipped.club',
    age: 38
}

const validatedUser = userSchema.parse(user)

If the object provided is not correct, .parse() throws an error.

If you want to avoid throwing an error, you can use .safeParse() that returns an object instead:

userSchema.safeParse(12);
// => { success: false; error: ZodError }

userSchema.safeParse(user);
// => { success: true; data: { ...user } }

Finally, you can infer the TypeScript types from your schema!

type User = z.infer<typeof userSchema>;

How to use Zod in my Next.js App Route

Now, let’s create a Next.js API POST route that receives a body payload that we want to validate.

export async function POST(request: NextRequest) {
  try {
    // Parse the request body
    const body = await request.json();
    const data = userSchema.parse(body);

    // Business logic here (e.g., save to database)
    return NextResponse.json(
      { message: 'Registration successful', data },
      { status: 200 }
    );
  } catch (error) {
    if (error instanceof z.ZodError) {
      // Return validation errors
      return NextResponse.json(
        { message: 'Validation error', errors: error.errors },
        { status: 400 }
      );
    }

    // Handle unexpected errors
    return NextResponse.json(
      { message: 'Something went wrong', error: error.message },
      { status: 500 }
    );
  }
}

This POST method receives a JSON payload, it reads and parses it through the Zod schema that we defined.

If the validation succeeds, we can process the data, otherwise we return a validation error.

This way we can ensure that our business logic uses only valid data.

Zod works particularly well with Next.js, because you can define the Schema for the data expected on the API routes, and reuse the same schema and types when you need to build the same object on the frontend, to perform the request.

Here’s an example of a React component that sends a POST request, using userSchema to validate the values provided by the user in a form.

import React, { useState } from 'react';

// import the schema and inferred type created with Zod
// 👇👇👇
import { userSchema, type User } from '../schemas/userSchema';

const RegisterForm: React.FC = () => {
  const [formData, setFormData] = useState<User>({
    name: '',
    email: '',
    age: 18, // Default age
  });

  const [error, setError] = useState<string | null>(null);
  const [success, setSuccess] = useState<string | null>(null);

  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const { name, value } = e.target;

    // Update state dynamically based on input name
    setFormData((prev) => ({
      ...prev,
      [name]: name === 'age' ? Number(value) : value,
    }));
  };

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();

    try {
      // Validate the form data using the Zod schema
      // 👇👇👇
      userSchema.parse(formData);

      // Send the POST request
      const response = await fetch('/api/register', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify(formData),
      });

      if (response.ok) {
        setSuccess('Registration successful!');
        setError(null);
      } else {
        const errorResponse = await response.json();
        setError(errorResponse.message || 'Failed to register');
        setSuccess(null);
      }
    } catch (err: any) {
      if (err.errors) {
        // get all errors from Zod, and concatenate them in a string
        setError(err.errors.map((error: any) => error.message).join(', '));
      } else {
        setError('An unexpected error occurred');
      }
      setSuccess(null);
    }
  };

  return (
    <div>
      <h1>Register</h1>
      {error && <p style={{ color: 'red' }}>{error}</p>}
      {success && <p style={{ color: 'green' }}>{success}</p>}
      <form onSubmit={handleSubmit}>
        <div>
          <label>
            Name:
            <input
              type="text"
              name="name"
              value={formData.name}
              onChange={handleChange}
            />
          </label>
        </div>
        <div>
          <label>
            Email:
            <input
              type="email"
              name="email"
              value={formData.email}
              onChange={handleChange}
            />
          </label>
        </div>
        <div>
          <label>
            Age:
            <input
              type="number"
              name="age"
              value={formData.age}
              onChange={handleChange}
            />
          </label>
        </div>
        <button type="submit">Submit</button>
      </form>
    </div>
  );
};

export default RegisterForm;

To test your validation, you can use cURL in the terminal or Postman if you prefer to use a user interface.

With cURL:

curl -X POST http://localhost:3000/api/register \
-H "Content-Type: application/json" \
-d '{"name": "Luca", "email": "hey@shipped.club", "age": 38}'

Conclusions

I encourage you to use Zod extensively in your codebase, and to use it to define your types whenever you need validation or when you expose an interface to another client of your architecture, like a private or public API.

Zod is extremely useful and expressive, it allows you to define complex data types and validation rules. You can read the full documentation on GitHub.

I hope this article was useful, and helped you level up your coding skills.

Cheers,
Luca

How I Solved Common Prisma ORM Errors: Debugging Tips and Best Practices

Luca Restagno — Sun, 01 Dec 2024 12:23:47 +0000

The Prisma ORM is a powerful companion for every software engineer, indie maker, and SaaS founder who wants to add type safety to the queries executed on the database.

I have been using Prisma for the last 2 years, and I have experience on troubleshooting different type of errors.

In this article, I want to share it with you, so you don’t have to spend hours figuring out what I’ve already learned.

Why Prisma?

I have been using Prisma for all my SaaS products. So far, I’ve built six SaaS products, and I hope to build more in the future (some of them are BlackTwist, Wuf, Userdesk, Inboxs, Hivoe).

And the Prisma ORM is also part of the SaaS Boilerplate I’ve built, called Shipped.club.

The reason is simple, I want you to leverage the tools I have experience on, so that I can help the customers in the private Discord community, that’s available after the purchase.

The key goals of using Prisma are:

keep under control your database schema
- define tables and types
- apply migrations
- query your database with type safety
- avoid typing errors
protect from SQL injection
leverage pooling

Common issues

Despite being a stable product, sometimes you can encounter some issues.

Below I describe two common errors:

migration errors
query errors

Let’s start with the first one

Error with data migrations

Sometimes your migrations emit an error, that’s not very simple to debug, like this one.

Error: ERROR: prepared statement "s2" does not exist

You usually get this error when you run npx prisma db push (apply your schema changes to the database) or npx prisma generate (generate the types from your schema).

But what this means?

This error happens when using a relational database, like PostgreSQL (one of the most popular, and advanced open-source SQL databases on the market).

Specifically, a prepared statement in PostgreSQL is a feature that allows you to execute a query plan that is prepared and stored by the database server for reuse. It improves performance and security, especially when executing the same query multiple times with different parameter values.

Prisma ORM leverages the prepared statements as part of its database query execution process, under the hood (but you don’t have to know or master prepared statements to use Prisma).

The main issues arise with the confusion between the different database connections string configurations, pooling and PgBouncer.

Let me go straight to the solution, then I explain you the different parts.

The main solution I’ve found is to use two connection strings, one to run the migrations and the second for the execution of your web application / node.js server.

First, identify the correct connection strings for your database.

The connection string to run the migrations is the direct access to the database (no pooling or PgBouncer), like for instance

postgresql://username:password@host:5432/dbname

Save this connection string as an environment variable called DATABASE_DIRECT_URL.

DATABASE_DIRECT_URL="postgresql://username:password@host:5432/dbname"

Add it to your local .env file and to your hosting service (Vercel, Netlify, Render, and so on).

Secondly, get the connection string with the pool, for instance:

postgresql://user:password@host:post/poolName

Get this connection string from your database hosting provider, the parameters might be different.

Save this connection string as an environment variables called DATABASE_URL.

DATABASE_URL="postgresql://user:password@host:post/poolName"

Add it to your local .env file and to your hosting service (Vercel, Netlify, Render, and so on).

The second step is to update the Prisma configuration to use these two environment variables.

Open the file schema.prisma and update the section datasource db to include this:

datasource db {
  provider  = "postgresql"
  url       = env("DATABASE_URL")
  directUrl = env("DATABASE_DIRECT_URL")
}

Now, run the usual commands like npx prisma db push and npx prisma generate locally to ensure that everything is working correctly, and run your application locally.

If all is good, push the modifications to your hosting service and trigger a new deployment for the modifications to take effect.

Prisma is now correctly configured and you should not have the same issue again.

Query performance issues

Recently, I got the "stack depth limit exceeded" error message.

PrismaClientUnknownRequestError: Invalid `prisma.table.findMany()` invocation: Error occurred during query execution: ConnectorError(ConnectorError { user_facing_error: None, kind: QueryError(PostgresError { code: "54001", message: "stack depth limit exceeded", severity: "ERROR", detail: None, column: None, hint: Some("Increase the configuration parameter \"max_stack_depth\" (currently 2048kB), after ensuring the platform's stack depth limit is adequate.") }), transient: false })

This means that the usage of memory exceeds the database configuration for a specific query.

I ran this SQL command on my database and found this value:

SHOW max_stack_depth;
---
2MB

I had a query that was returning 1900+ records to aggregate some values.

For each record I have to recalculate the sum of certain values.

When this happens you have two options:

increase the max_stack_depth value in your database
refactor the logic in the code to avoid to run that big query
optimize the query

I tried to increase max_stack_depth because it was the quickest solution (not the best one), but my database is hosted on DigitalOcean and I didn’t have the permissions to run the ALTER command:

ALTER SYSTEM SET max_stack_depth = '4MB';
---
permission denied to set parameter "max_stack_depth"

(I contacted DigitalOcean via a support ticket and they promptly provided a solution, I can alter the value using their web API).

Then, I started to analyze the problem.

The first thing I tried was to run the same query as plain SQL against the database using pgAdmin, and it perfectly worked.

This was suspicious, it means that probably Prisma was executing a query too complex and expensive.

Then, I refactored the code, using the Prisma method $queryRaw to run the same query, and it worked!

At this point, I didn’t want to manually define all the type for the values returned by the query, and I thought of using a new cool feature of Prisma called TypedSQL.

This way I can run a Raw Query against the database with the types automatically generated by Prisma for me.

So, in the end, I refactored to code, and avoided to increase the value max_stack_depth that would have increased the memory consumption in general.

Conclusion

I hope that this article was useful, and it avoids you from spending hours on troubleshooting these kind of errors with Prisma.

Overall my experience with the tool has been very good and exciting, and I see how they are releasing new versions, features and improvements.

You can find the documentation of Prisma at this link.

As a side note, I’m not affiliated with Prisma in any way, I’m just a happy user of the product.

Cheers,

Luca

How to protect your Next.js Routes with reCAPTCHA

Luca Restagno — Sun, 26 May 2024 06:58:04 +0000

Protecting the public endpoints of your web app, is one of the most important tasks you could do.

Even if you don’t expect much traffic on your websites, malicious attempts can always happen.

It happened to me when I launched a waitlist website, I didn’t expect many eyes to visit the page, but someone noticed the /api/waitlist endpoint, I used to collect the email of the interested users, and they started to call it repeatedly.

One of the easiest mitigations is to add a captcha challenge to the web user interface.

There are different types of captchas, and they have evolved quite a lot over the last few years.

Usually, they are visual quizzes or simple puzzles (called challenges) to solve to unlock a feature on a website.

This is an example, select all square images with traffic lights.

Robots can’t solve these puzzles, therefore the backend request doesn’t start.

But how can you protect your backend with a puzzle solved on the frontend?

How Captcha Protection Works

This is how it works.

When the puzzle is successfully solved, the captcha service delivers a token (a string).

This token is unique for the puzzle resolution of a user, and you need to send it to your backend.

In your backend, you need to validate the token, by calling the captcha service backend.

In this article, I show you how you can implement a captcha protection using on the most famous service reCAPTCHA by Google and your Next.js website.

reCAPTCHA by Google has been improved over time, and the latest version of it, version 3, doesn’t require every user to solve the challenge is the proprietary algorithm of Google doesn’t recognize a suspect client.

Which is a great news for our real users!

Create a reCAPTCHA

First of all, create a reCAPTCHA. Visit the website https://www.google.com/recaptcha/about/ and access the v3 Admin Console.

Once in, click on the “+” plus icon to create a new reCAPTCHA.

Add the label and the domain of your website.

You can select v3 (score based) or v2.

v2 always asks for a challenge, while v3 asks for a challenge only if the user score, automatically calculated, is not high. I select v3.

Click on Submit.

Now Google gives you the Site Key and the Secret Key. Copy them in a secure place.

Now let’s create two environment variables.

Usually you have a .env file for your local development and you need to set them on your hosting solution, like Vercel.

NEXT_PUBLIC_RECAPTCHA_SITE_KEY="you_site_key"
RECAPTCHA_SECRET_KEY="your_secret_key"

Notice that one environment variables is prefixed with NEXT_PUBLIC_ while the other not.

NEXT_PUBLIC_RECAPTCHA_SITE_KEY is accessible from the frontend, and therefore it’s publicly visible, while RECAPTCHA_SECRET_KEY will be accessible only by the backend code, and therefore no one can read the value.

Create your client component

Now, let’s create a Next.js client component with an input field and a button.

For a waitlist it would look like this one:

<input 
    placeholder="your@email.com"
    onChange={e => setEmail(e.target.value)}
/>
<button
        onClick={onAddToWaitlist}
>
    Join the waitlist
</button>

Now, we need to implement onAddToWaitlist so that it calls the reCAPTCHA service.

To integrate reCAPTCHA you need to integrate the Google JavaScript script.

Open your layout.tsx file (if you are using the App Router) and add this

<script
    defer
  type="text/javascript"
  src={`https://www.google.com/recaptcha/api.js?render=${process.env.NEXT_PUBLIC_RECAPTCHA_SITE_KEY}`}
/>

At this point, the JavaScript object grecaptcha will be globally available in our web app.

Let’s implement onAddToWaitlist

const onAddToWaitlist = () => {
    // @ts-ignore
    grecaptcha.ready(function () {
      // @ts-ignore
      grecaptcha
        .execute(process.env.NEXT_PUBLIC_RECAPTCHA_SITE_KEY, {
          action: "submit",
        })
        .then(function (token: string) {
          if (email) {
            axios
              .post("/api/waitlist", {
                email,
                captchaToken: token,
              })
              .then(() => {
                                // success
              })
              .catch((err) => {
                  // error
              })
          }
        });
    });
  };

I used axios because it’s comfortable to use, but you can use fetch as well.

Protect your API route

At this point, we are only missing the backend api route (src/app/api/waitlist/route.ts)

import axios, { HttpStatusCode } from "axios";
import { NextResponse } from "next/server";
import qs from "qs";

export async function POST(req: Request) {
  const body = await req.json();
  const email = body.email;
  const captchaToken = body.captchaToken;

  if (!captchaToken) {
    return NextResponse.json(
      { error: "Unauthorized" },
      { status: HttpStatusCode.Unauthorized }
    );
  }

  if (!email) {
    return NextResponse.json(
      { error: "Email is required" },
      { status: HttpStatusCode.BadRequest }
    );
  }

  const options = {
    method: "POST",
    headers: { "content-type": "application/x-www-form-urlencoded" },
    data: qs.stringify({
      secret: process.env.RECAPTCHA_SECRET_KEY,
      response: captchaToken,
    }),
    url: "https://www.google.com/recaptcha/api/siteverify",
  };

  const response = await axios(options);

  if (response.data.success === false) {
    return NextResponse.json(
      { error: "Unauthorized" },
      { status: HttpStatusCode.Unauthorized }
    );
  }

  // the captcha token is valid
}

Conclusion

Captchas are one of the most effective ways to protect a website, and the easiest solution to implement.

The captcha service from Google has improved a lot lately, and it doesn’t always require to solve a challenge to our users, which is perfect to provide them a great user experience.

I hope this was useful.

Cheers

6 Profitable Micro SaaS Ideas in 2024

Luca Restagno — Fri, 24 May 2024 12:50:07 +0000

The term MicroSaaS refers to a category of software-as-a-service (SaaS) businesses that target a narrow, niche market with specialized software solutions.

Some of the key characteristics that define a MicroSaaS are:

Niche Focus: MicroSaaS businesses typically address a specific problem or serve a specialized segment of users within a larger industry. This focus allows them to meet the needs of a particular customer base very effectively.
Small Team or Solo Founder: Unlike larger SaaS companies, MicroSaaS businesses often operate with very small teams, sometimes just a solo founder. This lean operation helps keep costs low while maximizing flexibility and responsiveness to customer needs.
Low Overhead: Due to the small team size and niche focus, MicroSaaS companies generally have low operational costs. They often use existing platforms and technologies to reduce the need for heavy infrastructure investment.
Subscription Model: Like other SaaS businesses, MicroSaaS companies typically rely on a subscription-based revenue model, where users pay a recurring fee to use the software.
Automated and Efficient: These businesses strive to be highly automated, minimizing manual processes and relying on digital tools to manage customer relations, billing, and service delivery.
Global Reach: Despite their small size, MicroSaaS businesses often serve a global customer base, enabled by the internet and cloud computing technologies that allow them to reach customers anywhere.

Due to its characteristics, MicroSaaS products perfectly fit the needs of professionals who want to get started with entrepreneurship, even on the side of a full-time job.

In this article, I describe the most interesting MicroSaaS product ideas, already validated on the market, and that you can use to start making money online.

1. SEO Indexer

SEO is one of the most important distribution channels for companies. They invest a ton of money to create content, that needs to be indexed by Google, to be served in the search results to the queries of the users.

A popular technique to create content in a relatively amount of time is programmatic SEO (pSEO).

Programmatic SEO is a strategy that involves using software and automation to generate a large number of pages optimized for search engines, typically targeting long-tail keywords. This approach is especially useful for websites that have the potential to rank for numerous search queries due to the breadth of topics they cover, such as e-commerce sites, travel booking sites, or any service with a wide range of products or offerings.

The problem that companies face, is that Google takes time to index all the pages, and this process can easily take weeks, if not months, even if the new pages are present in the sitemap of the website.

Google allows you to manually submit the pages via the Google Search Console, but there’s a limit of 20 pages per day.

This process is time-consuming and can be automated via the Google APIs.

You can build a MicroSaaS that asks for a sitemap of a website, and periodically submits the new pages to Google until they are all indexed.

2. SEO Keywords Research

Content creation is the key activity of SEO. Companies create huge amounts of content to satisfy the search intent of the users on the search engines, and drive traffic to their websites.

creating the right content and targeting the right keywords requires a certain amount of analytics, which is called keyword research.

The key information needed by companies are keywords related to specific topics, the amount of traffic, and the difficulty of ranking.

There are some very established products in the market like ahrefs or SEMrush, but they are quite expensive, and keyword research is a critical aspect for companies.

Google provides an API to retrieve this information, the Ads Targeting Idea Service and Traffic Estimator Service.

These properties make SEO Keyword search MicroSaaS one of the most interesting product ideas.

3. Social Animations

Social media platforms are one of the most common channels used by professionals, creators, agencies, and SaaS owners, to find potential customers for their businesses.

These platforms show a feed of content, and everyone needs to compete with the others for the attention of the users.

And as you can imagine, nothing works better than an eye-catching video.

For instance, the platform X (former Twitter) increases the reach of the content, based on the amount of time people spend looking at it. If you publish a post with text and a video, the latter will catch the attention of people scrolling through the feed, and later they will read the text of the post.

The MicroSaaS idea consists of a platform to easily and quickly generate video animations, video predefined templates for different situations and celebrations like:

new number of follower milestone
new launch on Product Hunt
new revenues milestone
and so on

Save people’s time and increase their content reach via video animations.

The fact that the output of your MicroSaaS is video, shared on social media platforms, will create a product-led growth mechanism. People will notice the video, ask for the source of it, and discover your product.

4. Screenshots Maker

Like videos, screenshots are the most common and used media on social media (and not only).

Make it super easy for your customers to create stunning screenshots in seconds, ready to be shared on social media.

Think of your product as a mini-Canva, specialized only in screenshots, and with the minimum amount of features needed.

Like the social videos, screenshots will drive product-led growth. People will notice the screenshots, ask for the source of it, and discover your product.

5. Form Builder

This is one of the most simple and underrated product ideas possible.

Form Builders are a must for people that need to collect information only, just by sharing the link of a form previously configured.

The most common product is Typeform, but the market is so big, that there’s space for new players.

Build an alternative version, cheaper, but functional.

Also, this product has product-led growth. Simply allow users to create a limited number of forms for free, and add the logo of your company (Built with CompanyName).

People will notice it, and they will probably try out your product soon.

6. Text-to-video

AI is an incredibly powerful technology, we all know the capabilities of AI to generate text and even images.

But the new frontier is the creation of videos.

Creating videos requires time and skills. People need to know how to use complex software like Adobe After Effects and similar.

Creating videos is hard.

Text-to-video technologies are becoming more and more powerful, with results that improve from one month to the next.

This product idea is interesting because it solves a painful problem, and there are a few competitors in the market, giving you the possibility to be one of the first players to offer such a solution.

Conclusions

I hope that this article gave you some good hints to get started with your MicroSaaS, and some key elements to determine what makes a good product.

If you want to ship your product very quickly, you might be interested in my Next.js Startup Boilerplate — Shipped.club — 200+ devs are already shipping faster using it.

Query string params in Next.js (14) with App Router

Luca Restagno — Tue, 30 Apr 2024 07:10:02 +0000

The query string is a part of the URL (Uniform Resource Locator) that assigns values to specific parameters.

While developing our web apps, we might use query string values to dynamically render a part of the user interface with specific parameters.

For instance, I provide a shareable link with the Timezone Checker web app, including the user configuration.

https://timezonechecker.app/embed?timeFormat=24h&timezones=Europe/London,Europe/Nicosia&Europe/Rome=luca&Europe/London=lars,erik,john

The query string parameters and values are (parameter=value):

timeFormat=24h
timezones=Europe/London,Europe/Nicosia
Europe/Rome=luca
Europe/London=lars,erik,john

In Next.js with App Router, there are different components: client components, pages, layouts, and routes.
Let’s see how we can read the query strings in each one of those.

Client components

In a client component you can use the React Hooks useSearchParams to return a read only version of the URLSearchParams JavaScript interface.

'use client'

import { useSearchParams } from 'next/navigation'

export default function SearchBar() {
  const searchParams = useSearchParams()

  const timeFormat = searchParams.get('timeFormat')

  // URL -> `/embed?timeFormat=24h`
  // `timeFormat` -> '24h'
  return <>Time format: {timeFormat}</>
}

You can use the URLSearchParams method has() to determine if a query string param is present or not.

URL	searchParams.has(”timeFormat”)
/embed	false
/embed?timeFormat=24h	true

The URLSearchParams interface has other read-only methods, like getAll(), keys(), values(), entries(), forEach(), and toString().

Pages

In pages, you can use the searchParams prop to access the query string params.

In this case, an object is returned.


export default function EmbedPage({ searchParams }) {
  // URL -> `/embed?timeFormat=24h`
  // searchParams['timeFormat'] -> '24h'
  return <>Time format: {searchParams['timeFormat']}</>
}

Routes

In routes (backend endpoints), you can access the URLSearchParams interface this way:


import { NextRequest, NextResponse } from "next/server";

export async function GET(req: NextRequest) {

    // URL -> `/api/embed?timeFormat=24h`

  const timeFormat = req.nextUrl.searchParams.get("timeFormat")

  return NextResponse.json(
    { timeFormat },
    { status: 200 }
  );
}

Layouts

In layouts, you cannot access the query string params. Instead, access them from the pages or client components, rendered inside the layout.

Conclusion

Query strings are the comfortable way to save and transmit data into the URL, to allow the users to easily share configurations via the URL, and send data from the client to the server.

I've sold my 4th SaaS as a solopreneur. The backstory.

Luca Restagno — Thu, 04 Apr 2024 12:30:46 +0000

I have great news, I sold my 4th SaaS product!

Userdesk, it’s an AI Chatbot platform for businesses I launched in June 2023 with a pre-launch and a subscription-based model a few weeks later.

This is my 4th exit since 2021.

2021 — I sold Iterspace pre-revenues (quite unusual, but it happened)
2023 — I sold Hivoe and Inboxs, two Twitter-related SaaS
2024 — I sold Userdesk

Each time, the context and the reasons to sell were completely different, as well as the process. Let’s see the context and the lessons learned with each one (so you can learn from them too).

iterspace

I started working on Iterspace in 2019 with one of my former colleagues (designer). I built it on the side of my full-time job at that time, as a team lead / senior software engineer. We worked on it for a couple of years, more or less. During the COVID, I was working from home and the time I saved from commuting, was dedicated to it.

At the beginning of 2021, we launched on Product Hunt, we got 70 upvotes (not that much but we didn’t have any distribution channel at that time), but Giulio Michelon noticed it, he wanted to meet us (two Italians launching a cool SaaS? it’s quite unusual), and he connected us with the final buyer.

I have to say that we didn’t set clear goals since the beginning. I wanted to make a living out of my businesses, but for my co-founder that was not realistic.

So when the possibility of selling arrived, he was completely convinced of the decision.

That was my first exit ever, and the amount of money was astonishing for a product with no revenues, so I accepted the deal.

The product hand-off was quite painful, as I created all the cloud resources on AWS with my personal account, and it was not possible to migrate them to another account (weird). So they had to re-create the whole infrastructure with their AWS account, and it took some time.

From the next SaaS on, I learned to create accounts with dedicated email, so the hand-off takes as long as sending the credentials to the buyer. And that’s it.

Hivoe & Inboxs

Very quickly, I had to sell these two Twitter-related products, due to the crazy new Twitter API pricing (from 0 to $42k/month). Thankfully, I was able to sell them to HypeFury, because the alternative was to shut down both of them—not a great deal.

The journey has been amazing, because since 2021 I started being active on Twitter daily, and that’s how I discovered some pain points related to DM management. The products were growing quite well (up to $4k MRR). It was shocking to sell them, especially for an unexpected reason.

Lesson learned: platform risk is real. Next time, I want to diversify more or avoid platform risk much more.

Userdesk

There’s much more to say about the exit of Userdesk.

I started working on Userdesk after the crazy hype I’ve seen about AI Chatbots around February / March 2023. AI was even more hyped than now, and as a SaaS owner, the value provided was simply incredible.

The platform allows you to “train” an AI Chatbot using your website (and other sources) and embed a live AI chatbot on your website. Simple, yet so powerful for customer support.

I pre-launched it with a $69 lifetime deal, and I sold 20 licenses in 24 hours. That was a validation for me (but I was wrong). A month later, the product was live and public, but a very small percentage of the pre-sale users signed up and used it.

I was perplexed.

This is my explanation. At that time, I already had a good reputation on Twitter / X. This sometimes brings to impulsive purchase from people who follows and appreciates you. This is great, don’t get me wrong, but it leads to misleading validation results.

Also, the product was poorly positioned, it was not targeting a specific niche and I didn’t know exactly who I was targeting: SaaS products, IT agencies looking for AI Chatbot platforms to resell, coaching services, and many others very different from each other.

This is a problem. I didn’t know how to write the copy of my landing pages, which content to write for my blog, and so on.

At the same time, a large number of competitors were already present and arrived in the short future.

Plus, in the end, I didn’t feel a great founder product fit. I have built a community on Twitter/X of 20k followers, and almost nobody was in overlap with the target audience of Userdesk. This meant an extra effort for me to find new clients.

In December 2023 I launched my Next.js SaaS Boilerplate Shipped.club, and I loved working on it, and helping other developers and aspiring SaaS owners to achieve their goals. This fits much better with my expertise and values—it’s simply a better fit for me.

Lesson learned: founder product fit matters much more than I expected.

What did go well?

I loved working with AI tech, and I think it has huge potential, now and in the future. It’s not a bubble. And who knows, maybe in the future I will work on an AI product again.

I found my customers mainly from AI directories. A lot of AI enthusiasts use them to discover new products, and it also brought a good domain rate, with very few blog posts written.

One of the main differentiation factors of Userdesk over the competition had been the UI and UX. Many people told me it was the best they tried between similar products, and it made me proud of the skills I’ve built over time. I am a software engineer, not a designer, but I’ve built many SaaS products now and the effort on the UI and UX paid off.

MRR-wise, the journey had been quite slow, but still brought good results, $1.1k MRR it’s difficult to achieve in less than 12 months.

If you’re wondering what’s the big spike in September, it’s an enterprise customer ($500/month) who subscribed. The fact the subscription plans start at $19/month up, it’s another explanation for the “rapid” increase in MRR.

I know I could have grown it much more with more marketing effort: positioning, content, social—but I still think I did the right thing with selling it, and I’ll focus more on Shipped.club and other SaaS products soon.

What’s the legal process for selling?
I used the platform Acquired for the first time to list my product. I got around 20 people potentially interested, and a couple of offers.

The process is: when you find a good offer, you sign a Letter of Intent between you and the buyer. It blocks you from accepting offers from other potential buyers.
In this period they do the due diligence on your product, you need to describe the technical aspects of your product and the business. And you can still negotiate on the final price.

If this phase goes well and everyone is happy, you sign an Asset Purchase Agreement (APA) which is a contract that finalizes the exchange of assets of your product between you and the buyer, and it sets the payment method, amount, and date.

When you sign the APA, you’re done with the deal. The remaining part is the hand-off of the assets.

I hope this article was helpful and inspiring, even if a bit long.

If you have any questions, drop me a message.

How I generated $15k revenues in <4 months

Luca Restagno — Wed, 20 Mar 2024 14:40:50 +0000

If you follow me on Twitter/X or Threads you know that I’m a strong believer in the build in public philosophy.

It’s a way of building products in public, which means sharing the ups and downs, the experiments done, the struggles and wins, and also being open about the revenues.
Recently, Shipped.club hit a new revenue milestone, $15k total revenues, and 126 customers since the 4th of December 2023 (the original launch date).

And I want to share with you what I did to get here.

Who I am and my background.

I am Luca, senior software engineer by profession. I started building products on the side of my 9-5 job in 2019.

I’ve followed the usual (wrong) path of engineers when approaching product building.

I spent two years working on it, launched it on Product Hunt in 2021, and got no interest.

That’s when I realized that a good product is not enough to get attention and customers, you need marketing.

I started being active on Twitter and never abandoned that habit.

In 2022 I launched my second SaaS product, a tool for Twitter. I spotted some interesting usages of the platform, especially related to Direct Messages.

The product was a real success. Fast forward to June 2023: $3k MRR in 1.5 years.

In 2022 I also decided to start doing build in public on Twitter. Over time I created relationships with people with a similar mindset, and people active on Twitter as well (other entrepreneurs, aspiring ones, developers searching for more freedom, and so on).

Again, fast forward to today, I have built a community of 21k people on Twitter.

Why did I launch a SaaS Boilerplate?

After shipping 6 other SaaS products, I have solved all the issues of building and launching a SaaS.

Landing pages that sell, waitlist, pre-sales, sign up, collect payments, affiliate programs, integrate email services, UI kits for fast development, blog, and more.

So creating a boilerplate was a no-brainer decision for me.

I already copied and pasted the code of my previous SaaS products to create a new one, so why not make it available to others as well?

The boilerplate is a huge time saver, you don’t need to spend time on figuring things out, and you already get components well-designed for you, in short, you don’t have to reinvent the wheel, it’s already sorted out for you.

Why is this product working for me?

I think the are some reasons why this product is working quite well for me.

First of all, I love coding and building products. What I provide is of great quality.

I always loved helping people, that’s my characteristic. Building a new feature or solving a bug to unlock the job of others, is so rewarding.

That’s also why I provide a private Discord community to all the customers, I want to help them even after the purchase and create a community of like-minded people. They also help each other. It’s simply amazing.

Lastly, I know the developer’s world (most of the customers are software engineers) and I know their mindset and needs, so it’s easier for me to come up with blog posts and tool ideas to serve them even better.

So far I’ve created blog posts on how to use Schema.org, how to track errors with Sentry, the best VS Code themes and fonts, but also how to become a Micro SaaS founder on the side of a 9-5 job, and 10 lessons learned to earn $137k+ revenues.

Which are my distribution channels?

As you can imagine, Twitter plays a big role. Most of the traffic and customers are coming from there.

But I also get interested people from other sources. I do build in public, and I share my milestones. It means that I have some exposure and I was included in some newsletters, which brought customers. Shipped was also mentioned in a video by a YouTube influencer, which led to additional purchases.

I've also tried paid ads in December, but they didn't work well. There are no quick wins in marketing. I suppose you need to spend more time (and money) to fine-tune your ad messaging, even if you have product Market Fit.

Provide value for free

A great way to generate interest in your product is to provide value for free.
You may ask, how? Here’s an example.

I’ve written a free guide on How to build and launch a Micro SaaS in 7 days using Notion, and I launched it on Twitter with a giveaway.
The interest was so intense, that I decided to convert it into a free email course, that I added to the website of Shipped. Actually, I’m using a trick. I show a pop-up whenever the user is going to leave the website (exit intent). The free course is so appealing that they enter their email and use the course (one email per day, for 7 days).

I hope this was useful to you all.
See you at the next update for the 200 customers milestone (I hope soon!).

23 Best VS Code Themes in 2024

Luca Restagno — Wed, 06 Mar 2024 10:01:10 +0000

Visual Studio Code (VS Code) is an open-source code editor developed by Microsoft.

It has been my favorite code editor since 2018, while previously I was using Sublime Text.

The set of features of VS Code and the deep integration with TypeScript (from Microsoft too) made it my favorite and daily choice.

I can confirm that is currently broadly adopted by the community of frontend developers (React, Vue, Angular, but not only).

The different story is for the backend developers, who usually prefer IntelliJ products.

Considering VS Code is the editor we use daily, we want to select the best theme possible for some reasons:

nice color scheme (aesthetics is important)
improve the readability of the code
reduce eye strain
increase productivity

Follows a selection of 23 themes, some of them very popular, others not that much.

Scroll the list until the end, you never know when you can find the theme you’ll fall in love with.

I won’t tell you which is my favorite theme to avoid influencing you 🙂

Before the list, let’s discover how to install a new theme on VS Code.

How to install a theme in VS Code

Open the Extension tab (Shift + Cmd + X)
Type the theme name
Click on Install
Select and Set the Color Theme

Let’s get started with the themes.

Themes

1. One Dark Pro

Installs: 8,878,463

Widely used theme, which is the Atom’s dark theme with a black background.

2. Dracula Official

Installs: 6,678,172

One of the most popular themes in the development space.

3. GitHub Theme Dark

Installs: 11,813,086

4. GitHub Theme Light

Installs: 11,813,086

Light variant of the GitHub website theme.

5. Winter Is Coming

Installs: 2,707,566

This theme mixes pleasant and high-contrast colors, with font styles, like italics.

6. Night Owl

Installs: 2,443,039

This theme has a dark blue background, with contrasting text colors. It has a light variant called Light Owl.

7. Monokai Pro

Installs: 2,711,098

One of the most known themes (I remember using it with Sublime Text).

It’s made of three main colors, dark red, yellow and light blue.

8. One Monokai

Installs: 2,117,317

This theme is a spin-off of Monokai Pro.

9. Shades of Purple

Installs: 1,756,519

If you like purple, you’ll love this theme.

10. Ayu

Installs: 2,331,017

Highly contrasted theme with pleasant text colours, orange, green, and light blue.

11. Palenight

Installs: 639,141

This theme is on the shades of purple, but not as heavily purple as Shades of Purple.

12. Cobalt2

Installs: 1,436,181

Super high contrast theme, with almost fluorescent colors.

13. SynthWave '84

Installs: 1,743,153

Iconic theme if you like the 80s and the synthwave style.

14. Noctis

Installs: 1,004,008

Theme designed on the shades of green.

15. Panda

Installs: 928,562

If you like pandas and the Japanese world, you’ll love Panda.

16. Nord

Installs: 905,995

The theme Nord wasn’t to bring you the colors or a nordic landscape into your code editor.

Soft and cold colors are making this theme very stylish.

17. Sublime Material

Installs: 821,819

18. Slack Theme

Installs: 395,047

If you want to keep using the Slack theme in your code editor, this is the perfect theme for you.

It comes in many variants.

19. Tokyo Night

Installs: 1,359,936

Popular theme that reminds me of movies like Ghost in the Shell. So stylish.

20. Rouge

Installs: 34,931

VSCode theme created for a dark, material feel with a flushed color palette. Inspiration was drawn from Atom's Material.

21. Poimandres

Installs: 52,108

Poimandres is a minimal, frameless dark-theme inspired mostly by blueberry. This theme tries to focus on semantic meaning instead of color variety. You'll find that it colors things like errors, voids, throws and deletes in red, types are slighty darker so that the spotlight is on the code, green new's, etc.

22. Flate

Installs: 15,435

Colorful and dark theme. I love the contrast between the syntax keywords like import and from and the variables names.

23. Bluloco Dark

Installs: 337,834

A fancy but yet sophisticated dark designer color scheme / theme for Visual Studio Code.

This theme features a much more comprehensive usage of syntax scopes and color consistency, with due regard to aesthetics, contrast, and readability. Originally forked from the beautiful One Dark Theme, enhanced with the meaningful intuitive Bluloco color palette.

Conclusion

That’s all for this sequence of great themes for Visual Studio Code.

If you liked them, or you want to suggest more themes, feel free to reach out to me via email or on Twitter/X.

How to become a Micro SaaS founder on the side of a 9-5 job

Luca Restagno — Fri, 01 Mar 2024 16:56:51 +0000

Starting an entrepreneurial journey is not easy.

I started my journey as a solopreneur back in 2021, on the side of a 9-5 job to escape the rat race.

And I truly believe that’s the best way to start it, the reason is simple: it takes a lot of time to start making money and understand how marketing works.

Most software engineers think that a great product is enough to succeed. Well, let me tell you that it is not the truth. But let’s go in order.

The software engineer's product bias

We are all tempted to think, that if the product is cool, people will come and pay for it.

Our product references are products like Facebook, WhatsApp, Instagram, Google, etc.

But their growth model is very different than ours. They were not bootstrapped but VC-funded.

They received so much money to conquer the world, and even with all that money, most of the startups just failed. It’s a different game. We, as bootstrapped solopreneurs, play a different game.

What is a bootstrapped company?

It’s simply a company that doesn’t take any funding money, no external money from angel investors, Venture Capital, and so on. The founders use their own money to run the business and reinvest the revenues into the business.

Here’s how I suggest you start your own online business, like a Micro SaaS, or any other digital product: start with the problem to solve.

The more painful is the problem, the better. The customers need to think, “I need this product to save me and my company time or money” (they are both linked anyway).

Once you identify the problem, it’s the right moment to start building the product.

Organize your time

Most people I know are amazed when they discover I am a solopreneur on the side of a 9-5 job.

I was able to achieve quite some good results (6 SaaS, sold 3 of them) while working as a senior software engineer and team lead for different companies.

But let’s give you the exact daily schedule I use:

I wake up around 7/7:30 AM (I’m not an early bird, I can’t wake up before, I tried, but it’s not for me)
I do some house stuff, like preparing breakfast for the family and so on
I work out a bit, (usually push-ups)
At 8 AM I’m in front of my desk, I work for an hour on my stuff (coding my products, or scheduling posts on X and engaging)
At 9 AM I start working for my employer, until 1 PM, launch break of 1 hour, employer work until 6 PM
The evening is usually dedicated to personal time, I watch some TV series or go out for dinner. I rarely work.
During the weekend I might do something, or not, but I never overwork. I try to keep a good work-life balance because I want to do this in the long term and avoid burning out at all costs.

That’s it, do this every day, and your effort will compound over time to build something bigger.

You don’t need morning routines, to wake up at 5 AM, or any other fancy technique.

Do just a little bit every day.

Of course, I work from home, and I don’t have commuting time.

Having a 9-5 removes from you the money pressure, the pressure to make money to pay the bills. And you can reinvest part of your salary into your businesses (sponsorships, paid ads, consultancies, etc.).

This is what I was able to achieve by being consistent:

Between 2019 and 2021, I built the SaaS iterspace.com and sold it.
In 2021 I started building an audience on Twitter talking about web development (by the way, grab the free 200+ slides about JavaScript, React, CSS if you haven’t already).
In 2022 I started building hivoe.com in public, a Twitter DM automation micro SaaS, and inboxs.io, a Twitter DM productivity inbox micro SaaS (I sold both of them in 2023)
In 2023 I built OmniWrite an AI writing Chrome extension, Userdesk an AI Chatbots platform for businesses, Wuf a mobile push notifications Micro SaaS, and launched Shipped.club, the Next.js Micro SaaS Boilerplate for busy founders.

I strongly suggest that everyone start indie hacking on the side, it’s the most sustainable and stress-free way of approaching it.

Also because there’s a lot to learn, and it takes time.

My tech stack

Over the years I’ve consolidated my tech stack into something optimized for speed.

Here’s what I use, so you can steal it and use it as well:

React great UI library based on reusable components, I’m so quick building web app using React
ChakraUI is one of the best open source Design Systems and UI kits for React. I get many components from it and responsive props.
Next.js is a full-stack framework for React based on node.js (JavaScript). It makes it so easy to build full-stack apps, with client and server code in one single codebase.
Vercel I host my web apps using Vercel. You push your commit to your GitHub repo, and they deploy it. It’s that simple.
NextAuth authentication made finally easy, for Next.js
PostgreSQL is my favorite open-source SQL database

I hope you find this information useful, and if you have any questions, please write to me on Twitter/X or via email 🙌

Luca

How to track errors with Sentry and Next.js

Luca Restagno — Mon, 29 Jan 2024 11:43:14 +0000

Sentry is one of the most popular error-tracking platforms for software products.

It tracks the errors that occur in your software, showing you the error message and relevant information about the execution context (like browser, language, screen size, and so on).

In this tutorial, will see in detail how to install Sentry into your Next.js app and start collecting remote errors in a few minutes.

Install Sentry

Create an account on Sentry.

Once done, you’ll be guided to install it in your project.

Click on Start for the Install Sentry suggestion.

Depending on your language and framework, you’ll get different instructions.

Filter the platforms with Next.js select it from the list, and click on Configure SDK

Once done, you’ll get the instructions to install Sentry in your Next.js project.

Open the terminal and go to the folder of your Next.js project and simply run the command provided by Sentry:



npx @sentry/wizard@latest -i nextjs

At this point, follow the instructions in the terminal.

The Sentry Next.js Wizard will guide you through the installation.

If you have uncommitted changes in your repository, it will ask you if you want to continue, I selected Yes.

Then it asks you to use the Sentry SaaS or a self-hosted Sentry. Since I want to use their cloud solution, I selected Sentry SaaS.

It asks if you already have an account or not chose your case.

I had an account, so it redirected me to the browser, where it retrieved my Sentry account (I was already logged in). You can close this browser window when it’s done.

At this point, the Sentry Next.js Wizard installs the files needed by Next.js to correctly collect the errors, both on the client and on the server.

It creates some files:

sentry.server.config.ts
sentry.client.config.ts
sentry.edge.config.ts
src/pages/_error.jsx
.sentryclirc

It also updates the file next.config.js with the Sentry configuration.

It also asks to create two sample pages (recommended), one for client side error testing and one for server side error testing.

These two files simply throws exceptions, so that you can test if the Sentry integration is correctly installed.

Finally, you need to add the environment variable SENTRY_AUTH_TOKEN to your CI setup (Vercel, GitHub Actions, Jenkins, and others). The wizard will provide you with the value to set.

Test the Sentry installation

If you accepted the creation of the sample pages (which I recommend) it’s time to test the installation.

Run your local web server:



npm run dev

And point your browser to these URLs:

http://localhost:3000/sentry-example-page click “Throw error!”

In both cases you will see and error in the browser, and that’s expected.

Now open the Sentry dashboard, if the installation is correct, you’ll see two new errors.

Congratulations, you’re now able to intercept the remote errors of your Next.js website.