Agronotizie.

14 views

Component Library

Agronotizie is a prominent agricultural news platform in Italy, publishing daily articles, reports, and insights for professionals in the sector. In 2024–2025, the platform underwent a complete frontend redesign and modernization, transitioning to a faster, modular, and scalable architecture based on Next.js.

The focus of the redesign was to improve performance, SEO, and editorial workflows while introducing a clean, responsive, and maintainable user interface.

Key Highlights

  • Rebuilt the frontend using Next.js and Tailwind CSS.
  • Implemented design system and component libraries using Storybook.
  • Integrated dynamic content via Strapi CMS.
  • Applied SEO optimizations including structured data and meta control.
  • Organized codebase using TurboRepo and modular microfrontends.

UX/UI & Frontend Improvements

  1. Performance & Accessibility

    • Migrated static and dynamic routes to Next.js for hybrid rendering.
    • Optimized Lighthouse scores through image handling, lazy loading, and bundle splitting.
    • Ensured accessibility compliance across layouts.
  2. Design System & Storybook

    • Developed reusable UI components with Tailwind CSS.
    • Centralized visual documentation in Storybook, enabling design-consistent development.
  3. Content Integration

    • Connected frontend to Strapi CMS, enabling editors to manage structured content with rich media and metadata.
    • Mapped content models to dynamic page generation in Next.js.
  4. Monorepo Architecture

    • Used TurboRepo to organize frontend packages and utilities.
    • Separated shared components into isolated libraries for reuse and testing.
  5. CI/CD & Dev Environment

    • Collaborated in setting up Docker environments for development parity.
    • Contributed to automated build pipelines with GitHub Actions.

Component Library

Tech Stack

  • Next.js (App Router)
  • Tailwind CSS
  • TypeScript
  • TurboRepo (monorepo setup)
  • Strapi (CMS)
  • Storybook
  • Docker (local development environment)
  • GitHub Actions (CI/CD)

Role & Responsibilities

As a Frontend Developer, I led the implementation of the new UI, collaborating with design and editorial teams to ensure visual consistency and performance:

  • Developed and maintained the entire React-based frontend using Next.js and Tailwind.
  • Integrated CMS content dynamically and built page templates based on editorial requirements.
  • Created and documented reusable UI components in Storybook.
  • Structured the frontend in a monorepo using TurboRepo, enabling scalability across multiple sections and layouts.
  • Worked closely with the DevOps team to align on containerized workflows and CI/CD practices.

Impact

  • Significantly improved site performance, SEO, and editorial control.
  • Reduced development time for new features by modularizing the codebase.
  • Delivered a visually cohesive and mobile-first experience aligned with the platform’s editorial standards.

Screenshots

Homepage Homepage Homepage


The Agronotizie redesign showcases a modern approach to large-scale content platforms—balancing performance, editorial flexibility, and maintainable design systems.