Angular + Supabase starter for Typescript lovers

Angular Starter Kit is an opinionated boilerplate based off of Angular 13, with all the bells and whistles you would want ready, up and running when starting a Angular project to work with.

Out of the box you get all the essentials

• Typescript as the language choice
• Tailwind CSS for quick styling without getting out of your HTML
• Daisy UI for pre-made TailwindCSS component classes
• Tailwind UI for robust headless logic you can use for components like Dialog/Modal, Dropdown, List, etc.
• FontSource for effortless custom font integration
• Icons through Fontawesome for ease of icon use
• ESLint for static code analysis and
• Prettier for code formatting
• Jest for unit testing
• Cypress for e2e test cases
• .env Support for client-side environment variables

with Supabase support

• Authentication System with Supabase GoTrue
• User Profiles available on /profile as an example for Supabase PostgREST (CRUD API)
• User Avatar which is Supbase Storage(AWS S3 backed effortless uploads) supported

and a bunch of integrated and pre-made/hand-rolled(easily replace-able) components (as a library project - projects/commons), that you almost always end up installing/using for any non-trivial project

• Button Button with DaisyUI style support for all the basic use cases
• Alert/Toast to notify your users of the outcome of an event - success, errorordefault` is supported
• Modal(@ngneat/dialog) as you always come back to `em
• Loaders for reporting the progress of an API call + a page load
• Avatar for user avatar's

and more...

Quick Start

The best way to start with this template is to click "Use this template" above, create your own copy and work with it

Development

To start the project locally, run:

yarn build:lib

as a one-time activity to have commonly used UI components available to the main Angular app, and then do a

yarn start

which kickstarts the Angular development and build server. Open http://localhost:4200 with your browser to see the result.

Check package.json for the full list of commands available at your disposal.

Developing the library

For building the library(/projects/commons), you have build:lib for compiling the code. Once compiled, the updated code can pulled by doing a import { CommonsModule } from 'commons' which will include all the common components like spinner, avatar, etc. in your module. The App development server needs to be re-booted, after compilaton to have the updated code available.

How to Setup Supabase for Angular Starter Kit?

If new to Supabase

• Create account at Supabase
• Create a Organisation, and a project

Once done, or if you already have a Supabase project

• Copy the generated project's API authentication details from https://app.supabase.io/project/<your-awesome-ng-project>/api/default?page=auth
• Place the details in .env as SUPABASE_URL and SUPABASE_KEY
• Install NPM dependencies, by running yarn

Nuxt Start Kit supports user profiles and user avatars. To get the profile table and storage ready, execute the following queries at https://app.supabase.io/project/<your-awesome-ng-project>/editor/sql

-- Create a table for Public Profiles
create table profiles (
  id uuid references auth.users not null,
  username text unique,
  avatar_url text,
  website text,
  updated_at timestamp with time zone,

  primary key (id),
  unique(username),
  constraint username_length check (char_length(username) >= 3)
);

alter table profiles enable row level security;

create policy "Public profiles are viewable by everyone."
  on profiles for select
  using ( true );

create policy "Users can insert their own profile."
  on profiles for insert
  with check ( auth.uid() = id );

create policy "Users can update own profile."
  on profiles for update
  using ( auth.uid() = id );

-- Set up Storage!
insert into storage.buckets (id, name)
values ('avatars', 'avatars');

create policy "Avatar images are publicly accessible."
  on storage.objects for select
  using ( bucket_id = 'avatars' );

create policy "Anyone can upload an avatar."
  on storage.objects for insert
  with check ( bucket_id = 'avatars' );

Convenience Imports

• @env - Access the environment files
• @app - Access the code placed inside /src/app. Use /@app/components to access commonly used app components
• @modules - Access the code placed inside /src/app/modules. This lets you to do something like import { ... } from @modules/supabaseorimport { ... } from @modules/auth to use the functions from the respective modules.
• @lib - Just in case if you think of keeping app-specific libraries under /src/lib. However, it's reccomended to place the commonly used, app-wide components, directives, pipes, services, etc. in the /projects/commons/lib, expose through public-api.ts and use through import { ... } from commons`.
• commons - The central place to put all the commonly used code.

License

MIT