https://github.com/uspiri/user-posts
đź’Ľ Users&Posts | An authentication role based app with Angular 18
https://github.com/uspiri/user-posts
angular tailwindcss
Last synced: 3 months ago
JSON representation
đź’Ľ Users&Posts | An authentication role based app with Angular 18
- Host: GitHub
- URL: https://github.com/uspiri/user-posts
- Owner: USpiri
- Created: 2024-09-18T07:39:00.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2024-09-18T17:11:40.000Z (almost 2 years ago)
- Last Synced: 2025-04-05T05:41:54.465Z (about 1 year ago)
- Topics: angular, tailwindcss
- Language: TypeScript
- Homepage:
- Size: 240 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# đź’Ľ Users&Posts
AplicaciĂłn web con Angular 18 que implementa un sistema de autenticaciĂłn con roles y el CRUD de posteos.
TypeScript - Tailwing - Signals
•
•
•
•
•
## About Users&Posts
Este proyecto es generado con [Angular CLI](https://github.com/angular/angular-cli) version 18.2.4 como aplicaciĂłn standalone. Implementa un sistema de autenticaciĂłn basado en roles. Estos roles pueden ser 'user' o 'admin'. Dependiendo del rol, tienen acceso a diferentes funcionalidades, como la visualizaciĂłn, creaciĂłn o ediciĂłn de datos obtenidos desde una API externa.
> [!NOTE]
> Hay varios items a destacar, resultado de ser parte de un challange y no una aplicaciĂłn completa como tal:
> - SimulaciĂłn de base de datos y llamados a API de usuarios: [Debajo añado las credenciales](#Usuarios-de-prueba) disponibles. En un entorno real, esta simulaciĂłn no existirĂa.
> - JWT: Se toma como supuesto que se utiliza un BearerToken, se ha implementado un interceptor que inyecta en la cabecera de las peticiones este token si está disponible.
> - Testing: En algunos componentes como formularios, guards, etc.
## 🛠️ TecnologĂas utilizadas
- [Angular](https://angular.dev/): Framework principal del proyecto, en su Ăşltima versiĂłn.
- [Tailwind](https://tailwindcss.com/): Framework css para añadir estilos.
- [CSS](https://developer.mozilla.org/es/docs/Web/CSS): Aplicación de css moderno con técnicas como [nesting](https://caniuse.com/css-nesting) o [field-sizing](https://caniuse.com/mdn-css_properties_field-sizing).
- [Lucide Icons](https://lucide.dev/): LibrerĂa de iconos.
- [Eslint](https://eslint.org/) y [Prettier](https://prettier.io/): Formato y calidad de cĂłdigo.
## 🚀 Features
- **Responsive Design**: Diseño minimalista, de fácil adaptación atractiva, accesible e intuitiva.
- **LazyLoading**: Cada página cuenta con su propia carga perezosa.
- **Standalone Components**: La aplicaciĂłn esta construida en su totalidad mediante [standalone components](https://angular.dev/guide/components/importing#standalone-components) reduciendo la necesidad de mĂłdulos.
- **[Signals](https://angular.dev/guide/signals)**
- **JWT Authentication** (simulada): Bearer Token con injector.
- **Role Guard & Auth Guard**: ProtecciĂłn de rutas.
- **Custom toasts**: Sistema personalizado de toasts (notificaciones).
- **CRUD de posts**:
- **GET**: Los usuarios "admin" y "user" pueden visualizar los datos obtenidos desde una API externa (por defecto, se utilizĂł https://jsonplaceholder.typicode.com/).
- **POST y PATCH: Solo el usuario "admin" puede crear y actualizar datos.**
- ComunicaciĂłn con API utilizando el servicio de Angular para realizar solicitudes HTTP
- **Filtro y paginaciĂłn**: Implementado mediante signals.
## Usuarios de prueba
- Usuario "admin":
```
Email: admin@test.com
Password: admin123
```
- Usuario "user":
```
Email: user@test.com
Password: user123
```
## Estructura de Carpetas
```bash
src/
├── app/
│ ├── features/ # Funcionalidades principales
│ │ ├── login/ # Autenticación
│ │ └── posts/ # Posts
│ │ │ ├── components/ # Componentes especificos
│ │ │ └── pages/ # Páginas/rutas/vistas
│ ├── shared/ # Elementos compartidos por todo el sistema
│ │ ├── components/
│ │ ├── guards/
│ │ ├── interceptors/
│ │ ├── layouts/ # Componentes que envuelven el sistema
│ │ ├── models/ # Interfaces y tipos
│ │ ├── services/
│ │ └── utils/ # Simula la API
│ └── app.routes.ts # Configuración de rutas protegidas con Lazy Loading
├── environments/ # Variables de entorno
├── index.html
├── main.ts # Bootstrap
└── styles.css # Estilos globales y configuración de Tailwind
```
## InstalaciĂłn y ejecuciĂłn
> [!WARNING]
> **Node verion**: 18.19.1 o mayor.
### Instalar dependencias
```
npm install
```
### Servidor local
```
ng serve
```
- Navegar a `http://localhost:4200/`
### Build
```
ng build
```
- Generará el bundle en la carpeta `dist/`
### Tests
```
ng test
```
- Realizado en los componentes más relevantes (Formularios, guards, etc.)
