Wzorcowa struktura miniprojektu

Struktura dla mniejszego projektu

Projekt indywidualny jest mniejszy — nie potrzebujesz rozbudowanej architektury. Prostota jest cnotą.

Foldermy-zaw-individual/
- Folderpublic/
  - favicon.ico
- Foldersrc/
  - Foldercomponents/
    Header.jsx
    FeatureComponent.jsx
    AnotherComponent.jsx
  - Folderhooks/
    useLocalStorage.js
    useMainLogic.js
  - Folderutils/
    helpers.js
  - App.jsx
  - main.jsx
  - App.css
- index.html
- package.json
- vite.config.js
- README.md

Inicjalizacja projektu (Vite)

npm create vite@latest my-project -- --template react
cd my-project
npm install
npm run dev

Wzorcowy komponent

import { useState } from 'react';
import styles from './FeatureComponent.module.css';

function FeatureComponent({ initialValue, onUpdate }) {
  const [value, setValue] = useState(initialValue);

  function handleChange(newValue) {
    setValue(newValue);
    onUpdate?.(newValue);
  }

  return (
    <div className={styles.container}>
      <h2>Wartość: {value}</h2>
      <button onClick={() => handleChange(value + 1)}>Zwiększ</button>
    </div>
  );
}

export default FeatureComponent;

Wzorcowy README.md

# Nazwa Projektu

Krótki opis — co robi aplikacja i co to za projekt.

## Uruchomienie

```bash
npm install
npm run dev
```

Aplikacja działa na http://localhost:5173

## Funkcjonalności

- Funkcja 1 — co robi
- Funkcja 2 — co robi
- Funkcja 3 — co robi

## Technologie

- React 18
- Vite
- CSS Modules
- localStorage (do persystencji)

## Autor

Imię Nazwisko, klasa, ZAW 2025/2026