{"id":16039511,"url":"https://github.com/uspiri/user-posts","last_synced_at":"2026-04-14T15:32:30.878Z","repository":{"id":257736824,"uuid":"859162711","full_name":"USpiri/user-posts","owner":"USpiri","description":"💼 Users\u0026Posts | An authentication role based app with Angular 18","archived":false,"fork":false,"pushed_at":"2024-09-18T17:11:40.000Z","size":246,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-05T05:41:54.465Z","etag":null,"topics":["angular","tailwindcss"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/USpiri.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-09-18T07:39:00.000Z","updated_at":"2024-09-18T17:11:43.000Z","dependencies_parsed_at":"2024-09-18T10:56:44.277Z","dependency_job_id":"22979ec2-d736-4eb5-9fd1-7a2da95f8194","html_url":"https://github.com/USpiri/user-posts","commit_stats":null,"previous_names":["uspiri/user-posts"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/USpiri%2Fuser-posts","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/USpiri%2Fuser-posts/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/USpiri%2Fuser-posts/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/USpiri%2Fuser-posts/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/USpiri","download_url":"https://codeload.github.com/USpiri/user-posts/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247294463,"owners_count":20915338,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","tailwindcss"],"created_at":"2024-10-08T23:05:06.359Z","updated_at":"2026-04-14T15:32:30.845Z","avatar_url":"https://github.com/USpiri.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ca name=\"readme-top\"\u003e\u003c/a\u003e\r\n\r\n# 💼 Users\u0026Posts\r\n\r\n\r\n\u003cp align=\"center\"\u003e\r\n  \u003cimg src=\"https://github.com/angular/angular/blob/main/adev/src/assets/images/press-kit/angular_icon_gradient.gif\" alt=\"angular-logo\" width=\"120px\" height=\"120px\"/\u003e\r\n  \u003cbr\u003e\r\n  \u003cem\u003eAplicación web con Angular 18 que implementa un sistema de autenticación con roles y el CRUD de posteos.\r\n    \u003cbr\u003eTypeScript - Tailwing - Signals\u003c/em\u003e\r\n  \u003cbr\u003e\r\n\u003c/p\u003e\r\n\r\n\u003cp align=\"center\"\u003e\r\n  \u003cimg src=\"https://img.shields.io/badge/Angular-DD0031?style=for-the-badge\u0026logo=angular\u0026logoColor=white\"/\u003e\r\n  •\r\n  \u003cimg src=\"https://img.shields.io/badge/Jasmine-8A4182?style=for-the-badge\u0026logo=Jasmine\u0026logoColor=white\" /\u003e\r\n  •\r\n  \u003cimg src=\"https://img.shields.io/badge/Tailwind_CSS-38B2AC?style=for-the-badge\u0026logo=tailwind-css\u0026logoColor=white\" /\u003e\r\n  •\r\n  \u003cimg src=\"https://img.shields.io/badge/prettier-1A2C34?style=for-the-badge\u0026logo=prettier\u0026logoColor=F7BA3E\" /\u003e\r\n  •\r\n  \u003cimg src=\"https://img.shields.io/badge/eslint-3A33D1?style=for-the-badge\u0026logo=eslint\u0026logoColor=white\" /\u003e\r\n  •\r\n  \u003cimg src=\"https://img.shields.io/badge/TypeScript-007ACC?style=for-the-badge\u0026logo=typescript\u0026logoColor=white\" /\u003e\r\n\u003c/p\u003e\r\n\r\n## About Users\u0026Posts\r\n\r\nEste 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.\r\n\r\n![24shots_so](https://github.com/user-attachments/assets/9df71aad-d5e1-4f65-bf5c-9430fcacad58)\r\n\r\n\u003e [!NOTE]\r\n\u003e Hay varios items a destacar, resultado de ser parte de un challange y no una aplicación completa como tal:\r\n\u003e - 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.\r\n\u003e - 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.\r\n\u003e - Testing: En algunos componentes como formularios, guards, etc.\r\n \r\n## 🛠️ Tecnologías utilizadas\r\n\r\n- [Angular](https://angular.dev/): Framework principal del proyecto, en su última versión.\r\n- [Tailwind](https://tailwindcss.com/): Framework css para añadir estilos.\r\n- [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).\r\n- [Lucide Icons](https://lucide.dev/): Librería de iconos.\r\n- [Eslint](https://eslint.org/) y [Prettier](https://prettier.io/): Formato y calidad de código.\r\n\r\n## 🚀 Features\r\n\r\n- **Responsive Design**: Diseño minimalista, de fácil adaptación atractiva, accesible e intuitiva.\r\n\u003cp align=\"center\"\u003e\r\n\u003cimg src=\"https://github.com/user-attachments/assets/823f609d-6a2c-4004-aafa-0e0e4372a489\" width='400' align=\"center\"\u003e\r\n\u003c/p\u003e\r\n\r\n- **LazyLoading**: Cada página cuenta con su propia carga perezosa.\r\n- **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.\r\n- **[Signals](https://angular.dev/guide/signals)**\r\n- **JWT Authentication** (simulada): Bearer Token con injector.\r\n- **Role Guard \u0026 Auth Guard**: Protección de rutas.\r\n\u003cp align=\"center\"\u003e\r\n\u003cimg src=\"https://github.com/user-attachments/assets/8fdcedba-8f93-4be7-b65b-d32b5188040e\" width='400' align=\"center\"\u003e\r\n\u003c/p\u003e\r\n\r\n- **Custom toasts**: Sistema personalizado de toasts (notificaciones).\r\n\u003cp align=\"center\"\u003e\r\n\u003cimg src=\"https://github.com/user-attachments/assets/79320b41-6d0f-40ea-a706-08ec8ac583b9\" width='500' align=\"center\"\u003e\r\n\u003c/p\u003e\r\n\r\n- **CRUD de posts**:\r\n  - **GET**: Los usuarios \"admin\" y \"user\" pueden visualizar los datos obtenidos desde una API externa (por defecto, se utilizó https://jsonplaceholder.typicode.com/).\r\n  - **POST y PATCH: Solo el usuario \"admin\" puede crear y actualizar datos.**\r\n  - Comunicación con API utilizando el servicio de Angular para realizar solicitudes HTTP\r\n\u003cp align=\"center\"\u003e\r\n\u003cimg src=\"https://github.com/user-attachments/assets/8a074fdd-69f2-46cc-94dc-ae848818aa5e\" width='400' align=\"center\"\u003e\r\n\u003c/p\u003e\r\n\r\n- **Filtro y paginación**: Implementado mediante signals.\r\n\u003cp align=\"center\"\u003e\r\n\u003cimg src=\"https://github.com/user-attachments/assets/594d4349-50f5-42e3-8d23-3198611a24a2\" width='600' align=\"center\"\u003e\r\n\u003c/p\u003e\r\n\u003cbr\u003e\r\n\u003cp align=\"center\"\u003e\r\n  \u003cimg src=\"https://github.com/user-attachments/assets/f4cf7203-5387-438c-ae77-40a6bd6eae20\" width='600' align=\"center\"\u003e\r\n\u003c/p\u003e\r\n\r\n## Usuarios de prueba\r\n\r\n- Usuario \"admin\":\r\n```\r\nEmail: admin@test.com\r\nPassword: admin123\r\n```\r\n\r\n- Usuario \"user\":\r\n```\r\nEmail: user@test.com\r\nPassword: user123\r\n```\r\n\r\n## Estructura de Carpetas\r\n```bash\r\nsrc/\r\n├── app/\r\n│   ├── features/                  # Funcionalidades principales\r\n│   │   ├── login/                 # Autenticación\r\n│   │   └── posts/                 # Posts\r\n│   │   │   ├── components/        # Componentes especificos\r\n│   │   │   └── pages/             # Páginas/rutas/vistas\r\n│   ├── shared/                    # Elementos compartidos por todo el sistema\r\n│   │   ├── components/\r\n│   │   ├── guards/\r\n│   │   ├── interceptors/\r\n│   │   ├── layouts/               # Componentes que envuelven el sistema\r\n│   │   ├── models/                # Interfaces y tipos\r\n│   │   ├── services/\r\n│   │   └── utils/                 # Simula la API\r\n│   └── app.routes.ts              # Configuración de rutas protegidas con Lazy Loading\r\n├── environments/                  # Variables de entorno\r\n├── index.html\r\n├── main.ts                        # Bootstrap\r\n└── styles.css                     # Estilos globales y configuración de Tailwind\r\n```\r\n\r\n## Instalación y ejecución\r\n\r\n\u003e [!WARNING]\r\n\u003e **Node verion**: \t18.19.1 o mayor.\r\n\r\n### Instalar dependencias\r\n\r\n```\r\nnpm install\r\n```\r\n\r\n### Servidor local\r\n\r\n```\r\nng serve\r\n```\r\n- Navegar a `http://localhost:4200/`\r\n\r\n### Build\r\n\r\n```\r\nng build\r\n```\r\n- Generará el bundle en la carpeta `dist/`\r\n\r\n### Tests\r\n```\r\nng test\r\n```\r\n- Realizado en los componentes más relevantes (Formularios, guards, etc.)\r\n\u003cp align=\"center\"\u003e\r\n  \u003cimg src=\"https://github.com/user-attachments/assets/7f387fc6-2338-47f1-b134-db08d620a7a7\" width='600' align=\"center\"\u003e\r\n\u003c/p\u003e\r\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fuspiri%2Fuser-posts","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fuspiri%2Fuser-posts","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fuspiri%2Fuser-posts/lists"}