From Todo App to B2B SaaS with Next.js and Clerk

Rate this content
Bookmark

If you’re like me, you probably have a million side-project ideas, some that could even make you money as a micro SaaS, or could turn out to be the next billion dollar startup. But how do you know which ones? How do you go from an idea into a functioning product that can be put into the hands of paying customers without quitting your job and sinking all of your time and investment into it? How can your solo side-projects compete with applications built by enormous teams and large enterprise companies?


Building rich SaaS products comes with technical challenges like infrastructure, scaling, availability, security, and complicated subsystems like auth and payments. This is why it’s often the already established tech giants who can reasonably build and operate products like that. However, a new generation of devtools are enabling us developers to easily build complete solutions that take advantage of the best cloud infrastructure available, and offer an experience that allows you to rapidly iterate on your ideas for a low cost of $0. They take all the technical challenges of building and operating software products away from you so that you only have to spend your time building the features that your users want, giving you a reasonable chance to compete against the market by staying incredibly agile and responsive to the needs of users.


In this 3 hour workshop you will start with a simple task management application built with React and Next.js and turn it into a scalable and fully functioning SaaS product by integrating a scalable database (PlanetScale), multi-tenant authentication (Clerk), and subscription based payments (Stripe). You will also learn how the principles of agile software development and domain driven design can help you build products quickly and cost-efficiently, and compete with existing solutions.

This workshop has been presented at React Summit US 2023, check out the latest edition of this React Conference.

FAQ

To add multi-tenancy features using Clerk, you can utilize the organization switcher component to manage different organizations or teams within the application. You'll need to enable organizations in the Clerk dashboard under settings and integrate relevant Clerk components into your app.

Multi-tenancy refers to a software architecture where a single instance of software serves multiple groups of users, each group known as a tenant. Each tenant's data is isolated and remains invisible to other tenants.

In Clerk, user sessions and metadata can be managed through Clerk's dashboard and APIs. Developers can customize session tokens to include specific metadata, which aids in tracking user states and managing user-specific data securely.

To implement payment functionality with Stripe, you need to create a Stripe session for checkout, configure webhook endpoints to handle events from Stripe, and use Stripe's API to manage payment flows and subscription details.

Stripe is used for handling payments in web applications. It allows developers to integrate payment processing capabilities, manage subscriptions, and handle secure transactions within their applications.

Clerk provides robust user management features including authentication, user profile management, and multi-tenancy support. It simplifies the process of adding sign-in, sign-up, and user profile functionalities to web applications, enhancing security and user experience.

Dev Agrawal
Dev Agrawal
153 min
09 Nov, 2023

Comments

Sign in or register to post your comment.
Video Summary and Transcription
The workshop focuses on building a basic Todo application and transforming it into a fully functioning SaaS product using modern developer tools. Dev tools like Next.js, Vercel, Clerc, PlanetScale, and Stripe are used to simplify the development process. The workshop covers topics such as fixing issues, adding interactivity and database integration, implementing authentication and payment, customizing Clerk components, adding premium payment plans with Stripe integration, and implementing multi-tenancy features. Participants are encouraged to provide feedback and share their projects built with Clerk.

1. Introduction to the Workshop

Short description:

Thank you all for being here. The workshop is called From a TodoApp to a B2B SaaS Application. We're going to start with a very basic Next.js app that is a Todo application. And by the end of this workshop, we want to get to a fully functioning SaaS product that we can deploy and have users for. Throughout our time as software developers, we often have ideas or projects that face friction when trying to build a working piece of software. The adjacent concerns, such as deployment, databases, authentication, and payments, often get in the way. However, there is a new generation of developer tooling that is changing this. These tools take advantage of the cloud, are reliable and scalable, and optimize for developer experience.

Thank you all for being here. Let me quickly get my screen shared so that we can get this party started. The workshop is called From a TodoApp to a B2B SaaS Application. Oh, what's happening there? Cool. Let me make sure I have the chat here. Obviously there's a QR code here, but we can't really use QR codes. Not the best choice for over the wire or, like, on Zoom. Let me copy and paste this link for the workshop starter kit, or the workshop starter repo here in the chat.

So basically the idea of the workshop is that we're going to start with a very basic Next.js app that is a Todo application. It doesn't even work. It's a nonfunctioning Todo application. And by the end of this workshop, we want to get to a fully functioning SaaS product that we can deploy and we can have users for, even thousands or millions of users for. That's the idea that we want to get for today's workshop. Again, it's a really hands on workshop. I highly encourage that you guys follow along. And the best way to follow along is through the starter repo. And before the starter repo, make sure you have these things installed. Obviously, if you've done any sort of JavaScript React development before, you probably already have Git and node.js installed. But what would be really useful is to have Stripe CLI installed. I'm also going, I can quickly show what the repo looks like. Looks something like this. Let me actually check if you can see this. Yeah. So, this is the GitHub repo that you should be able to see from Todo app to B2B SaaS. And this shows you how to clone it, CD into it, and then. So, I'm specifically just going to be using BUN sometimes. It's just a replacement for npm. So, whenever you see something like BUN install, or if you see me typing BUN dev or BUN run a script, just we can just replace that with npm. I might actually just do it with npm. And really just make sure that you can go over to the services that we are going to be using throughout this workshop, and you can make an account there. And the most important part is that make sure you have the Stripe CLI installed, because we're going to be using the Stripe CLI a bit throughout, once or twice throughout this workshop. Now before we really get into the hands-on part, and at this point I'm going to switch slides. So, just make sure that you have the repo opened up, you have everything that you need, or you can start installing and setting up the repo on the side. While I quickly give a little introduction about myself. I am dev. That's my name. I am a dev as well. I have been writing full stack JavaScript applications for about seven years now, and currently I work as a developer advocate at Clerc, which is a sponsor of React Summit, and Clerc is a user management solution for React, as we are going to get into soon in this workshop. And before we really get into, like, the hands-on part, I want to get the point of what we are trying to achieve today across. So have you ever, as a software developer, ever have those moments when someone approaches with ideas of a new application? Or, like, let's say, hey, Kanban boards really suck. I want something simpler. Or I want a simpler way to do project management. Or if you have your own ideas of what a better travel planning application could look like, or you are already on your way to even building a startup out of your idea, or maybe even you've hired a team and secured a bit of funding, and well on your way to changing the world with the best task management application the world has seen, or the next generation decentralized social media platform, or fresh out of San Francisco, this is how AI will change your life product. Basically, the idea is, have you ever had, like, a lot of these big application ideas that you wish would exist and that you kind of want to build? How many of these ideas go to production? What about a prototype? What about just a demo? Maybe something we hack together over the weekend, maybe something we get with friends for the weekend, or maybe we are going to hackathons, and there we are trying to build some stuff. So what I want you to, what I want everyone to kind of think about is, throughout our time as a software developer, how many times has that happened? When we have ideas, or we have, or maybe we even have projects, we have startups, but then there's this kind of inevitable friction that comes in whenever we are trying to push this forward and build a working piece of software out of it. Because as we move from the ideation phase on the left to a working software phase on the right, there's a lot of things like, okay, where do I deploy this? How do I deploy this? I need to get a database, do I need Docker? People are talking about Lambdas. Everyone's going back to Postgres. How do I add Authon to this? I just hacked a dashboard together. I don't want to build user profiles, organization invites, integrate with email services, make sure everything is secure. You're also probably going to be storing some sensitive data. And if you ever want to charge your users, how do you manage payments? Are you going to deal with credit card numbers now? We heard of something called Stripe. How does that even work? So these are kind of the ideas of what goes into this red section, which is the adjacent concerns. These are not really things that are related to the idea, the thing that you really want to build, but these things inevitably get in the way. And they start taking up more and more of our effort, of our engineering effort, and that's what really makes this going from idea to working applications, a painful process. And this is why you often see, or we often see, large teams, large companies that already have a bunch of resources, a bunch of engineering expert, a bunch of existing infrastructure. And because they have all of that, they can just spin up a new thing and start a new application, start a new project. And that's why we have big companies that constantly try new things. And they constantly stay in the market because they're constantly experimenting with new ideas with their existing infrastructure. This is also why it doesn't really work for small teams. Like if me and my friend were to get together and build something, realistically, what kind of an application can we really build before we now have to hire a bunch of more people to take care of these adjacent concerns so that we can turn it into a real business? And these are things that often prevent us from going all the way with our ideas and building real applications. But what I'm here to talk about today is how that has changed, or at least how that's changing. Because there is a new generation of developer tooling that is making this possible. These tools have some very unique characteristics. First of all, they take complete advantage of what the cloud has to offer, which means they are reliable, they are scalable, and they are cheap. So you are not worried about infrastructure. The second thing is that these tools optimize for developer experience, which means the goal is to give us as software developers powerful capabilities with actually good developer experience. So you have the full power and all of these complex infrastructure and systems prebuilt for you. But not only do they give you capabilities, you can just integrate with them seamlessly and just continue working on your core competency. Your core competency is the app that you're trying to build. It's your travel planning app, it's your AI app, it's your next-gen project management app.

2. Introduction to Dev Tools and Setup

Short description:

The new generation of dev tools takes away the effort and mental space dedicated to adjacent concerns, allowing teams to focus on their core competency. With these tools, small teams can build and operate applications serving thousands or millions of users. Excuses like lack of knowledge or scalability concerns are no longer valid. In this workshop, we will build a SaaS application using Next.js, Vercel, Clerc, PlanetScale, and Stripe. Let's get started by cloning the GitHub repository and installing the dependencies.

That's your core competency that you want to be building, not dealing with Kubernetes, these YAML files or webpack configurations or these REST APIs with horrible documentation. Spend 10 minutes on it and you're done, and you're never thinking about auth or vulnerabilities or compliance or bot attacks ever again. That's the kind of mindset that these tools can put us in. And I see people are still flowing in. Thank you everyone for attending. GitHub repo that we've shown here. It's also linked in the chat. You can sign up an account for these. And also just make sure you have node.js and you have the Stripe CLI installed.

All right, so what happens with the new generation of dev tools is they actually take away the effort and the mental space that we have to dedicate to these adjacent concerns. This means really the only thing you're ever thinking about is your core competency. It's your idea here, it's the stuff in the green. So what that means is that teams don't need to be huge. You don't need to have a lot of existing infrastructure to get started, build real applications with these set of tools. You can just have a small team of three to five people or even 10 people, 20 people that can build and operate and support a piece of software, an application that is potentially serving thousands or millions of users. And that's a completely realistic expectation to have with these tools because that's what a lot of people are doing today. Again, the mindset that this puts us in is that what I like to call it is no more excuses. Is that when I have a solid idea that I think is going to really work or that I want to experiment with, I don't have these excuses of, okay, I don't really know databases or I know this is never going to scale, I can never make it scale, or I can never make this secure enough. If this is an AI application that I'm building, maybe I'm too scared of bots. Maybe I'm too scared of bots coming, going into, abusing your services for free credits. But, these are not excuses that I have anymore because these tools, this completely take that away from me. So that's what we are going to be doing today. Let's build a SaaS application with these tools. We are going to use Next.js as our framework, we're going to use Vercel as the host. We're going to use Clerc for user management and auth. We're going to use PlanetScale for database and we're going to use Stripe for all our payments flow. And, really, that's all I have for slides today. And, at this point, we can just jump into the hands-on part.

All right, so what we have here is this is the GitHub repository. Okay, I have questions. Will I need a Stripe and PlanetScale account? You will definitely need a Stripe account. The PlanetScale step, if you want to, we are starting with a SQLite database, so if you want to stick to that for the duration of the workshop, you can do that. But once we get to the PlanetScale step, in this workshop, I will go over the step of actually creating the account. So you don't have to necessarily create all these accounts right now. Right now, what's more important is that you can clone the repository and then you can run NPM install and then all the repositories should be, all the dependencies should be available for you. You will need a Stripe account because we are integrating payments and you can have a PlanetScale account if you want to connect with live databases. All right, so while the dependencies are finished installing, let's build a little bit of familiarity with this codebase. So obviously everything important is inside our SRC folder. Post the Git link. Yes, give me one second. Here. So this is the link for the GitHub repository. Make sure you clone it and install dependencies. And our dependencies are installed. We can now run NPM run dev and we should see our to-do application here on the screen in a bit. But until then, let's look at our application. We have our SRC folder and I think my computer might be struggling for resources at this point, but we'll push through. And inside here, we have an index page and we have a dashboard page. So you can think of this index page as kind of being a landing page. You're getting this error, database URL is required. So what you can do in that case is you can go to your dot env file. You should have a database URL by default in your env. All right, so in your dot env file, we can actually get rid of these two, but you can have a database URL equals this string here. So file colon db.sqlite. So if you're getting the error that you're missing database URL, you can just make sure that this is added in your dot env file. I'm going to just paste that into this chat. Thank you for pointing that out. We basically just need to point the application towards the SQLite file that's going to be used as a database. So we're starting out with just a demo SQLite database here and you can ignore everything else in the environment for now. So now you should have the application running. Let me know if everyone's caught up to this point. And our index page is basically like, so if you go to your layout file here, your layout file in src app layout. Now this has a few things that, like in a sense they're not supposed to be there. So we can just quickly get rid of this. If you see this clerk-nextjs import, you can just get rid of that. You can get rid of clerk-provider and user-button from the section. We are going to add these back in later, but right now if you're just building our to-do app, we don't need that. But what we do need is if we go to our dashboard page, in our main page here, we have a link to go to dashboard. And if we click it, we should see, what is happening here? Give me one second. Oh, I am muted.

Watch more workshops on topic

React Performance Debugging Masterclass
React Summit 2023React Summit 2023
170 min
React Performance Debugging Masterclass
Top Content
Featured WorkshopFree
Ivan Akulov
Ivan Akulov
Ivan’s first attempts at performance debugging were chaotic. He would see a slow interaction, try a random optimization, see that it didn't help, and keep trying other optimizations until he found the right one (or gave up).
Back then, Ivan didn’t know how to use performance devtools well. He would do a recording in Chrome DevTools or React Profiler, poke around it, try clicking random things, and then close it in frustration a few minutes later. Now, Ivan knows exactly where and what to look for. And in this workshop, Ivan will teach you that too.
Here’s how this is going to work. We’ll take a slow app → debug it (using tools like Chrome DevTools, React Profiler, and why-did-you-render) → pinpoint the bottleneck → and then repeat, several times more. We won’t talk about the solutions (in 90% of the cases, it’s just the ol’ regular useMemo() or memo()). But we’ll talk about everything that comes before – and learn how to analyze any React performance problem, step by step.
(Note: This workshop is best suited for engineers who are already familiar with how useMemo() and memo() work – but want to get better at using the performance tools around React. Also, we’ll be covering interaction performance, not load speed, so you won’t hear a word about Lighthouse 🤐)
Concurrent Rendering Adventures in React 18
React Advanced 2021React Advanced 2021
132 min
Concurrent Rendering Adventures in React 18
Top Content
Featured WorkshopFree
Maurice de Beijer
Maurice de Beijer
With the release of React 18 we finally get the long awaited concurrent rendering. But how is that going to affect your application? What are the benefits of concurrent rendering in React? What do you need to do to switch to concurrent rendering when you upgrade to React 18? And what if you don’t want or can’t use concurrent rendering yet?

There are some behavior changes you need to be aware of! In this workshop we will cover all of those subjects and more.

Join me with your laptop in this interactive workshop. You will see how easy it is to switch to concurrent rendering in your React application. You will learn all about concurrent rendering, SuspenseList, the startTransition API and more.
React Hooks Tips Only the Pros Know
React Summit Remote Edition 2021React Summit Remote Edition 2021
177 min
React Hooks Tips Only the Pros Know
Top Content
Featured Workshop
Maurice de Beijer
Maurice de Beijer
The addition of the hooks API to React was quite a major change. Before hooks most components had to be class based. Now, with hooks, these are often much simpler functional components. Hooks can be really simple to use. Almost deceptively simple. Because there are still plenty of ways you can mess up with hooks. And it often turns out there are many ways where you can improve your components a better understanding of how each React hook can be used.You will learn all about the pros and cons of the various hooks. You will learn when to use useState() versus useReducer(). We will look at using useContext() efficiently. You will see when to use useLayoutEffect() and when useEffect() is better.
React, TypeScript, and TDD
React Advanced 2021React Advanced 2021
174 min
React, TypeScript, and TDD
Top Content
Featured WorkshopFree
Paul Everitt
Paul Everitt
ReactJS is wildly popular and thus wildly supported. TypeScript is increasingly popular, and thus increasingly supported.

The two together? Not as much. Given that they both change quickly, it's hard to find accurate learning materials.

React+TypeScript, with JetBrains IDEs? That three-part combination is the topic of this series. We'll show a little about a lot. Meaning, the key steps to getting productive, in the IDE, for React projects using TypeScript. Along the way we'll show test-driven development and emphasize tips-and-tricks in the IDE.
Mastering advanced concepts in TypeScript
React Summit US 2023React Summit US 2023
132 min
Mastering advanced concepts in TypeScript
Top Content
Featured WorkshopFree
Jiri Lojda
Jiri Lojda
TypeScript is not just types and interfaces. Join this workshop to master more advanced features of TypeScript that will make your code bullet-proof. We will cover conditional types and infer notation, template strings and how to map over union types and object/array properties. Each topic will be demonstrated on a sample application that was written with basic types or no types at all and we will together improve the code so you get more familiar with each feature and can bring this new knowledge directly into your projects.
You will learn:- - What are conditional types and infer notation- What are template strings- How to map over union types and object/array properties.
Web3 Workshop - Building Your First Dapp
React Advanced 2021React Advanced 2021
145 min
Web3 Workshop - Building Your First Dapp
Top Content
Featured WorkshopFree
Nader Dabit
Nader Dabit
In this workshop, you'll learn how to build your first full stack dapp on the Ethereum blockchain, reading and writing data to the network, and connecting a front end application to the contract you've deployed. By the end of the workshop, you'll understand how to set up a full stack development environment, run a local node, and interact with any smart contract using React, HardHat, and Ethers.js.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

A Guide to React Rendering Behavior
React Advanced 2022React Advanced 2022
25 min
A Guide to React Rendering Behavior
Top Content
This transcription provides a brief guide to React rendering behavior. It explains the process of rendering, comparing new and old elements, and the importance of pure rendering without side effects. It also covers topics such as batching and double rendering, optimizing rendering and using context and Redux in React. Overall, it offers valuable insights for developers looking to understand and optimize React rendering.
Building Better Websites with Remix
React Summit Remote Edition 2021React Summit Remote Edition 2021
33 min
Building Better Websites with Remix
Top Content
Remix is a web framework built on React Router that focuses on web fundamentals, accessibility, performance, and flexibility. It delivers real HTML and SEO benefits, and allows for automatic updating of meta tags and styles. It provides features like login functionality, session management, and error handling. Remix is a server-rendered framework that can enhance sites with JavaScript but doesn't require it for basic functionality. It aims to create quality HTML-driven documents and is flexible for use with different web technologies and stacks.
React Compiler - Understanding Idiomatic React (React Forget)
React Advanced 2023React Advanced 2023
33 min
React Compiler - Understanding Idiomatic React (React Forget)
Top Content
Watch video: React Compiler - Understanding Idiomatic React (React Forget)
Joe Savona
Mofei Zhang
2 authors
The Talk discusses React Forget, a compiler built at Meta that aims to optimize client-side React development. It explores the use of memoization to improve performance and the vision of Forget to automatically determine dependencies at build time. Forget is named with an F-word pun and has the potential to optimize server builds and enable dead code elimination. The team plans to make Forget open-source and is focused on ensuring its quality before release.
Using useEffect Effectively
React Advanced 2022React Advanced 2022
30 min
Using useEffect Effectively
Top Content
Today's Talk explores the use of the useEffect hook in React development, covering topics such as fetching data, handling race conditions and cleanup, and optimizing performance. It also discusses the correct use of useEffect in React 18, the distinction between Activity Effects and Action Effects, and the potential misuse of useEffect. The Talk highlights the benefits of using useQuery or SWR for data fetching, the problems with using useEffect for initializing global singletons, and the use of state machines for handling effects. The speaker also recommends exploring the beta React docs and using tools like the stately.ai editor for visualizing state machines.
Modern Web Debugging
JSNation 2023JSNation 2023
29 min
Modern Web Debugging
Top Content
This Talk discusses modern web debugging and the latest updates in Chrome DevTools. It highlights new features that help pinpoint issues quicker, improved file visibility and source mapping, and ignoring and configuring files. The Breakpoints panel in DevTools has been redesigned for easier access and management. The Talk also covers the challenges of debugging with source maps and the efforts to standardize the source map format. Lastly, it provides tips for improving productivity with DevTools and emphasizes the importance of reporting bugs and using source maps for debugging production code.
Routing in React 18 and Beyond
React Summit 2022React Summit 2022
20 min
Routing in React 18 and Beyond
Top Content
Routing in React 18 brings a native app-like user experience and allows applications to transition between different environments. React Router and Next.js have different approaches to routing, with React Router using component-based routing and Next.js using file system-based routing. React server components provide the primitives to address the disadvantages of multipage applications while maintaining the same user experience. Improving navigation and routing in React involves including loading UI, pre-rendering parts of the screen, and using server components for more performant experiences. Next.js and Remix are moving towards a converging solution by combining component-based routing with file system routing.