EN
FR

Cloudy Pocket

May 2024
React
Laravel
Git & Github
Figma
MySQL
Trello
SASS/SCSS
JavaScript
S.E.O.
Schema.org
Accessibility
Performance optimization
Lighthouse
Bcrypt
JSX
RWD

An intuitive, feature-rich budget management app for simplified financial management.

Project cover
Visit project Share on LinkedIn

Cloudy Pocket : An intuitive, feature-rich budget management app for simplified financial management.

This projects is still maintained and under development.

Cloudy Pocket is a personal project but I took advantage of my training as an application designer and developer to make it my final training project.

I developped it in 3-third architecture with a client in React, an API in Laravel linked to a MySQL database.

Application Presentation

Cloudy Pocket is a budget management application that allows the user to create bank accounts on the application like their real accounts and to enter all the lines of transactions they carry out. When these lines appear on his real accounts, he can then point them and thus maintain control over his finances by anticipating each transaction.

The main functionalities unable for users :

  • Account management (informations and password access and update)
  • App theme personalization
  • Bank account management
  • Transactions management
  • Management of transfers between accounts
  • Schedule management
  • Share the management of an account with another user (for a joint account for exemple)
  • Export accounts in CSV or PDF
  • Receipts management

Technical Part

To create this application I followed several key steps :

  • Design
  • Development
  • Tests and validations
  • Deployment

Design

During this phase I wrote the specifications, the functional and technical specifications as well as a test plan and documentation for the API.

To facilitate the development of the application, I also produced UML diagrams, a data dictionary and database modeling using the Merise method (Conceptual Data Model (CDM), Logical Data Model (LDM) and Physical Data Model (PDM)).

I also had to think about securing the data, I naturally hashed the passwords with Bcrypt but this application aims to manage users' banking data. Since Bcrypt does not allow encrypted data to be decrypted, I opted for the AES (Advanced Encryption Standard), a symmetric block encryption method widely used around the world.

Development

To develop the application, I started by taking care of API migrations and models.

I then implemented the controllers which contain many methods for the application's multiple functionalities.

After setting up the routes I was able to start the client (part visible to the user) in React.

Tests and validations

According to the test plan established during the design phase, I implemented unit tests as well as integration tests on the most critical functionalities of the application. For this I used PHPUnit which is natively integrated into Laravel 10.

I also tested each route individually using Postman.

Deployment

This application is hosted with O2switch.

Having already deployed a lot of projects in React and Laravel with O2switch, this part was relatively quick.

Recommendations
Project cover Sophie Bluel
JavaScript
HTML
CSS

Sophie Bluel

Dynamic site of a fictional interior designer.

Project cover Time Chrono Masters
React
SASS/SCSS
I18next

Time Chrono Masters

Website for a chronometry services company

Project cover Mon Vieux Grimoire
Node.js
Express
MongoDb

Mon Vieux Grimoire

Fictive library website with a MongoDb database.