https://github.com/marek161/apka-finansowa
Aplikacja Finansowa đź’µ
https://github.com/marek161/apka-finansowa
chartjs context-api firebase jest react react-router react-testing-library redux tailwindcss
Last synced: 2 months ago
JSON representation
Aplikacja Finansowa đź’µ
- Host: GitHub
- URL: https://github.com/marek161/apka-finansowa
- Owner: Marek161
- Created: 2025-04-03T19:17:04.000Z (about 1 year ago)
- Default Branch: master
- Last Pushed: 2025-04-04T06:06:19.000Z (about 1 year ago)
- Last Synced: 2025-04-09T19:52:09.958Z (about 1 year ago)
- Topics: chartjs, context-api, firebase, jest, react, react-router, react-testing-library, redux, tailwindcss
- Language: JavaScript
- Homepage: https://apka-finansowa.vercel.app
- Size: 316 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 🟢 Aplikacja Finansowa
Aplikacja Finansowa to nowoczesne narzędzie do zarządzania osobistymi finansami, zbudowane przy użyciu React i Firebase. Aplikacja umożliwia śledzenie przychodów i wydatków, zarządzanie budżetem oraz wizualizację danych finansowych.
### ➡️ [LINK DO STRONY](https://apka-finansowa-git-master-marek161s-projects.vercel.app/login) ⬅️
## 🟢 Funkcjonalności
- Autoryzacja uĹĽytkownikĂłw
- ZarzÄ…dzanie transakcjami (dodawanie, edytowanie, usuwanie)
- Konfiguracja budĹĽetu
- Wizualizacja danych w postaci wykresĂłw
- Synchronizacja w czasie rzeczywistym
- Obsługa offline
## 🟢 Technologie
- React 18
- Firebase (Firestore, Authentication, Storage)
- Tailwind CSS
- Redux
- Context API
- React Router
- Chart.js
- Jest & React Testing Library
## 🟢 Struktura projektu
```
/
├── docs/ # Dokumentacja projektu
│ ├── api/ # Dokumentacja API
│ ├── database/ # Dokumentacja bazy danych
│ ├── developer-guide/ # Przewodniki dla deweloperów
│ └── user-guide/ # Instrukcje dla użytkowników
├── public/ # Pliki publiczne
├── src/ # Kod źródłowy
│ ├── components/ # Komponenty React
│ │ ├── common/ # Wspólne komponenty
│ │ ├── dashboard/ # Komponenty pulpitu
│ │ ├── layout/ # Komponenty układu strony
│ │ ├── layouts/ # Alternatywne układy stron
│ │ ├── transactions/ # Komponenty transakcji
│ │ ├── calendar/ # Komponenty kalendarza
│ │ ├── DashboardCharts.jsx # Wykresy na pulpicie
│ │ ├── DashboardSummary.jsx # Podsumowanie na pulpicie
│ │ ├── DevelopmentHelper.jsx# Pomocnik trybu deweloperskiego
│ │ ├── FirebaseIndexHelper.jsx # Pomocnik dla indeksów Firebase
│ │ ├── Layout.jsx # Główny układ aplikacji
│ │ ├── LoadingScreen.jsx # Ekran ładowania
│ │ ├── Notifications.jsx # Komponent powiadomień
│ │ ├── PrivateRoute.jsx # Komponent chronionej ścieżki
│ │ ├── ProtectedRoute.jsx # Komponent chronionej trasy
│ │ ├── RecentTransactions.jsx # Ostatnie transakcje
│ │ └── Sidebar.jsx # Pasek boczny
│ ├── contexts/ # Konteksty React
│ │ ├── AuthContext.jsx # Kontekst autoryzacji
│ │ ├── BudgetContext.jsx # Kontekst budżetu
│ │ ├── NotificationsContext.jsx # Kontekst powiadomień
│ │ └── ThemeContext.jsx # Kontekst motywu
│ ├── layouts/ # Układy stron
│ ├── pages/ # Strony aplikacji
│ │ ├── Auth/ # Strony autoryzacji
│ │ ├── Budget/ # Strony budżetu
│ │ ├── Transactions/ # Strony transakcji
│ │ ├── Budget.jsx # Główna strona budżetu
│ │ ├── Dashboard.jsx # Pulpit główny
│ │ ├── ErrorPage.jsx # Strona błędu
│ │ ├── ForgotPassword.jsx # Odzyskiwanie hasła
│ │ ├── Login.jsx # Logowanie
│ │ ├── NotFound.jsx # Strona 404
│ │ ├── Register.jsx # Rejestracja
│ │ ├── Settings.jsx # Ustawienia
│ │ └── Transactions.jsx # Strona transakcji
│ ├── services/ # Serwisy aplikacji
│ ├── store/ # Stan Redux
│ ├── utils/ # Funkcje pomocnicze
│ ├── App.js # Główny komponent aplikacji
│ ├── App.jsx # Alternatywny komponent główny
│ ├── firebase.js # Konfiguracja Firebase
│ ├── index.css # Główny plik CSS
│ ├── index.js # Punkt wejściowy aplikacji
│ ├── reportWebVitals.js # Raportowanie wydajności
│ ├── serviceWorker.js # Service Worker dla PWA
│ └── tailwind.css # Style Tailwind
├── README.md # Dokumentacja projektu
├── craco.config.js # Konfiguracja Create React App
├── package.json # Konfiguracja projektu
├── postcss.config.js # Konfiguracja PostCSS
├── prepare-commit.sh # Skrypt pomocniczy Git
└── tailwind.config.js # Konfiguracja Tailwind CSS
```
## 🟢 Instalacja i uruchomienie
1. Sklonuj repozytorium
2. Zainstaluj zależności:
```bash
npm install
```
3. Skonfiguruj zmienne środowiskowe w pliku `.env` (skorzystaj z `.env.example`)
4. Uruchom aplikacjÄ™ w trybie deweloperskim:
```bash
npm start
```
## 🟢 Dostępne skrypty
- `npm start` - uruchamia aplikacjÄ™ w trybie deweloperskim
- `npm test` - uruchamia testy
- `npm run build` - buduje aplikacjÄ™ do produkcji
## 🟢 Dokumentacja
Pełna dokumentacja projektu znajduje się w katalogu `docs/`:
- [Instrukcja uĹĽytkownika](docs/user-guide/README.md)
- [Dokumentacja dla deweloperĂłw](docs/developer-guide/README.md)
- [Dokumentacja API](docs/api/api.md)
- [Schemat bazy danych](docs/database/README.md)
## 🟢 Kredyty
- Avatary użytkowników pochodzą z kolekcji [alohe/avatars](https://github.com/alohe/avatars) udostępnionej na licencji MIT. Kolekcja avatarów zawiera różnorodne darmowe obrazy profilowe, które można wykorzystać w projektach w celu dodania im osobowości i charakteru.
- Ikony interfejsu pochodzÄ… z biblioteki [React Icons](https://react-icons.github.io/react-icons/).
- Elementy UI wykorzystujÄ… framework [Tailwind CSS](https://tailwindcss.com/).
## 🟢 Licencja
Ten projekt jest objęty licencją MIT.
--
**Autor:** Marek161
🟢 Future Plans
W przyszłości dodatkowe funkcjonalności. Bardziej zaawansowane zarządzanie budżetem i walutami. Integracja z wiekszą ilością kalendarzy notion itd.