One dAIly Blog

📋 Tabla de Contenidos

• Visión General
• Características Clave
• Stack Tecnológico
• Arquitectura
• Requisitos
• Instalación
• Desarrollo
• Despliegue
• Seguridad
• Contribuir
• Licencia
• Contacto

🔍 Visión General

One dAIly Blog is a modern, high-performance web application built with Angular, designed to deliver daily AI-generated content on technology and programming. The platform is architected for an optimal reading experience, with a strong focus on responsive design, performance, and SEO. It connects to a backend API for content management and is deployed automatically to a VPS.

✨ Características Clave

• Diseño Responsive: Fully adaptive interface for mobile, tablet, and desktop devices.
• Rendimiento Optimizado: Utilizes Angular SSR for fast initial loads, NgOptimizedImage for image optimization, and lazy loading for components.
• Carga de Contenido Dinámica: Features a "load more" button and infinite scroll for a seamless content discovery experience.
• Paleta de Colores Sofisticada: A professional and modern light theme to enhance readability.
• Técnicas Avanzadas de Angular: Built with Standalone Components, OnPush Change Detection for performance, and centralized error handling with interceptors.
• CI/CD Automatizado: Continuous integration and deployment pipeline using GitHub Actions.

🛠️ Stack Tecnológico

• Core Frontend: Angular 20.0.3, TypeScript 5.8.3, RxJS 7.8.2
• Server-Side Rendering: Angular SSR with Express.js
• Estilos: Tailwind CSS 4.1.11, PostCSS, Autoprefixer
• Componentes UI: FontAwesome for icons
• Seguridad: DOMPurify for sanitizing HTML content
• Build Tools: Angular CLI, esbuild
• Runtime (SSR): Node.js, Express.js, PM2 for process management

🏗️ Arquitectura

The application follows a feature-based architecture with a clear separation of concerns.

one-daily-blog/
├── .github/
│   └── workflows/deploy.yml  # CI/CD Pipeline
├── src/
│   ├── app/
│   │   ├── components/       # Standalone components (blog, post, header, footer)
│   │   ├── services/         # Services for API calls, state management, etc.
│   │   ├── entities/         # Data models and interfaces
│   │   └── ...
│   ├── assets/               # Static assets like images and logos
│   ├── environments/         # Environment-specific configurations
│   └── styles.scss           # Global styles and Tailwind CSS configuration
├── server.ts                 # Express server for SSR
├── tailwind.config.js        # Tailwind CSS configuration
└── angular.json              # Angular project configuration

📋 Requisitos

• Node.js: v22.x or higher
• npm: v10.x or higher
• A modern web browser with ES2022 support

📦 Instalación

1. Clonar el Repositorio:

   git clone https://github.com/sergiomarquezdev/one-daily-blog.git
   cd one-daily-blog

2. Instalar Dependencias:

   npm install

💻 Desarrollo

Scripts Principales

Comando	Descripción
npm start	Starts the development server with hot-reloading.
npm run dev	Starts the development server and opens the browser automatically.
npm run build	Compiles the project for development.
npm run build-prod	Compiles the project for production with optimizations.
npm run serve:ssr:one-daily-blog	Runs the compiled SSR application.
npm run lint	Runs ESLint to check code quality.
npm test	Runs unit tests.

The project is configured to use Angular with Server-Side Rendering (SSR), which includes optimizations like Ahead-of-Time (AOT) compilation, tree-shaking, and code splitting out of the box.

🚀 Despliegue

Deployment is fully automated using a GitHub Actions workflow defined in .github/workflows/deploy.yml. The pipeline includes the following stages:

1. Build:
   • Installs dependencies and caches them for faster builds.
   • Lints and tests the code to ensure quality.
   • Builds the Angular application for production.
   • Compresses static assets (JS, CSS, HTML) using Gzip.
   • Packages the application for deployment.
2. Deploy:
   • Connects to the VPS via SSH.
   • Transfers the application package using SCP.
   • Installs server dependencies.
   • Restarts the application server using PM2.
   • Restarts Nginx to apply any new configurations.

🔐 Seguridad

The application implements several security best practices:

• Sanitización de HTML: Uses DOMPurify to prevent XSS attacks by sanitizing any HTML content rendered from the database.
• HTTPS: The production deployment is configured to use HTTPS.
• Actualización de Dependencias: Regularly updated dependencies to patch security vulnerabilities.

🤝 Contribuir

Contributions are welcome. Please follow the standard fork, branch, commit, push, and Pull Request workflow. Ensure your code adheres to the project's style guidelines and that you add tests for any new features.

📝 Licencia

This project is licensed under the MIT License - see the LICENSE file for details.

📧 Contacto

Sergio Márquez

• Twitter/X: @sergiomzdev
• LinkedIn: sergiomarquezdev
• Email: contacto@sergiomarquez.dev
• YouTube: @sergiomarquezdev
• Web: sergiomarquez.dev

---

_{Developed with ❤️ by Sergio Márquez}