Git Product home page Git Product logo

angular-ngrx-material-starter's Introduction

Angular 13, NgRx, Angular Material and Tailwindcss Starter

by @ilwebdifabio

License: MIT code style: prettier

Table of Content

Getting Started

  • Client
git clone https://github.com/whisher/angular-ngrx-material-starter.git client-project
cd client-project
npm install
npm start
  • Server
git clone https://github.com/whisher/express-prisma-starter.git server-project
cd server-project
npm install
git checkout feature/examples // Crud todo
npm start
  • Insert two users via signin form (or Postman)
  • Using prisma studio to set an admin role

Useful Commands

  • npm start - starts a dev server
  • npm run start:prod - runs full prod build and serves prod bundle
  • npm run test - runs lint and tests
  • npm run format:write - runs prettier to format whole code base (.ts and .scss)
  • npm run analyze - runs full prod build and webpack-bundle-analyzer to visualize how much code is shipped (dependencies & application)

Goals

The main goal of this repository is to provide a real word (you can use express-prisma-starter) up to date example of Angular application following all recent best practices in various areas like:

  • @ngrx/store - including reducers, actions, selectors
  • @ngrx/effects - for implementation of side effects like http requests, logging, notifications,...
  • @ngrx/entity - for CRUD operations
  • @ngrx/data - for CRUD operations
  • @ngrx/component-store - is a stand-alone library that helps to manage local/component state.
  • @ngrx/component - a set of primitive reactive helpers to enable fully reactive, Zoneless applications.
  • @ngrx/router-store - to connect the Angular Router to @ngrx/store
  • @ngrx/store-devtools - to enable a powerful time-travelling debugger.
  • @angular/material - material design component library, theming, ...
  • routing
  • testing of all the above mentioned concepts
  • a few useful testing stubs
  • Angular CLI configuration (prod build, budgets, ...)

Features

  • Two layout public and admin
  • Auth with guard
  • Lazy-loading of feature modules
  • LocalStorage ui state persistence
  • I18n
  • No scss files in the components
  • Use material color in tailwindcss

Stack

  • Angular
  • Ngrx
  • Angular Material
  • Tailwindcss

Credits

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.