🏦 The Game is HackathON React Frontend Challenge ⚛️

Category ➡️ Software

Subcategory ➡️ React Frontend

Difficulty ➡️ Hard

🌐 Background

You have just joined CaixaBank Tech to work on an innovative personal finance assistant project as part of the CaixaBankNow and Imagin apps. Your task is to design and develop the frontend architecture that will allow users to easily manage their finances. The app will provide a seamless and responsive user experience, helping clients track their spending, set budgets, and visualize their financial health.

Your role will be crucial in shaping the frontend of the platform, ensuring it is intuitive, scalable, and responsive across all devices. With your React expertise, you will be responsible for creating a robust and efficient user interface that will lay the groundwork for the app’s future development and feature enhancements.

📂 Repository Structure

hackathon-caixabank-frontend-react-finassist/
├── Detailed_info.md
├── package.json
├── package-lock.json
├── public
│   ├── favicon.ico
│   ├── index.html
│   ├── logo192.png
│   ├── logo512.png
│   ├── manifest.json
│   └── robots.txt
├── README.md
└── src
    ├── App.css
    ├── App.js
    ├── App.test.js
    ├── assets
    │   ├── bgmaps.png
    │   ├── caixabank-icon-blue.png
    │   └── caixabank-icon.png
    ├── components
    │   ├── AlertBanner.js
    │   ├── AnalysisGraph.js
    │   ├── Analysis.js
    │   ├── BalanceOverTime.js
    │   ├── BudgetAlert.js
    │   ├── Dashboard.js
    │   ├── DownloadProfilerData.js
    │   ├── ExportButton.js
    │   ├── Footer.js
    │   ├── ForgotPasswordPage.js
    │   ├── LoginPage.js
    │   ├── MonthlyChart.js
    │   ├── Navbar.js
    │   ├── NotificationPopup.js
    │   ├── ProtectedRoute.js
    │   ├── RecentTransactions.js
    │   ├── Recommendations.js
    │   ├── RegisterPage.js
    │   ├── Settings.js
    │   ├── Statistics.js
    │   ├── SupportPage.js
    │   ├── TransactionForm.js
    │   ├── TransactionList.js
    │   └── TransactionRow.js
    ├── constants
    │   ├── categories.js
    │   └── categoryKeywords.js
    ├── index.css
    ├── index.js
    ├── logo.svg
    ├── reportWebVitals.js
    ├── setupTests.js
    ├── stores
    │   ├── authStore.js
    │   ├── budgetAlertStore.js
    │   ├── transactionStore.js
    │   └── userSettingsStore.js
    ├── theme.js
    └── utils
        ├── onRenderCallback.js
        ├── profilerData.js
        └── useLocalStorage.js

🎯 Tasks

1. Task1: Transaction Management (CRUD)
2. Task2: Budget Management and Alerts
3. Task3: Design and Layout with Material UI
4. Task4: Conditional Rendering
5. Task5: External API Handling
6. Task6: Componentization and Reusability
7. Task7: State Management with Nanostores
8. Task8: Data Visualization and Graphs
9. Task9: Unit and Integration Testing
10. Task10: Performance Optimization
11. Task11: Notifications and Alerts
12. Task12: Authentication and Route Protection
13. Task13: Password Recovery
14. Task14: Footer and Navbar
15. Task15: Utilities and Helpers

📑 Detailed information about tasks

You will find more detailed information about each of the tasks in the file Detailed_info.md.

💫 Guides

⚠️As this is a hackathon, with more time than usual and we are competing, we have created a long challenge. It is crucial to get the app working in order to correct it, so it is important to manage time well and prioritise rather than trying to get everything done and the app not working when it is corrected.⚠️

General information

As this challenge is part of a hackathon, participants are free to modify anything they need to implement their solution. There are no limits of any kind, neither technological nor visual.

A deployed website with all the functionalities to be created is provided so that participants have a clear reference of the expected performance.

It is possible to add as many functionalities as desired.

The code provides a basis on which to work, and also contains comments that may be useful.

Correction

The correction will be done manually.

Therefore, standards will have to be applied:

• The execution will have to be: npm i, npm start. Any project that does not work properly when running these commands will not score.
• To evaluate the purpose of the tests npm test will be run. If it does not work, this task will be scored as 0.
• A small part of the score will be all visual. In this case the overall look and feel of the application will be evaluated, giving an extra score of 100 points.
• By default the version of Node that will be used is Node 20(LTS).

📤 Submission

1. Solve the proposed tasks.
2. Continuously push the changes you have made.
3. The last commit will be the one to be taken into account for manual correction.

📊 Evaluation

The final score will be given according to whether or not the objectives have been met.

In this case, the challenge will be evaluated on 2250 (1750 for tasks, 400 for code quality and 100 for the visual part) points which are distributed as follows:

• Task 1: 200 points
• Task 2: 150 points
• Task 3: 100 points
• Task 4: 100 points
• Task 5: 100 points
• Task 6: 150 points
• Task 7: 150 points
• Task 8: 100 points
• Task 9: 150 points
• Task 10: 100 points
• Task 11: 100 points
• Task 12: 150 points
• Task 13: 100 points
• Task 14: 50 points
• Task 15: 50 points
• Code quality: 400 points
• Extra: 100 points

❓ Additional information

Q1: Can I change anything in the app?

A1: Yes, as it is a hackathon, you are free to modify anything within the project.

Q2: Can I add resources that are not in package.json?

A2: Yes, new resources can be added if necessary.