Expence Tracker App In React , Redux , Firebase , Mantine

Build login and registration pages for authentication module in a React app, set up routes for home, login, and register, and implement a Mantine form with name, email, and password.

Register users in a firebase file store for an expense tracker app, initializing firebase, setting rules, and preventing duplicate emails with query-based checks.

We build the login flow by adapting the registration query into the login form, implementing on submit logic, and validating email and password against the fire DB.

Encrypt passwords in the users collection of a React Firebase app with crypto-js, hash on store, decrypt on login, and use Mantine notifications for feedback; preview protected routes.

Implement protected routes after authentication by storing user data (name and email, not password) in local storage and redirecting unauthenticated users to login.

Implement Redux Toolkit state management to handle loading states with an alerts slice, configure the store, and display a centered spinner during Firebase API calls in login and registration flows.

Design the home page of the expense tracker app with a header showing the project title and user, a content area with filters and transactions, and list or graph views.

Learn to build an add transaction user interface in a React app using Mantine, featuring a filter bar, modal form, and a mode switch that supports add and edit operations.

Add a transaction to a per-user Firestore subcollection via the form, handling onSubmit, loading states, and success or error notifications for amount, date, and category.

Fetch and display added transactions in a home page grid by mapping Firestore data to a Mantine table with columns name, type, amount, date, category, reference, and actions.

Implement edit transaction by populating the form with the selected transaction as values and opening the modal in edit mode. Use moment to format dates for the HTML date field.

Learn to complete the edit transaction workflow, toggle add/update modes, update amount and family members, and ensure latest transactions appear first when ordering by date desc with dynamic messages.

Learn to delete a transaction in a React app using firebase, including calling delete doc on user/{userId}/transaction, updating loading state, refetching data, and showing a green 'transaction deleted' notification.

Design and implement the filters component for transaction data, enabling filtering by amount, income vs expense, time span with frequency options and a custom date range using redux.

Fix z-index and height issues by wrapping the user interface in a container, then implement a type filter to show income, expense, or all transactions, with firebase indexing for queries.

Develop and validate frequency date filters for the expense tracker, supporting last week, last month, last year, and custom range with moment-based dates and seven, 30, 365-day ranges.

Master custom date range filters for transactions in a React app, converting selected dates with moment and applying from-to date logic to return precise results.

Create an analytics view for the expense tracker app with table and chart views, filters, and totals by category for income and expenses.

Build an analytics dashboard for the expense tracker that displays total transactions and turnover, and shows income versus expense percentages using a ring progress visualization.

Analyze and implement analytics for the expence tracker app by calculating total turnover and income versus expense amounts, and visualize category breakdowns with percentages and charts.

Replicate income analytics for expense categories, configure transaction amounts and percentages, adjust colors, and verify last week and last month data totals in a side-by-side view.

This lecture covers bug fixes and user interface alignments in the expense tracker app, including login/logout, login and registration pages, popovers, header icons, and styling tweaks for analytics and cards.

Push your code to a public GitHub repository and deploy the app to hosting such as Netlify or Firebase, including adding a redirects file and configuring a build command.