Angular Full Stack Open Source Boilerplate Starter with Payload CMS, ExpressJs, Nx, Tailwindcss

Complete Angular Starter with PayloadCMS. The only boilerplate you need.

Customize the dynamic main and footer navigation links in binarystarter angular boilerplate

Dynamic Main and Footer Navigation Links

Add or remove links per your liking from the main header navigation and footer navigation.

This shows how powerful this boilerplate starter is and how far you can go building your SaaS or Startup custom app.

Start using it right now!

Create your own custom application logic and leverage the CMS' powerful Layout Builder

This powerful angular starter comes with a SEO-friendly side of the application, as well as a client side for logged in users or customers.

Leverage the built-in Payload CMS layout builder using your own blocks and logic styled using Angular, Tailwind CSS and Angular Material.

This boilerplate is suitable for any application, be it Software as a Service (SaaS), presentational website, blog or in-house CMS. Your imagination will have no limitations when it comes to this boilerplate starter.

In our templates everything is a block: products listing, blog posts listing, blog posts etc. Customize the pages without any limitations directly from the administration panel. These will instantly be available and SEO-friendly.

What can I achieve using binarystarter angular starter boilerplate
payloadcms admin preview image

Manage content through the integrated Open Source CMS using PayloadCMS

You can leverage the powerful integrated CMS to customize and manage the content of your custom application.

In our ready to use templates everything is dynamically updated and customizable using the integrated CMS:

  • Create new Pages which are automatically recognized by the app;
  • Customize pages using the built-in Layout Builder and the available blocks
  • Create new layout blocks as per your needs
  • Manage blog posts
  • Blogging Available
  • Manage digital store products
  • Store Blocks Available
  • Add new links to the main header navigation
  • Add links in the footer navigation

ExpressJs Server integrated with Payload CMS out of the box

We get all the benefits of a mono repository out of the box.

ExpressJs is tightly integrated with PayloadCMS, but you can still add your own routes, outside of Payload.

We believe in TypeScript, hence everything is based on TypeScript.

ExpressJs Server integrated with Payload CMS out of the box
authentication and authorization functionalities

Authentication and Authorization

The authentication system is based on Passport Js.

Out of the box you get the following pages in Angular,

connected with the ExpressJs and Payload CMS

Angular SSR and Dashboard Apps

Angular comes with separated modules for the static pages and the single page application.

Separation of concerns is very important at this stage of development of the Angular Universal.

Static Pages are encapsuled in their modules and they don’t interact with browser APIs hungry components.

angular dashboard in a single page app (SPA)

Shared Types between Backend Framework and Frontend

The Backend TypeScript types should not be available on the Frontend.

Most developers create the same types on both frontend and backend APIs, making a bad precedence of duplicated code.

This problem is solved by using a mono repository.

Managed by nx.dev tools - now extending TypeScript types from the Backend or creating them from scratch can be done in a single shared library between your Angular app and ExpressJs Backend.

shared types between angular and express server
There's no design requirement that cannot be met with Angular Material and TailwindCSS

Style to your liking using Angular Material and TailwindCSS

Tailwind CSS and Angular Material both come out of the box, preconfigured, and ready to be used.

Customize the theme which is automatically available between both tailwindcss and angular material. Our templates use blocks whose stylings are customizable using the tailwindcss classes.

Built with