Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/one-aalam/ng-starter-kit
Angular with Supabase, and other bells and whistles
https://github.com/one-aalam/ng-starter-kit
angular angular13 daisyui starter-kit starter-template supabase supabase-js supabase-storage tailwindcss
Last synced: 24 days ago
JSON representation
Angular with Supabase, and other bells and whistles
- Host: GitHub
- URL: https://github.com/one-aalam/ng-starter-kit
- Owner: one-aalam
- Created: 2021-11-20T09:29:48.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2021-12-06T05:08:25.000Z (almost 3 years ago)
- Last Synced: 2024-09-28T11:01:49.946Z (about 1 month ago)
- Topics: angular, angular13, daisyui, starter-kit, starter-template, supabase, supabase-js, supabase-storage, tailwindcss
- Language: TypeScript
- Homepage:
- Size: 1.5 MB
- Stars: 16
- Watchers: 3
- Forks: 4
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
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](https://supabase.io/) 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, `error` or `default` 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:
```bash
yarn build:lib
```
as a one-time activity to have commonly used UI components available to the main Angular app, and then do a
```bash
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](https://app.supabase.io/)
- 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//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//editor/sql`
```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/supabase` or `import { ... } 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