Builder Book logo

Book: SaaS Boilerplate

  1. Introduction. Project structure.
  2. GitHub. VS Code Editor. Node. Yarn. TypeScript. TSLint. Next.js. Environmental variables.
  3. Material-UI. Theme. Dark theme. Shared layout. Shared styles. Shared components. Mobile browser.
  4. Servers. Logs. Fetch method. API methods.
  5. MobX. withStore HOC. Login page. withAuth HOC. Index page.
  6. User (model, store, pages, components). Mongoose, MongoDB. Tests. Session. Settings page. AWS S3. File upload.
  7. Google OAuth. Mailchimp.
  8. AWS SES. EmailTemplate. Welcome email.
  9. Passwordless OAuth.
  10. Team. Invitation. Invitation email.
  11. Stripe. Customer. Subscription. Invoice.
  12. Discussion. Post.
  13. Web sockets.
  14. Create Post via email. AWS Lambda. AWS API Gateway.
  15. Deploy to AWS Elastic BeanStalk.

Chapter 2: Material-UI. Theme. Dark theme. Shared layout. Shared styles. Shared components. Mobile browser.

Available for pre-order for $99. The price becomes $199 once published.

In Chapter 2, you will start with the codebase in the 2-begin folder of our saas repo and end up with the codebase in the 2-end folder.
We will cover the following topics in this chapter:

  • Material-UI
  • Client-side and server-side rendered pages
  • Dark theme
  • Shared layout
  • Shared styles
  • Shared components
  • MenuWithLinks
  • Notifier
  • Confirm
  • Mobile browser

In this chapter, we will integrate our app project, which is currently a simple Next.js server, with Material-UI. We will also dive deeper into server-side versus client-side rendering. For example, you will learn when a Next.js app renders pages on the server and when on the client. You will learn how to make environmental variables - which are available only on the server only by default - available on the client. You will learn how to tell your Next.js app if a user's browser is mobile, so the app can render the page on the server with styles that are appropriate for a mobile browser.

In addition to the above, we will create shared layout, styles, and components for our app project.

link Material-UI

As you develop your own project, you can choose to create your own styles and apply these styles to components and pages. In this chapter, in subsection Shared styles, we show different ways to add shared styles. We, as a small team of three software engineers, find it challenging to create and maintain a constistent styling library. We find our time better spent on listening to our customers and adding/improving business logic into our projects. If you have a dedicated designer on your team, you may want to create your own styling library. However, if you are small team like us, we recommend using an existing library. We chose Material-UI for React. Material-UI is inspired by Material Design.

We find the Material-UI library straighforward to use, relatively mature, and well-maintained by its active team of contributors. As for design, it seems relatively clean and familiar to most users, since it is based on Google's Material Design.

It's important to note that pages in Next.js can be rendered on either the server or the client (the browser). Material-UI supports server-side rendering; however, you have to properly integrate your Next.js project with the Material-UI library.

To integrate our Next.js app with Material-UI, we will follow the official example from Material-UI's public repository:

The section above is a preview of this book, which is in progress. You can pre-order the book for $99. The price after book's completion will be $199.

If you pre-order the book, you will be emailed about new chapters as they become available.

The book is to be completed by May 1, 2020.

Available for pre-order for $99. The price becomes $199 once published.