Monthly Trend

Semplice componente React per visualizzare un grafico a barre mensili.

Demo

Si può provare il componente funzionante all’indirizzo:

https://monthly-trend.vercel.app/

Struttura del progetto

Dopo l’installazione, troverai la struttura del progetto organizzata come segue:

monthly-trend/
├── index.html
├── src/
│   ├── components               # Cartella di componenti
│   │   ├── MonthlyTrend         # Cartella del componente MonthlyTrend 
│   │   │   ├── constants.ts     # Costanti per personalizzazioni
│   │   │   ├── MonthlyBar.tsx   # Sottocomponente che identifica il mese
│   │   │   ├── MonthlyTrend.tsx # Componente princiale
│   │   │   ├── utils.ts         # Utility varie
│   ├── App.tsx                  # Componente principale
│   ├── main.tsx                 # Punto d'ingresso principale per React
│   └── vite-env.d.ts            # Definizioni TypeScript specifiche per Vite
├── package.json
└── tsconfig.json                # Configurazione TypeScript

Installazione

• Clonare il progetto

  git clone https://github.com/dynamick/monthly-trend.git

• Accedi alla cartella del progetto

  Dopo la creazione, entra nella directory del progetto:

  cd monthly-trend

• Installa le dipendenze

  Installa tutte le dipendenze necessarie usando:

  npm install

• Avvia il progetto in modalità sviluppo

  Una volta installate le dipendenze, puoi avviare il progetto con:

  npm run dev

  Vite farà partire un server locale, di solito accessibile su http://localhost:5173, e visualizzerà l'URL nel terminale.

Librerie utilizzate

• React
• Vite
• TypeScript
• Styled Components
• Date-fns

Happy reviewing 🚀