Skip to content

stefania-d-dev/soulfarm-react

Repository files navigation

🌿 Soulfarm | React 19 & Tailwind 4 Refactor

React Tailwind Vite Version

Soulfarm è una web application moderna sviluppata per un'azienda agricola multifunzionale. Questa versione (v2.0.0) rappresenta un refactoring integrale del progetto originale, focalizzato sulla transizione alle tecnologie frontend d'avanguardia del 2026.


✨ Caratteristiche Principali

  • 🚜 Full Responsive Design: Ottimizzato per mobile, tablet e desktop senza l'uso di hack CSS.
  • 🔭 Planetario & Eventi: Sezioni interattive per la gestione delle attività didattiche e stagionali.
  • 🛍️ Bottega Digitale: Carosello prodotti performante basato su scroll nativo e zero dipendenze esterne.
  • 📧 Newsletter System: Gestione degli stati del form con feedback utente in tempo reale.

🛠️ Evoluzione Tecnica (v2.0.0)

Il progetto è stato migrato da un'architettura legacy a un sistema Production-Ready:

  • Engine: Migrazione a Tailwind CSS v4 (Native CSS-engine) per una riduzione del bundle size e build ultra-rapide.
  • Core: Aggiornamento a React 19, sfruttando le ottimizzazioni nel rendering e la nuova gestione degli hook.
  • Performance: - Ottimizzazione delle immagini tramite caricamento adattivo (eager / lazy).
    • Implementazione di CSS Grid per eliminare il Cumulative Layout Shift (CLS).
  • Semantica: Refactoring dei componenti con tag HTML5 (<section>, <article>, <nav>) per SEO e accessibilità (WCAG).

🚀 Installazione & Sviluppo Locale

# 1. Clona il repository
git clone [https://github.com/stefania-d-dev/soulfarm-react.git](https://github.com/stefania-d-dev/soulfarm-react.git)

# 2. Entra nella cartella
cd soulfarm-react

# 3. Installa le dipendenze
npm install

# 4. Avvia il server di sviluppo
npm run dev

📂 Struttura del progetto

src/
 ├── assets/             # Immagini, icone e font (MADE Dillan, Lexend)
 ├── components/         # Componenti React atomizzati (Hero, Carousel, Planetarium...)
 ├── styles/             # Configurazione globale Tailwind 4 (@theme)
 └── App.tsx             # Entry point dell'applicazione

👩‍💻 Credits & Team

  • Replica in React & Refactoring 2026: Stefania Deliso

  • Design Originale: Michele Fasani

  • Codice Originale: Emiliano Bucci


📄 Licenza

  • Distribuito sotto licenza MIT.

Progetto realizzato a scopo formativo per dimostrare competenze avanzate di Refactoring, State Management e Modern CSS.

About

Questo repository contiene il codice sorgente per la replica del sito web Soulfarm, sviluppata utilizzando React, Vite, TypeScript, TailwindCSS e pnpm.

Topics

Resources

Stars

Watchers

Forks

Packages

 
 
 

Contributors