Ultimate Web Starter 2023: Part II

In the first part of this series, we introduced the ultimate web starter stack for 2023, consisting of Next.js, TypeScript, Material UI, Apollo Client and Server, Vercel’s edge functions, MongoDB, and NextAUTH. In this part I’ll put some reasoning behind my choices. In this next instalments, we will dive deeper and demonstrate how to put these technologies into action by building a real-world web application. You’ll see first-hand how these technologies work together to provide a fast, easy, and scalable development experience. Whether you’re a seasoned web developer or just starting out, this series will provide valuable insights and practical knowledge that you can use to build your own web applications. So, let’s get started and create the ultimate web app of 2023!

1. Initialise a Next.js project with TypeScript:

yarn create next-app — typescript

Main reason to choose TypeScript is improved debugging. Sometimes it’s warnings are separate problems, but keep in mind that TypeScript can be configured in a non-restrictive manner, allowing developers to choose the level of strictness they want to apply. This allows for more flexibility and can make it easier to adopt TypeScript gradually. With prettier, linter, and co-pilot generating code that is syntactically correct never been easier.

2. Add Material UI and icons:

yarn add @mui/material @emotion/react @emotion/styled

Other valid choice is Tailwind CSS. Material UI and Tailwind CSS are both popular front-end libraries that provide pre-built UI components and styling options for web development. However, they have different approaches and philosophies, which may make them better suited for different use cases.

Material UI’s components are highly customisable, and it offers theming support that makes it easy to change the look and feel of an entire application. Material UI’s components are also highly accessible and follow best practices for responsive design.

On the other hand, Tailwind CSS is a utility-first CSS framework that provides a set of pre-built CSS classes that can be used to style HTML elements. Tailwind CSS provides a low-level, highly flexible way to style elements, which makes it well-suited for rapid prototyping and customization. It also provides a powerful way to create responsive designs with its built-in responsive utilities.

Overall, the choice between Material UI and Tailwind CSS will depend on the specific needs and preferences of the project. Material UI may be a better choice for projects that require a highly customisable set of pre-built components, while Tailwind CSS may be a better fit for projects that need a flexible, utility-based approach to styling.

3. Install Apollo Client, Apollo-Server:

yarn add @apollo/client apollo-server graphql

There are several factors to consider when deciding whether to use a separate data-layer like Apollo in a Next.js app, now when React 18 fetch deduplication and caching is available and the database can be accessed in Server Components.

Firstly, Apollo provides a number of features beyond just fetching and caching data, such as optimistic UI updates, real-time subscriptions, and pagination. If your application requires any of these features, using Apollo may be a better choice.

Secondly, if your application needs to integrate with multiple data sources, such as REST APIs, GraphQL APIs, and databases, using a single, unified data-layer like Apollo can simplify your code and make it easier to manage your data.

Thirdly, if your application has complex data requirements, such as complex data transformations or aggregations, using a data-layer like Apollo can provide a more powerful and flexible solution.

Finally, it’s worth noting that while React 18 fetch deduplication and caching can improve performance and reduce network requests, it may not be enough on its own for all use cases. Depending on the size and complexity of your application, you may still benefit from using a more sophisticated data-layer like Apollo.

In summary, while React 18 fetch deduplication and caching and Server Components provide some improvements in data handling, using a separate data-layer like Apollo can still be a valuable choice depending on the specific needs and complexity of your application.

5. Install Mongo db

yarn add mongodb

My alternatives for this part are: Firebase, Supabase, Back4app, and MongoDB:

Firebase:

• Provides a range of services, including real-time database, authentication, and hosting
• Offers a free tier with limits on usage, and paid plans for higher usage
• Provides mobile SDKs for iOS and Android, as well as a web SDK
• Good for building mobile and web apps quickly, with real-time data sync and authentication built-in
• May be less flexible than a custom database in terms of data modeling and querying

Supabase:

• Offers a range of services, including real-time database, authentication, and hosting
• Provides a free, open-source alternative to Firebase
• Offers a PostgreSQL-based database that is fully managed, and can be used with other tools and libraries that work with PostgreSQL
• Provides APIs for authentication, real-time data sync, and other features
• Good for building web apps that require real-time data sync and authentication

Back4app:

• Provides a range of services, including a fully-managed backend based on Parse Server, and hosting
• Offers a free tier with limits on usage, and paid plans for higher usage
• Provides SDKs for multiple platforms, including iOS, Android, and web
• Good for building mobile and web apps quickly, with a focus on ease of use and fast development

MongoDB:

• A popular NoSQL database that is highly flexible and scalable
• Provides a flexible document-based data model that can accommodate a range of data types and structures
• Offers a wide range of tools and libraries that work with MongoDB
• Good for building applications that require flexible data modeling and querying, and can scale to handle large volumes of data

In general, Backend-as-a-Service solutions like Firebase, Supabase, and Back4app can provide a faster, more convenient way to build applications by providing pre-built services and APIs for common features like real-time data sync and authentication. However, they may be less flexible than a custom database solution like MongoDB, which provides more control over data modeling and querying. The choice between these solutions will depend on the specific needs and constraints of the project, as well as the development team’s experience and preferences.

6. Next Auth

yarn add next-auth

NextAuth.js is a flexible and easy-to-use authentication library that provides a variety of authentication strategies for React apps. It’s built specifically for Next.js, developers can easily add authentication to their apps using popular providers like Google, Facebook, and GitHub, or build their own custom authentication providers. NextAuth.js provides a seamless user authentication experience and comes with a range of features like passwordless authentication, multi-factor authentication, and support for access tokens and refresh tokens. It’s easy to set up and use, and can save a significant amount of development time and effort when it comes to implementing authentication in React apps. Overall, NextAuth.js is a great choice for React developers who want to quickly and easily add authentication to their apps.

7. About Server

Next.js API routes provide a simple and scalable way to create server-side functionality for Next.js apps. These routes can be used to handle requests for data or perform server-side computations, and can be set up quickly and easily. With Next.js, developers can create Serverless functions and Edge functions that can be deployed cheaply and can scale easily to handle high levels of traffic. These functions can be used to handle tasks like fetching data from a database or performing complex computations on the server. With the addition of Server Components, server functions near components make even more sense, allowing developers to use them to directly access a database, create dynamic web pages, and more. This makes it an excellent choice for developers who want a simple, scalable, and cheap way to create a server for their Next.js apps.

Will bring it all together in Part III