DEV Community: Remi W.

The Ultimate 2024 Tech Stack for Solo SaaS Developers: Build Smarter, Not Harder

Remi W. — Tue, 18 Jun 2024 14:45:55 +0000

Building a SaaS as a solo developer is a challenging task. You have to wear multiple hats and be proficient in various technologies, requiring strategic decisions about your tech stack. This means you need to be a full-stack developer familiar with both frontend and backend.

Choosing the right tech stack is crucial for the best developer experience. In this post, I'll share my Next.js stack for building a SaaS and break down the different parts of the stack. I'll also share the favorite tools I rely on. If you want to see the final result, you can check out a live demo of the stack.

Hope this post will inspire you and help you on your own SaaS journey.

Next.js, the Backbone of the Stack

As a solo developer, you need a framework that allows you to build full-stack applications with ease. Next.js is an excellent choice for building a SaaS, as it's a React framework that enables you to build modern applications efficiently.

I use Next.js to create both the user dashboard and the marketing site. The frontend is written in React, while the backend uses Next.js Route Handlers. The Route Handlers create a RESTful API, which can be used by React components and other clients, such as mobile applications.

Using the same framework for both the marketing site and the dashboard allows me to reuse components and styles across all parts of the SaaS. This makes the design more consistent and development more efficient. Similarly, having both the frontend and backend rely on Next.js makes it extremely easy to share code between the two.

Only One Language, TypeScript

To maximize productivity, I use only a single programming language: TypeScript. Combined with Next.js, TypeScript allows me to write both frontend and backend code within one framework and one language, simplifying the development process and reducing context switching.

Shadcn UI with Tailwind CSS

For the UI, I choose Shadcn UI, a collection of components built on top of Radix UI, which provides unstyled React components. Shadcn UI styles Radix UI components using Tailwind CSS to deliver a beautiful UI for the SaaS. The good news is that I can share these components between the marketing site and the user dashboard seamlessly.

Authentication

Authentication is a crucial part of any SaaS. I use Clerk for authentication, which offers comprehensive features like email/password and social login. These basic features are available in many open-source libraries.

However, if your application requires more advanced features, Clerk is an excellent choice. It can handle multi-factor authentication, user impersonation, multi-session support (one user can connect to multiple accounts), blocking disposable emails, brute-force protection, bot protection, and more.

Clerk also offers a complete UI in React for authentication, which can be customized to match your brand. It saves you the time and effort of developing authentication from scratch. Some of the built-in UIs provided by Clerk include Sign Up, Sign In, Forgot Password, Reset Password, and User Profile.

Multi-tenancy and Team Management

A robust SaaS should support collaboration within teams or organizations. Clerk provides a comprehensive multi-tenancy and team management system, including a full UI for managing teams and inviting users. This means I don't need to implement backend logic or UI for team management, as Clerk handles everything, including sending invitation emails and allowing users to switch between teams seamlessly.

Role and Permission

With multi-tenancy, it's important to manage roles and permissions. Clerk allows creating custom roles and permissions, enabling users to assign roles. For example, an Admin has all the privileges within the team, while a Read-Only role can only view the resources. This ensures appropriate access and security.

Database

I use Drizzle ORM for database management because it's type-safe and integrates seamlessly with TypeScript. With Drizzle, I can define models and relationships directly in TypeScript, eliminating the need for an external schema file. This means you don't have to learn another syntax.

Drizzle also provides Drizzle Kit, a CLI tool that simplifies the migration process. With Drizzle Kit, you can generate a migration folder to seamlessly update your database schema.

Additionally, you have Drizzle Studio for a visual interface to manage your database. Drizzle Studio allows you to view your database schema, run queries, and browse your data.

Stripe

Stripe handles payments and subscriptions seamlessly. With the Stripe SDK, I can easily integrate payment processing into my Next.js application. Stripe offers a checkout page, to which users can be redirected. This page not only reminds users of the plan they are about to subscribe to, but also the monthly or yearly price. Finally, the users can enter their credit card details and subscribe to the selected plan.

Once a subscription is made, Stripe will send a webhook event to my REST API endpoint, indicating that the user has subscribed. This allows me to update the user's subscription status in my database.

Stripe offers a self-service portal for your users to manage their subscription. In this portal, users can change their plan, update their payment method, cancel their subscription, and view their invoices.

Internationalization (i18n)

To reach a global audience, I use the Next-Intl library to support multiple languages in Next.js. Next-Intl ensures type-safe translations, verifying that the correct translation key is in use. This prevents runtime errors caused by missing or incorrect translations.

To make the translation experience more efficient, I use Crowdin, a localization platform that integrates seamlessly with GitHub. Crowdin allows me to manage translations collaboratively, ensuring that the application is available in the desired languages.

Form Management

I use React-Hook-Form combined with Zod for form management and validation. React-Hook-Form simplifies form handling in React, while Zod ensures data validation. The Zod schema can be easily shared between the frontend and the backend to ensure data validity on both sides.

Testing

As a SaaS builder, it's essential to ensure that the application works as expected. Without a team to test my application, I must rely on automated tests. This way, I'm confident that my application won't experience any regression when new features are added.

I use Vitest and React Testing Library for unit testing. Vitest is a test runner that supports TypeScript and ESM out of the box, offering a modern alternative to Jest. Another advantage of Vitest is its official VSCode extension and Vitest UI, which make Vitest even better. And, React Testing Library provides utilities for interacting with React components.

For end-to-end (E2E) and integration testing, I rely on Playwright. Playwright is a powerful tool that allows you to automate browser interactions, making it ideal for testing the full functionality of your application. With Playwright, I can simulate user interactions across different browsers, ensuring that my app performs consistently. Additionally, Playwright is excellent for testing Next.js Route Handlers, as it can easily send HTTP requests and validate responses.

GitHub Actions

GitHub Actions is a powerful tool that I use for Continuous Integration (CI). It allows me to automate the process of running tests and checks on my code before merging changes to the main branch.

Whenever I push a new commit or create a pull request, GitHub Actions automatically triggers workflows that I have defined in my repository. These workflows run unit tests with Vitest, executing end-to-end tests with Playwright, and performing linting and code formatting checks. If there is any issue, GitHub Actions will notify me, preventing me from merging faulty code.

Because my code is continuously being tested and validated, it provides a safety net that allows me to focus on building new features. Especially as a solo developer, we need to wear multiple hats and have limited time to manually test every aspect of an application.

Logging

I use Pino, a fast and lightweight logging library for Node.js. Pino provides a simple API to log messages and supports structured logging, making it easy to search and analyze logs. In production, I take logging a step further by sending the logs to Better Stack. Better Stack offers a robust logging platform that allows for real-time log monitoring, alerting, and visualization. By integrating Pino with Better Stack, I ensure that all log data is efficiently captured, stored, and accessible, enabling quick identification and resolution of issues in a live environment.

Error Monitoring

For error monitoring, I use Sentry, which captures errors and exceptions. It provides detailed reports that include stack traces, user context, and other relevant information, making it easier to identify issues.

In local development, I use Spotlight to capture Sentry events, taking advantage of Sentry's telemetry without overwhelming the production instance.

Environment Variables

T3 Env is a library that uses Zod to validate and transform environment variables. This ensures that all environment variables are correctly defined and validated.

Linter and Code Formatter

Maintaining a clean codebase is essential. I use ESLint and Prettier for linting and code formatting. ESLint ensures code quality by enforcing best practices and catching potential errors, while Prettier enforces a consistent coding style. This makes the codebase more readable and maintainable.

I recommend using the Airbnb style guide as the base configuration for ESLint, as it's one of the most popular JavaScript style guides. Additionally, I use eslint-plugin-playwright to ensure my Playwright tests follow best practices and eslint-plugin-tailwind to enforce best practices for Tailwind CSS.

VSCode

Visual Studio Code (VSCode) is my code editor of choice and has a rich ecosystem of extensions. Here are some of the extensions that I recommend that work well with my tech stack:

vscode-eslint, integrates ESLint into VS Code
vscode-tailwindcss, provides IntelliSense and syntax highlighting for Tailwind CSS
vscode-github-actions, manages GitHub Actions workflows directly in VSCode
i18n-ally, supports internationalization, offering translation key management, making it easier to work with multiple languages

Conclusion

In conclusion, building a SaaS as a solo developer can be quite challenging. However, choosing the right tech stack can make the process much easier, allowing you to focus on delivering value to your users. The combination of Next.js, TypeScript, Shadcn UI with Tailwind CSS, Clerk, Drizzle ORM, Stripe, and other tools shared in this article provides a scalable environment for building a SaaS product.

These tools not only simplify the development process but also ensure that your application is secure, performant, and user-friendly. They handle everything from authentication, multi-tenancy, and payment processing to database management, testing, and continuous integration, helping you focus on your business logic and user experience.

If you want to check out the final result, you can find a live demo.

I've created a Next.js SaaS boilerplate, which is a comprehensive starting point for building your own SaaS product using the same tech stack shared in this article.

The key to success as a solo developer is to leverage the right tools and technologies. This tech stack is my personal choice based on my experience and requirements. Depending on your project's needs, you might choose different tools. However, the principles remain the same: choose tools that make you productive.

I hope this post has given you some insights and inspiration for your own SaaS journey. Happy coding!

🚀 Next.js Boilerplate just hit 6000+ ⭐ stars on GitHub! 🔥 6️⃣0️⃣0️⃣0️⃣ 🔥

Remi W. — Fri, 08 Mar 2024 11:46:42 +0000

I want to share an awesome news for my Next.js Boilerplate which has reached 6000+ ⭐ stars on GitHub. I started the project in July 2020 but I have continuously updating the project from Next.js 9 to Next.js 14.1 with the app router support, from Tailwind CSS 1 to the version 3.4, upgrade ESLint to version 8, replace Cypress by Playwright for better DX, etc.

I also added new feature into the boilerplate. Lately, I add the internationalization (i18n) to support multi-language app out of the box. To also improve the Developer experience, the boilerplate comes up with a Logging system using Pino.js.

You can check out the GitHub repo at: Next.js Boilerplate

You can also learn more about the project on the official Next.js Boilerplate website

This is only the beginning, I'm currently working to add more built-in feature into the boilerplate and I'll keep updating the project. I'm also open to suggestion and feedback.

Hope you'll find interesting and you'll use for your current and next projects.

How to Build a SaaS on AWS: a deep dive into the architecture of a SaaS product

Remi W. — Tue, 21 Feb 2023 15:03:38 +0000

Building a SaaS product is a complex task. There are many things to consider, from the business model to the technology stack. In this article, we will focus on the technology stack I use and learn how I build my SaaS product on AWS. I'll describe the various services and how they fit together to provide a scalable, secure, and reliable SaaS product.

It took me 5 months to build my first SaaS product. During this time, I had to learn a lot about AWS and gain a ton of experience. This article is an opportunity for me to share my knowledge, and I also hope it will inspire you to build your own SaaS product.

Architecture Diagram

A picture is worth a thousand words, so let's start with the architecture diagram of a SaaS product.

It gives you a high-level overview of the various components of the architecture. We will now dive into each component and see how it works.

You can see a live demo of a SaaS product build with my React SaaS Boilerplate, fully hosted on AWS. It includes everything you need in a SaaS including authentication, multi-tenancy & team support, user dashboard, billing with Stripe and more.

Frontend

Let's start with the frontend, the part of the application that users will interact with. It is the entry point to the application.

The frontend is written in React with Next.js. For performance reasons, all the pages are statically generated. The good news, they can easily host on any static hosting service. For example, you can host the frontend on S3 with Cloudfont as a CDN. But with modern tools, I recommend using AWS Amplify Hosting. It's Vercel and Netlify alternatives in the AWS ecosystem.

AWS Amplify Hosting can automatically deploy your frontend application from your GitHub repository. It also provides features like a custom domain, SSL certificate, and more.

The UI is styled with Tailwind CSS. So, I can easily style React components directly in JSX without using a library like styled-components or emotion.

Finally, I use SWR to fetch data from the backend. It's a React Hooks library for data fetching, a lightweight alternative to React Query, easy to use, and offers features like caching, revalidation, and more.

Backend

The backend code is hosted on AWS Lambda, a serverless computing service that allows you to run code without managing servers. It's ideal for a SaaS product because I can dedicate all my time on the product without worrying about Ops. On top of that, it's highly scalable and cheap.

To make AWS Lambda publicly accessible, I need to use AWS API Gateway. It's a fully managed service that makes it easy to create, publish, maintain, monitor, and secure APIs at any scale. It provides features like authentication, rate limiting, and more.

I use the Serverless Framework to manage my API Gateway and AWS Lambda functions. It's a framework for creating and deploying serverless apps. It's super user-friendly and all configurations are handled in a single YAML file.

I also use Zod for validating incoming data, it ensure its validity before processing by the backend. It's a TypeScript library that allows you to define a schema for your data and validate it. It's a lightweight alternative to Joi and Yup. Additionally, it can prevent bugs and security issues.

Infrastructure

The frontend and backend codes also need to work with other services. I use AWS CDK to configure and manage the other AWS services. With AWS CDK, I can use JavaScript and TypeScript to define cloud infrastructure. So, I don't need to manually set up in AWS Console by clicking around.

Authentication

I use AWS Cognito to manage users. With Cognito, you can limit access to your application and provide a way for users to sign in. Only authenticated users can access the dashboard and use the SaaS.

In the front end, I use AWS Amplify for the authentication flow. Amplify abstracts the communication with Cognito and makes it easy. With a few lines of code, I've set up the signup, sign-in, social sign-in, and more. I don't lose my time implementing an authentication from scratch.

Database

For data storage, I use AWS DynamoDB, a fully managed NoSQL database service that seamlessly integrates into the AWS ecosystem and works extremely well with AWS Lambda.

One disadvantage of serverless architecture is its difficulty in working with SQL databases. For instance, you need to set up a connection pool to connect to the database. Otherwise, it will exhaust your server resources. The good news with DynamoDB, I don't need to worry about it because there isn't any connection limit you need to manage.

Logging

The application uses Pino.js as a logging library. It's a very fast JSON logger for Node.js. With the pino-lambda plugin, Pino is fully compatible with AWS Lambda.

Logs are directly sent to CloudWatch, a monitoring and log management service. It's a fully managed service that allows you to store, monitor, and access your log files from AWS services.

You can set up an alert when the application goes wrong with CloudWatch. You can also create a custom dashboard to gain insight into the performance of your application.

Email service

In SaaS applications, you have several reasons to send emails to your users. When they sign up for the first time, you need to send them a welcome email so they can confirm their email address. When they forget their password, you need to send them a reset password email.

To remain in the AWS ecosystem, I use AWS SES, a fully managed email-sending service. I choose not to rely on a third-party email service like SendGrid, Mailgun, or Postmark.

Subscription payment

To monetize your SaaS product, you need to charge your users. I use Stripe to handle the payment. It's a payment processing platform that allows you to accept payments online. In the application, the users can choose their subscription plan and it'll redirect them to the Stripe checkout page. On the checkout page, they can enter their credit card information and pay for the subscription.

When the payment is successful, Stripe will trigger a webhook to the backend. The backend needs to listen to the Stripe events and update the user's subscription status in the database.

Additionally, we need to provide users with the capability to update or cancel their subscriptions. To do this, I use Stripe's customer portal. It's a hosted page where the users can self-manage their subscriptions.

Conclusion

In this article, we learn how to build a SaaS product on AWS. A deep dive into all the components of the architecture and how they work together to provide a scalable, secure, and reliable SaaS product.

If you are currently building or planning to build your own SaaS product, you should be interested in my AWS SaaS Boilerplate. It's a React SaaS boilerplate that includes everything you need in a SaaS product. Fully hosted on AWS, you can deploy it in a few minutes with the same stack described in this post. So, you can use it as a starting point to build your own SaaS product and earn your 1st MRR.

Build a Free Twitter Scheduler with Next.js

Remi W. — Thu, 08 Dec 2022 17:24:52 +0000

Twitter is a popular social media platform for developers to share their thoughts, ideas, and opinions with a global audience. It's a great way to connect with other developers, stay up-to-date on the latest trends and technologies, and showcase their work to the world.

To get the most out of Twitter, you need to post regularly. By planning and scheduling your tweets in advance, you can save time and increase your engagement. There are many paid SaaS (Software as a Service) solutions that allow users to schedule posts on social media platforms. However, these services can be expensive and require a subscription.

In this article, we'll build our own solution using Next.js, a React framework for building full-stack applications. First, we need to save our tweets to a Redis database, Upstash. Then, we'll create a Next.js API route to fetch the tweets from the database. Finally, we'll use the Twitter API to post the tweets to our account.

UI and Forms

We start by creating a simple UI to schedule our tweets. As the creator of Next.js Boilerplate, I use my own boilerplate to get started. Next.js Boilerplate is a Next.js starter template that includes a fully configured project with all the tools you need to build a production-ready application. The source code for this project is available on GitHub at Next.js Boilerplate.

To get started, we need to add the following dependencies to our project:

npm install react-hook-form @upstash/redis @upstash/qstash axios

We use the react-hook-form library to handle the form state. In src/pages folder, we create a new page add-tweet.tsx and add a simple form:

import axios from 'axios';
import { useForm } from 'react-hook-form';

const AddTweet = () => {
  const { register, handleSubmit, reset } = useForm();

  const onSubmit = handleSubmit(async (data) => {
    await axios.post('/api/add-tweet/', {
      ...data,
    });

    reset();
  });

  return (
    <form onSubmit={onSubmit}>
      <label>
        Message:
        <input type="text" {...register('message')} />
      </label>

      <label>
        Scheduled date:
        <input
          type="datetime-local"
          {...register('scheduledDate', { valueAsDate: true })}
        />
      </label>

      <input type="submit" value="Submit" />
    </form>
  );
};

export default AddTweet;

Global Redis Database

For the database part, we use Upstash, a fully managed Redis database. Upstash is a solution for developers who want to build applications without worrying and managing the database. Another advantage of Upstash is that it can be run on the edge, which results in a faster response time. It works extremely well with Edge API Routes.

To get started, we need to create a new account on Upstash. Once you've created an account, you'll be able to create a new database. We use the free plan for this project, which includes 10,000 requests per month (2,000 for the global database).

Once you've created an Upstash account, you need to create a new database:

Connect to the Redis database

To connect to the Upstash Redis database, we use the @upstash/redis package. We also need to create a new file called src/utils/Redis.ts:

import { Redis } from '@upstash/redis';

export const redis = new Redis({
  url: process.env.UPSTASH_REDIS_REST_URL || '',
  token: process.env.UPSTASH_REDIS_REST_TOKEN || '',
});

To access the UPSTASH_REDIS_REST_URL value, go to your Upstash dashboard. Once you've copied the Redis REST URL, you can paste it into the .env file.

UPSTASH_REDIS_REST_URL=https://XXXXXXXX.upstash.io

In addition to the UPSTASH_REDIS_REST_URL value, you also need to copy the UPSTASH_REDIS_REST_TOKEN variable from your Upstash dashboard. But, this time, please past the value into the .env.local file:

UPSTASH_REDIS_REST_TOKEN=XXXXXXXX

In order to keep our secret variables safe, it is a good practice to store them in the .env.local file. Since this file is not committed to the Git repository, our secrets will not be exposed to anyone who has access to the repository.

Edge API Routes to store in the database

We need to define a schema by creating a new file src/types/Tweet.ts:

export type IAddTweet = {
  message: string;
  scheduledDate: string;
};

Next, we create a new file src/pages/api/add-tweet.ts to handle the form submission. We use the @upstash/redis library to connect to our Redis database and save the tweet.

import type { NextRequest } from 'next/server';

import type { IAddTweet } from '@/types/Tweet';
import { redis } from '@/utils/Redis';

export default async function handler(req: NextRequest) {
  const reqJson: IAddTweet = await req.json();

  await redis.zadd('tweet', {
    score: new Date(reqJson.scheduledDate).getTime() / 1000, // convert to seconds
    member: reqJson.message,
  });

  return new Response(
    JSON.stringify({
      success: true,
    }),
    {
      status: 200,
      headers: {
        'content-type': 'application/json',
      },
    }
  );
}

export const config = {
  runtime: 'experimental-edge',
};

To make our API route accessible extremely fast, we use the Edge API Routes feature of Next.js. Edge API Routes are serverless functions that run on the edge. This means that our API route will be executed close to the user, which results in a faster response time.

Post on Twitter using code

We also need to create another API route to post automatically to Twitter.

To get started, we need to create a new Twitter app. Once you've created a new app, you'll be able to generate the necessary tokens. We use these tokens to connect to the Twitter API and create our first tweet using code.

We define a new variable TWITTER_BEARER_TOKEN in the .env.local file so that the application has the necessary permissions to post on Twitter.

In src/pages/api/schedule-tweet.ts, we add the following code:

import axios from 'axios';
import type { NextApiRequest, NextApiResponse } from 'next';

export default async function handler(
  _req: NextApiRequest,
  res: NextApiResponse
) {
  await axios.post(
    'https://api.twitter.com/2/tweets',
    {
      text: 'Test message',
    },
    {
      headers: {
        Authorization: `Bearer ${process.env.TWITTER_BEARER_TOKEN}`,
      },
    }
  );

  res.status(200).json({
    success: true,
  });
}

To test our API route, we can open localhost:3000/api/schedule-tweet in the browser. If everything is correctly set up, we should see a new tweet on your Twitter account.

Schedule your tweets

We've successfully created our first tweet programmatically, but to take things to the next level, we need to schedule our tweets for a specific time in the future. This way, we can ensure that our tweets are sent out at the most effective time for maximum engagement and reach.

Unfortunately, it only works if we run the API route manually. To automate the process, we need to use a cron job. A cron job is a task that runs periodically at a specified time. And, with Serverless Functions, we don't have access to a cron job. To solve this problem, we can use an external service like Upstash QStash. QStash is a scheduling solution for serverless applications.

Now, we need to update the API endpoint and we can retrieve the tweets from the database and check if any of them are scheduled to be posted. In src/pages/api/schedule-tweet.ts, we add the following code:

import { verifySignature } from '@upstash/qstash/nextjs';
import axios from 'axios';
import type { NextApiRequest, NextApiResponse } from 'next';

import { redis } from '@/utils/Redis';

async function handler(_req: NextApiRequest, res: NextApiResponse) {
  const currentTimestamp = Date.now() / 1000;
  const list = await redis.zrange('tweet', 0, currentTimestamp, {
    byScore: true,
  });

  for (let i = 0; i < list.length; i += 1) {
    // Run sequentially the requests to prevent overloading Twitter API
    await axios.post(
      'https://api.twitter.com/2/tweets',
      {
        text: list[i],
      },
      {
        headers: {
          Authorization: `Bearer ${process.env.TWITTER_BEARER_TOKEN}`,
        },
      }
    );
  }

  await redis.zremrangebyscore('tweet', 0, currentTimestamp);

  res.status(200).json({
    success: true,
  });
}

export default verifySignature(handler);

export const config = {
  api: {
    bodyParser: false,
  },
};

The verifySignature requires two environment variables: QSTASH_CURRENT_SIGNING_KEY and QSTASH_NEXT_SIGNING_KEY. These variables are used to verify the signature of the requests. So, we can make sure that the requests are coming from QStash and not from a bad actor. You can get these variable values from your Upstash dashboard.

You also need to deploy the Next.js application to a publically accessible URL. For example, you can deploy on Vercel. So, QStash can send a request to the API endpoint api/schedule-tweet.

After deploying your Next.js app, in your Upstash dashboard, you can go to the QStash section and create a new Request Builder. You also need to add the endpoint URL and the frequency of the cron job. In this example, it'll run the cron job every day.

And, you can change the frequency of the cron job based on your needs. For example, you can change it to every minute or every hour.

Conclusion

In this article, we've built a Twitter scheduler using Next.js and Upstash. We've used Next.js API routes to store the tweets in a Redis database and schedule them for a specific time in the future. We've also used the Twitter API to post the tweets to our account.

By building your own Twitter scheduler, you can avoid using expensive SaaS solutions and save money. You can also use this project as a starting point and improve based on your needs.

Currying Layout Component Patterns in Next.js

Remi W. — Fri, 21 Oct 2022 11:18:22 +0000

In Next.js, you can use the Layout component pattern by adding the getLayout property to the pages. This property is a function that returns a React component. The Layout component can be used to add common UI elements to all pages, such as navigation or footer.

Not only this pattern avoids duplicate code, but it can also persist state between page navigations. It's a great way to add a Single-Page Application (SPA) experience to your Next.js application.

You can find more details about this pattern in the Next.js documentation. But, the first time I saw this pattern was from Adam Wathan's blog post about Persistent Layout Patterns in Next.js. He really gives a great explanation of this pattern and how to use it.

The limitation of the Layout component pattern

The Layout component pattern is extremely useful when some parts of the UI elements are exactly the same. For example, the footer of the website: between each page, the footer doesn't change at all.

So, you can easily create a function that returns the footer. Then, you can use it as the Layout component in all Next.js pages. Here is a simple example of a Layout component that returns a footer:

const getFooter = (page: ReactElement) => (
  <Footer>{page}</Footer>
);

In Next.js pages, you can use this function as the Layout component:

// pages/index.js
export default function Page() {
  return {
    /** Your content */
  }
}

Page.getLayout = getFooter;

But for more complex applications, like the user/admin dashboard, the common UI elements can be slightly different between pages. I would love to add a title to the header, and for each page the title is different. Here is an example:

And, the only difference between the pages is the title. The rest of the UI elements are the same. So, how can I reuse the Layout component and still be able to change the title? You can create a new function for each different title, but it's not a good solution. Here is a potential example:

const getDashboardChangeEmail = (page: ReactElement) => (
  <AuthProvider>
    <StateProvider>
      <Dashboard title="Change Email">{page}</Dashboard>
    </StateProvider>
  </AuthProvider>
);

const getDashboardChangePassword = (page: ReactElement) => (
  <AuthProvider>
    <StateProvider>
      <Dashboard title="Change password">{page}</Dashboard>
    </StateProvider>
  </AuthProvider>
);

You have to create a new function for each different title. You have a lot of duplicate code and it's hard to maintain. And, if you want to add a new component, you need to update all of them.

::: newsletter

Currying Layout component is the solution

Instead of duplicating code for each title, you can curry the function. Now, you can create a function that takes the title as a parameter and return a function. And the second function will return the React component:

const getDashboard = (title: title) => (page: ReactElement) => (
  <AuthProvider>
    <StateProvider>
      <Dashboard title={title}>{page}</Dashboard>
    </StateProvider>
  </AuthProvider>
);

And, here is how you can use it on Next.js pages:

// pages/change-email.js
export default function Page() {
  return {
    /** Your content */
  }
}

Page.getLayout = getDashboard('Change Email');

// pages/change-password.js
export default function Page() {
  return {
    /** Your content */
  }
}

Page.getLayout = getDashboard('Change Password');

Now, we can reuse the same Layout component for all pages. And, we can still change the title for each page. The code isn't duplicated anymore. It also doesn't require a lot of changes to the existing code.

I'm totally open to any feedback or suggestions, please feel free to contact me on Twitter at @ixartz.

Build the future of web development with Next.js Edge Rendering and globally distributed database

Remi W. — Wed, 05 Oct 2022 17:14:17 +0000

Next.js allows you to build React applications. Recently, it gained a lot of popularity because of the great developer experience and many other features that make it a joy to use.

In this article, we will build a state-of-the-art web application with Next.js Edge and Upstash Redis. With the recent developments in Edge computing, we will use the newest features from Next.js (Edge SSR and Edge API Routes) to build an application that is blazing fast, fully distributed and scalable. And, the good news is that it's 100% serverless with no server management.

To illustrate the power of edge computing, we will create a simple URL shortener application. A URL shortener is a service that takes a URL and converts it into a shorter URL. This is useful when you want to share a URL on Twitter or other social media platforms. It's also useful when you want to hide the actual URL from the user.

Edge Computing

In the past, Static Site Generation (SSG) in Next.js was served from the edge with the help of CDN. The static HTML content is deployed around the world and the user gets the content from the nearest edge location. It is a great way to reduce the latency and improve the performance of the application.

For dynamic content, Next.js provides Server Side Rendering (SSR). The content is generated on the server and sent to the client. In the past, compared to SSG, SSR was only deployed in a single location for an easy setup.

With the latest version of Next.js (Next.js 12.2), we have access to the Edge Rendering. The feature is still in experimental mode, but you can already try it out. This allows to deploy SSR and API routes at the edge. So, the dynamic content can now be served from multiple locations in one configuration.

After moving to the edge, there is a bottleneck with the database. Due to the complexity and operational cost, it was hard to deploy the database in multiple locations. But, with recent and modern database providers like Upstash, we can now deploy a global Redis database in one click. The perfect match for the Edge Rendering/Computing. On top of that, Upstash is a serverless database, so you don't have to worry about the infrastructure.

Edge Server-Rendering

We'll use Next.js Boilerplate as a starting point. It's a great way to start with Next.js with TypeScript and Tailwind CSS. It's also configured with ESLint, Prettier, Husky, Jest and Cypress. You can find the source code on GitHub at Next.js Boilerplate.

First, let's create a new admin folder with a new Page named src/pages/admin/index.tsx:

import type { InferGetServerSidePropsType } from 'next';

const Index = (
  props: InferGetServerSidePropsType<typeof getServerSideProps>
) => <div>{props.runtime}</div>;

export const getServerSideProps = async () => {
  const runtime = process.env.NEXT_RUNTIME || '';

  return {
    props: { runtime },
  };
};

export const config = {
  runtime: 'experimental-edge',
};

export default Index;

The runtime configuration can be set on all pages when you want to deploy at the edge. By default, the runtime is set to nodejs. But, for Edge Rendering, we need to set it to experimental-edge.

After deploying the application, you can see that the page is rendered at the edge. You can check it out by opening the page in the browser and the server should return edge.

Read the rest on Medium

How I host my Full-stack Application SaaS for Free on AWS

Remi W. — Wed, 27 Jul 2022 14:04:45 +0000

Deploying your application to production can become quite expensive on AWS if you don't take the time to think about your infrastructure. In this article, I will show you how I manage to host my full-stack application for free on AWS: Frontend, Backend, Database, Monitoring and Email service, all hosted for free on AWS.

Context

I'm an indie maker with limited financial resources, I need to optimize the hosting costs. If you are working for a larger company, this article can still give you some idea on how to reduce your cost on AWS.

My whole application is hosted on AWS. Because everything is centralized on AWS, it makes easier to manage the infrastructure. Also, as a solo developer with limited time, the infrastructure is 100% serverless. So, you don't need to worry about server management, AWS handles it for you. They configure and update the server for you. Thanks to the centralization and serverless, I can focus on my business and product.

You can check out the live demo of my application at the full-stack React Boilerplate demo. Or, if you need to see a real SaaS product, you can check out PostMage app.

Authentication

Let's start by looking at the authentication where I use AWS Cognito to secure my full-stack application. All the authentication system is managed and secured by AWS, so I don't need to worry about it. With Cognito, it's extremely easy to implement email and social authentication with Google, Facebook, Amazon and Apple.

The good news is that AWS Cognito has a very generous free tier policy. Below 50,000 monthly active users, you can stay at the free tier without any time limitation (always free). I think it's one of the most generous free-tier policies in the market. For example, Auth0 only offers 7,000 monthly active users.

Frontend

The developer experience has recently improved with Netlify and Vercel. With these two tools, I can build and deploy your frontend directly from your GitHub repository. Did you know you can have the same experience with AWS without any external services? Yes, with AWS Amplify Hosting, you can host your frontend on AWS without compromising on your developer experience.

AWS Amplify Hosting also offers a free tier, but it's limited to one year. The free plan includes 1,000 build minutes and 15 GB of bandwidth per month. Compared to Vercel and Netlify, you don't need to pay a subscription for each developer seat. With Amplify Hosting, you only need to pay based on your usage.

Backend

For the REST API, I host it on AWS Lambda, the serverless computer service from AWS. No need to set up an EC2 instance to host a backend. So, no need to update your server and no need to manage the scaling. With AWS Lambda, you only need to deploy your code and AWS will take care of the rest.

You can invoke your AWS Lambda 1 million requests per month for free. And, it isn't limited in time. When you go above the free tier, you only need to pay based on the number of requests. Basically, you don't need to pay anything if you don't have any requests.

In the past, you usually need an API gateway. It's needed to route requests to the correct Lambda function. It also comes at a small cost. But, again, there is also a free tier ;) Like AWS Lambda, the API gateway can handle 1 million requests per month for free. More recently, AWS has released AWS Lambda Function URLs. So, you can directly invoke your Lambda function without an API gateway. And, the good news with AWS Lambda Function URLs is free with Lambda.

Database

You might already notice that there aren't a lot of providers for serverless databases. Fortunately for us, DynamoDB checks all the requirements you expected for a serverless database: scale to zero, pay per request, automatically manage the scaling, and so on. So, I choose DynamoDB as my database for my SaaS application.

Again I won't disappoint you ;) DynamoDB has a very generous always free tier policy: 25 GB of storage, 25 provisioned Write and Read Capacity. Based on the official description, this enough to handle 200 million requests per month. I don't know this is true or not, but I think it's definitely enough to handle a middle-sized application for free.

Monitoring, Logging and Observability

The infrastructure is 100% serverless and managed by AWS. But, I still need to keep an eye on the application to see if there are any errors. So, I use CloudWatch to monitor the application and the infrastructure. I also set up some alerts to be notified when something goes wrong.

For CloudWatch, AWS offers an always-free tier: 10 custom metrics, 10 alarms, 5GB of log ingestion, etc. Using only what the free tier offering, you can still have a better idea of how your application is behaving in production.

Email

By using AWS Cognito for the authentication, there are several steps in the authentication process where Cognito will send an email with AWS SES. For example, if you have a registration form, you can send a confirmation email to the user after he registers.

Not only for the authentication, but the application itself also needs to send an email. My SaaS application has team support where users can invite their friends or coworker to work together in the same workspace. So, the application needs to send an email when the user start inviting his friends.

You won't get any surprise ;) But, AWS SES has an extremely generous always-free tier: you can send 62,000 emails per month for free. I think it's one of the most generous free tiers in the market for email service.

Conclusion

All the AWS services I used for my SaaS application have a free tier. Currently, I'm paying nothing for hosting my full-stack application on AWS. In this article, I hope I give you some inspiration on how you can also reduce your AWS bill.

If you like my article and my stack, you should be definitively interested in my Full-stack React Boilerplate, a pre-configured template for you to start a new project quickly. It's exactly the same stack mentioned in the article: 100% serverless hosted on AWS.

You'll find inside the boilerplate everything configures for you. It includes TypeScript, Tailwind CSS, Serverless framework, Linter, Code formatter, Jest, Cypress and VSCode configuration. So, you don't need to lose your time fighting with configuration files.

Not only you'll find configuration files in the boilerplate, but you'll also find code for your application. For example, it includes pre-built code for authentication, landing page, user dashboard, multi-tenancy support (team support), subscription payment, and more. Instead of wasting time reinventing the wheel and developing from scratch, you can focus on the core of your project. It'll save you months of development time.

How to get 2000+ stars on GitHub with 11 places to promote your project

Remi W. — Thu, 21 Jul 2022 15:51:14 +0000

My React Boilerplate with Next.js has recently reached 2000+ stars on GitHub. In the last months, I've continuously been working on improving the project and adding new features. Unfortunately, this isn't enough to get the project noticed by the community. I've also spent my time promoting the project on many platforms and in this article, I'll share with you my 11 places to promote an open source project.

Preparation for a successful promotion

Before promoting your project, you need to make sure other developers will be interested in it. In my case, as an indie maker, I constantly build new products. So, I was losing my time installing and configuring new React projects again and again. For example, I was spending my time configuring TypeScript, ESLint, Prettier, Jest, Cypress and other JavaScript-related tools.

With this frustration, I've decided to create a React boilerplate that you can use to start quickly a new project. I thought other people would have the same pain. So, I made the project open source and accessible to everyone.

You also need to make sure your project is easy to use. Any documentation, tutorials or README you provide will help other developers to get started. Especially if you have a good-looking README file, it'll definitively increase your chances of getting a good first impression and a star on your GitHub project.

After making sure that everything is in place, we can start promoting in these 11 places.

1. Google with SEO

For my React Boilerplate, the project is currently ranked number 1 on Google for the keyword Next.js Boilerplate. It brings a lot of traffic to the repository and increases the number of stars on GitHub. Actually, the project got the most traffic from Google: Google brings more traffic than GitHub itself. That's why it's extremely important to write the README file for Google to index.

The good thing about SEO is that you only need to set it up once. Then, your project automatically gets some traffic from Google. It's fully passive. But, SEO is hard and complex, especially if you target a highly competitive keyword. There are a lot of factors that can influence your Google ranking. It requires you to invest your time to learn about the SEO strategy and how to implement it.

2. Twitter

As you already know, Twitter has a large number of developers that can be interested in your project. If you have a large based of followers, you shouldn't have any issues getting noticed when you start promoting your project.

But, when you don't have a lot of followers like me, you need to make sure you have a good chance to get noticed. You should add some hashtags to your tweet, it'll help you to increase your reach. For example, you can add some hashtags like the technology stack you use to build your open source project like #react, #reactjs, #javaScript, #webdev, #nextjs, etc.

Here is one example of my tweet where I got 40 likes and 21 retweets (by having only 100 followers):

3. Reddit

Reddit has also a large community of programmers who can support you by giving you a star on your project. There are communities for almost every technology stack. For example, there is a subreddit for React named /r/reactjs. And, there is also a subreddit for Node.js, JavaScript, TypeScript, AWS, etc. You won't have difficulty finding a community where it makes sense to promote your project.

For your information, each subreddits has different rules and guidelines. Some subreddits are more strict than others. I suggest you take some time to read them and make sure you follow them.

For one of my posts on Reddit, I got XXX upvotes which translates to a lot of stars on GitHub (I don't remember the exact number):

4. Awesome lists

You can find a similar list directly on GitHub with Awesome Lists. There is almost an Awesome list for each technology stack and each field in software engineering. It shouldn't be hard to find a list that fits your project. For Next.js Boilerplate, I've posted into these lists:

5. Publish aggregator websites

There are several websites that list projects using a specific technology stack. For example, BestOfJs is a website that aggregates open source projects built with JavaScript. You can find a similar website for React, Vue, Tailwind CSS, and more.

6. Indie Hacker

Not everybody on Indie Hacker is a developer. So, not everybody will be interested in your open-source project. But, one of the largest groups on Indie Hacker are developers. People on indie hackers are building a startup or bootstrap company. So if your project can help them in their business, you should promote it on Indie Hacker.

My React Boilerplate Template helps developers to start a new project. So, indie makers can use it to start their new productl, whether for a landing page, a SaaS, a blog, etc. That's why I've done some promotions on Indie Hacker.

7. Write a blog post

You can write a blog post about your project on your blog if you have one. So, you can share your vision and your idea. It's the perfect solution to promote your project. Or, you can also write a tutorial on how to use your project.

You can also post on Dev.to, Hashnode, Medium, or any other platform as an alternative. Or, you can republish your blog post from your personal blog into these platforms.

8. Discord

Today, most open source project has a discord channel where they can discuss with other developers. A great way to get help from other developers and you can connect with others who use the same technology. For example, there is a discord channel for React developers named Reactiflux. If your project uses React, it makes sense to join the server and promote your project.

9. Newsletter

You can find a lot of newsletters for developers. For example, you can find a newsletter for JavaScript developers called JavaScript Weekly. You can definitively try to contact them to see if they are interested in featuring your project in their newsletter. Like on Reddit, you can definitely find a newsletter where your project can be promoted. There is almost a newsletter for each technology stack and each field in software engineering.

10. GitHub Trends

Your project can be featured on GitHub Trends if it has received a large number of stars in a short period. After appearing in GitHub Trends, my React Boilerplate has received more than 150 stars in one day. So, this is super effective to get stars on your project.

11. Github Explore

GitHub Explore is a great way to find open source projects. It automatically suggests open-source projects hosted on GitHub to users based on their interests. So, it's important to fill your project details by adding description and tags.

Your project will show up on the right side of their dashboard:

It will also show up in their explore page:

I myself love this feature and use it to discover projects that I can use.

Conclusion

These are the 11 places I've posted about my Next.js Boilerplate Template. The project on GitHub has now 2000+ stars on GitHub. It was a long journey, it took me almost 2 years to reach this number. Hope this article can help you and shorten your journey to get stars on your project.

After working on this boilerplate for almost two years, I noticed it's possible to go further by creating a SaaS boilerplate. It's exactly the same idea but applies to a SaaS product. So, I build a React SaaS Boilerplate, a boilerplate you can get everything you need to create your SaaS and earn your 1st MRR.

It'll take care of all the features needed to make SaaS products: authentication, payment, team support, dashboard, landing page, etc. So, you focus on what makes your project unique and quickly launch your SaaS.

My Next.js Boilerplate now has 2000+ GitHub stars

Remi W. — Wed, 08 Jun 2022 17:03:25 +0000

My Next.js boilerplate has just crossed 2000+ stars on GitHub. Thanks to all GitHub stargazers for the support!

A project I have started 2 years ago for my own personal use and I thought it would be a great idea to share it. Now, I use it for all my project in React and Next.js.

Now, I also get help from the community. Other developers makes suggestion to the boilerplate code. There are also some external contributors.

ixartz / Next-js-Boilerplate

🚀🎉📚 Boilerplate and Starter for Next.js 14+ with App Router and Page Router support, Tailwind CSS 3.4 and TypeScript ⚡️ Made with developer experience first: Next.js + TypeScript + ESLint + Prettier + Drizzle ORM + Husky + Lint-Staged + Vitest + Testing Library + Playwright + Storybook + Commitlint + VSCode + Netlify + PostCSS + Tailwind CSS ✨

Boilerplate and Starter for Next.js 14+, Tailwind CSS 3.4, and TypeScript.

🚀 Boilerplate and Starter for Next.js with App Router, Tailwind CSS, and TypeScript ⚡️ Prioritizing developer experience first: Next.js, TypeScript, ESLint, Prettier, Husky, Lint-Staged, Vitest (replacing Jest), Testing Library, Playwright, Commitlint, VSCode, Tailwind CSS, Authentication with Clerk, Database with DrizzleORM (PostgreSQL, SQLite, and MySQL), Error Monitoring with Sentry, Logging with Pino.js and Log Management, Monitoring as Code, Storybook, Multi-language (i18n), and more. Ready for Next.js 15.

Clone this project and use it to create your own Next.js project. You can check out the live demo at Next.js Boilerplate, which includes a working authentication system.

Building a Full Stack Application on AWS: 100% Serverless

Remi W. — Thu, 02 Jun 2022 16:19:47 +0000

Serverless computing is such a big topic! And it's no news that it's the next step in building applications. It's extremely true for a small team with limited resources.

It's such a fast-growing market. Amazon Web Services (AWS) is not the only the biggest provider, but also my favorite.

As a developer myself, I appreciate things that can be automated. If there's a function or method for everything, all I want to do is "automate the boring stuff" and be more productive. Fortunately, AWS can give access to this kind of power.

I love AWS not because it consists of a famous suit of lovely nicknamed services but its complete package. AWS gives total control of your project all in one place.

In this article, I'll share what AWS services I use to build full-stack applications with React and Node.js. And, how I use them to make my SaaS application.

Be Comfortable With a Programming Language

A good understanding of Python or JavaScript concepts will set you on the right foot to build a full-stack application with AWS.

I'm a huge fan of JavaScript because it's a versatile programming language. JavaScript works well both on the server side and also on the front.

The possibilities are unlimited after you've some basic knowledge: you can code on the client-side (frontend) with React and the server-side (backend) with Express.js and Node.js.

Quick Facts About JavaScript

JavaScript is native to the web browser
JavaScript is a widely used programming language
The threshold to get started with JavaScript is low compared to C/C++ for example
JavaScript is an interesting language to learn

I can go on with 101 reasons why you should pick up JavaScript. But, that would make this article longer than it should. So, once I'm comfortable writing a programming language (whether it's JavaScript or not), the next thing is...

Jump on a Framework for Infrastructure as Code

As mentioned earlier, JavaScript has endless possibilities. You don't have to be an expert in JavaScript, but it can definitively help to have some knowledge in Express.js. Then, I also need to learn how to deploy your application.

Learning programming languages is great, but my project isn't available to the world. It only works on my local machine and I couldn't share it with my friends. Today, one of the biggest cloud providers is AWS.

To make the AWS experience more enjoyable, I also use Serverless Framework and AWS Cloud Development Kit (CDK). I can declare my AWS resources in JavaScript and configuration files instead of using the AWS console. So, you can easily replicate it for several environments like development, staging and production.

After sharing all the basic requirements to start a full-stack application on AWS, I'll show you the services I use to build my SaaS application.

1. Amplify Hosting

With Amplify Hosting, it's extremely simple to launch and host your frontend code on AWS. In my case, the frontend is written in React. More precisely, I use Next.js with TypeScript and Tailwind CSS. Amplify Hosting also handles custom domain and SSL certificates for me.

It's definitively an good alternative to Vercel and Netlify. But, the good thing about Amplify Hosting is that it can host on my own AWS account.

Like its counterpart, I can connect my GitHub repository to Amplify Hosting. It'll also set up for a simple CI/CD pipeline connected to my GitHub account. This way I can easily deploy your code by simply pushing your changes. No more manual deployment and improve the developer experience by speeding the application deployment.

2. AWS Lambda

For the backend of my application, I use AWS Lambda. It's a serverless computing platform that runs on AWS. Lambda is one of AWS most fastest-growing products.

Basically, after implementing the business logic for my SaaS or web application, I need to run my code and AWS Lambda can help me to achieve this.

With AWS Lambda, I only need to deploy my code on AWS and AWS Lambda will take care of the rest. I don't need to worry about the server, auto-scaling, upgrading, maintenance, etc. I can 100% focus on my code.

3. AWS API Gateway

To connect my AWS Lambda to the world, I need to use AWS API Gateway. It's a service that allows me to connect the front of your application to AWS Lambda. With API Gateway, my frontend can send requests to my AWS Lambda and receive the response.

Like the previous services, AWS API Gateway is also a managed service that I can use for handling, securing, monitoring and versioning my REST API.

4. AWS Cognito

When building an application, security should always be a top priority. For this, I use Amazon Cognito. AWS Cognito allows me to add authentication easily without implementing it from scratch.

You can easily add an email authentication to your application as well as social authentication like Google, Facebook, Apple and Amazon. It'll save you a lot of time and effort.

In combination with the AWS API gateway, I can secure my backend and restrict my AWS Lambda to only authenticated users.

5. DynamoDB

In a full-stack application, I also need to store the data. And, we all know managing a database can sometimes be a daunting task! That's why I choose DynamoDB.

DynamoDB is a serverless database that runs on AWS. As a serverless database, I don't have to worry about maintaining it and AWS handles that for me. It can automatically scale based on my traffic and scale to zero when needed.

6. CloudWatch

After deploying my application, I need to keep track of how the application will behave in production. And, I use CloudWatch to do that.

Once CloudWatch is set up, it gathers logs, metrics, and events for monitoring and operational data. I can also visualize it using Dashboards and have a complete overview of my AWS resources, applications, and services.

With this information, I can analyze the health and performance of my application. Then, I also set up alarms to automatically monitor the application and take appropriate actions.

Conclusion

Learning to utilize the power of Amazon Web Services (AWS) has helped me build fast, secure, and reliable applications. I'd recommend these services to anyone who wishes to make a full-stack application. You can have everything in the same place with a unified interface.

By utilizing the power of serverless, you don't have to worry about the underlying infrastructure. AWS is taking care of the servers to execute your applications, databases, and storage systems at any scale. You'd be surprised how much time you'd save building more efficient applications.

It took me 5 months to understand and build my first full-stack application with AWS. It wasn't an easy journey but I'm extremely happy with the result. So, I've built an AWS Boilerplate to make the process easier for all developers. With only a few commands, without any configuration, you can get a full-stack application on AWS and here is the demo of the full-stack application.

Not only it's hosted on AWS, but it also includes UI components built with React and Next.js styled with Tailwind CSS. So, making a simple full-stack application with Nextless.js is a breeze with 100% Serverless (Frontend, Backend and Database).

A Free and Open-Source Responsive Portfolio Template built with Astro.js and React

Remi W. — Wed, 25 May 2022 14:37:41 +0000

A Free and Open Source Responsive Template for Portfolio and Blog built with Astro.js and React styled with Tailwind CSS. Here is a screenshot:

Here is the screenvideo:

Or, you play around a live demo at: Astro boilerplate Live demo

The source code is hosted on GitHub at Astro Boilerplate GitHub. The project is built from scratch and recently released. So, every GitHub ⭐ counts!

The project includes everything you need for your blog with:

Sitemap.xml
Feed RSS
Robots.txt
Pagination
Typography
Syntax highlighting for code
Markdown
Image lazy load
Newsletter component

ixartz / Astro-boilerplate

🚀 Astro boilerplate with responsive blog and portfolio template using TypeScript and React styled with Tailwind CSS ⚡️ Made with developer experience first: TypeScript + ESLint + Prettier + Husky + Lint-Staged + Commitlint + VSCode

Astro Boilerplate with TypeScript and Tailwind CSS

🚀 Astro Boilerplate is starter code for your blog or portfolio based on Astro with Tailwind CSS 3.0. ⚡️ Made with Astro, TypeScript, ESLint, Prettier Tailwind CSS.

Clone this project and use it to create your own Astro blog. You can check the Astro templates demo.

Features

A complete Blog feature:

🎈 Syntax Highlighting
🤖 SEO friendly with sitemap.xml and robots.txt
⚙️ RSS feed
📖 Pagination
🌈 Include a dark blog theme
⬇️ Markdown
📦 Image lazy loading
💎 Responsive design

Developer experience first:

🔥 Astro
🎨 Tailwind CSS with aspect ratio and typography plugin
🎉 TypeScript
✏️ ESLint compatible with .astro files
🛠 Prettier compatible with .astro files
🦊 Husky
🚫 lint-staged
🚨 Commitlint
🔧 One-click deploy on Netlify (or, manual if you prefer)

ESLint with:

Airbnb styled guide
TypeScript compatible
Astro compatible
Automatically remove unused…

View on GitHub

How to configure ESLint, Prettier, Husky, Lint-staged into a React project with TypeScript and Tailwind CSS

Remi W. — Thu, 28 Apr 2022 12:52:24 +0000

As a software developer, you have preferences and habits that you want to follow when writing your code. You want to be able to write code that is readable, maintainable, and scalable.

When you are working in a team with other developers, everybody has their own coding standards and they can be different. It makes the code difficult to read and maintain. How do you settle the differences? You will have to reach a compromise and pick a preferred style for that project.

Tools such as ESLint, Prettier, Husky, and Lint-staged can help enforce a coding and formatting style. It also spots errors rapidly in your JS application. These tools keep developers focused on solving problems rather than debating which formatting style is best. They also help you to write code unified code across all your projects.

ESLint is a code analysis tool, or linter, for identifying and reporting on patterns in JS. It's a pluggable and configurable tool that finds and fixes problems in your JavaScript or Node.js code.

Prettier is an opinionated code formatter that formats your code according to a set of rules. It ensures that your programs follow a consistent coding style.

Adding ESLint, Prettier, and Husky to your React project will avoid mistakes in your code by making sure that your code follows best practices. It also helps developers write a consistent code style.

For your information, I'm the author of a boilerplate with ESLint, Prettier, Husky, and Lint-staged already configured and ready to use. If you don't want to lose your time, you can check out my React Boilerplate on GitHub.

In this article, I will guide you through how to configure these tools stated above.

Empty Project Setup

You will need to create a TypeScript React project using create-next-app. Then, you also need to install and configure all the necessary NPM packages.

React & TypeScript Configuration

TypeScript is an open-source typed programming language developed by Microsoft. It builds on top of JavaScript with a strict syntax and type checking.

🚀 Open your favorite terminal

🚀 Run npx create-next-app@latest --ts to create a TypeScript Next.js project.

npx create-next-app@latest --ts

ESLint Configuration

ESLint is highly configurable and can be configured to enforce a specific coding style. You can set up ESLint rules one by one or you can use a preset.

In this tutorial, we will use the Airbnb style guide for TypeScript: eslint-config-airbnb-typescript.

🚀 Add ESLint to the project dependency list

npm i eslint --save-dev

🚀 Install Airbnb ESLint style guide dependencies and its peer dependencies.

npm install eslint-config-airbnb-typescript @typescript-eslint/eslint-plugin @typescript-eslint/parser --save-dev

🚀 Create and configure the .eslintrc file by adding Airbnb and ESLint configuration. We also need to indicate to ESLint that we are using TypeScript. We'll also add next/core-web-vitals to use a stricter ESLint configuration for Next.js:

{
  "extends": ["next/core-web-vitals", "airbnb", "airbnb-typescript"],
  "parserOptions": {
    "project": "./tsconfig.json"
  }
}

🚀 Add Prettier, eslint-plugin-prettier, eslint-plugin-prettier to the project's dependency.

npm install  prettier eslint-plugin-prettier eslint-config-prettier --save-dev

These three packages load Prettier into ESLint. ESLint will automatically highlight formatting issues in your code based on Prettier rules.

🚀 Install the eslint-plugin-unused-imports plugin, it helps you to find unused imports.

npm install eslint-plugin-unused-imports --save-dev

🚀 Add unused-imports to the plugins section of your .eslintrc configuration file. You can omit the eslint-plugin- prefix:

...
  "plugins": ["unused-imports"]
...

🚀 Install eslint-plugin-tailwindcss to lint Tailwind CSS class. It contains rules enforcing best practices and consistency when working with Tailwind CSS.

npm i eslint-plugin-tailwindcss --save-dev

🚀 Add tailwindcss to the plugins section of your .eslintrc configuration file:

{
  "plugins": ["unused-imports", "tailwindcss"]
}

🚀 Then, you need to add all the recommended rules from the Tailwind CSS plugin:

{
  "extends": [..., "plugin:tailwindcss/recommended"]
}

🚀 Lint all the .js, .jsx, .ts, and .tsx files within the project folder. After running the command below, it'll display all the errors you need to address.

npx eslint . --ext .js,.jsx,.ts,.tsx

🚀 node_modules is ignored by ESLint in the default configuration. You can also add more files to ignore by creating a .eslintignore file.

Husky and Lint-staged Setup

Husky is a JavaScript package that allows you to run some code during different stages of the git workflow. On the other hand, Lint-staged is a JavaScript package that helps you to run linter on files that will be committed on Git.

🚀 Initialize Git in the project directory.

git init

🚀 Install Husky and Lint Staged.

npx mrm@2 lint-staged

The code above command will install and configure Husky and Lint-staged. Add lint-staged and husky in the package.json file. It also creates a .husky folder.

🚀 Optional: You can create a lint-staged.config.js file that holds all the Lint-staged configuration. Check out all the different ways to configure lint-staged if you don't want Lint-stage configuration in your package.json.

VSCode ESLint & Prettier Configuration

Visual Studio Code provides ESLint and Prettier extensions that you can install. These extensions give you access to all functionalities discussed in this tutorial.

To install these extensions:

🚀 Open your VS Code

🚀 Click on the Extensions icon on the sidebar or run the command Ctrl + Shift + x.

🚀 Search for "dbaeumer.vscode-eslint" to install ESLint and "esbenp.prettier-vscode" for Prettier.

🚀 Close and re-open VSCode to use the newly installed extensions.

Conclusion

Integrating ESLint, Prettier, Husky, and Lint-staged in a TypeScript React project reduce conflicts based on coding and formatting styles. It helps developers to focus on writing high-quality code.

If you are working on a project, it's highly recommended to have these tools set up first. You can avoid making mistakes in your code: it makes your code more readable with a consistent coding style.

If you're building your own SaaS application and want to have the same Developer experience, I've made a React SaaS Starter kit. It includes by default ESLint, Prettier, Husky, and Lint-staged already configured with TypeScript for you. So, you can start working on your SaaS project right away instead of losing your time with boring configurations.

In Nextless.js, you'll also find everything you need to build faster your SaaS:

Email & Social auth
Subscription payment
Team support
Landing page & Dashboard
Form & Error management
Deployed on AWS

DEV Community: Remi W.

The Ultimate 2024 Tech Stack for Solo SaaS Developers: Build Smarter, Not Harder

Next.js, the Backbone of the Stack

Only One Language, TypeScript

Shadcn UI with Tailwind CSS

Authentication

Multi-tenancy and Team Management

Role and Permission

Database

Stripe

Internationalization (i18n)

Form Management

Testing

GitHub Actions

Logging

Error Monitoring

Environment Variables

Linter and Code Formatter

VSCode

Conclusion

🚀 Next.js Boilerplate just hit 6000+ ⭐ stars on GitHub! 🔥 6️⃣0️⃣0️⃣0️⃣ 🔥

How to Build a SaaS on AWS: a deep dive into the architecture of a SaaS product

Architecture Diagram

Frontend

Backend

Infrastructure

Authentication

Database

Logging

Email service

Subscription payment

Conclusion

Build a Free Twitter Scheduler with Next.js

UI and Forms

Global Redis Database

Connect to the Redis database

Edge API Routes to store in the database

Post on Twitter using code

Schedule your tweets

Conclusion

Currying Layout Component Patterns in Next.js

The limitation of the Layout component pattern

Currying Layout component is the solution

Build the future of web development with Next.js Edge Rendering and globally distributed database

Edge Computing

Edge Server-Rendering

How I host my Full-stack Application SaaS for Free on AWS

Context

Authentication

Frontend

Backend

Database

Monitoring, Logging and Observability

Email

Conclusion

How to get 2000+ stars on GitHub with 11 places to promote your project

Preparation for a successful promotion

1. Google with SEO

2. Twitter

3. Reddit

4. Awesome lists

5. Publish aggregator websites

6. Indie Hacker

7. Write a blog post

8. Discord

9. Newsletter

10. GitHub Trends

11. Github Explore

Conclusion

My Next.js Boilerplate now has 2000+ GitHub stars

ixartz / Next-js-Boilerplate

Boilerplate and Starter for Next.js 14+, Tailwind CSS 3.4, and TypeScript.

Sponsors

Demo

Features

Building a Full Stack Application on AWS: 100% Serverless

Be Comfortable With a Programming Language

Quick Facts About JavaScript

Jump on a Framework for Infrastructure as Code

1. Amplify Hosting