Giter VIP home page Giter VIP logo

elmouaddibe / digitalbanking_spring_angular Goto Github PK

View Code? Open in Web Editor NEW
1.0 1.0 0.0 901 KB

Spring Boot and Angular application manages bank accounts. Create customer profiles, open current or savings accounts, and record transactions. It provides a secure and user-friendly platform for basic bank account operations.

License: The Unlicense

Java 38.02% HTML 21.28% TypeScript 39.25% CSS 1.45%
angular bank-account-management-system java spring-boot spring-mvc admin-dashboard banking-system dashboard-templates jwt-authentication management-system user-interface

digitalbanking_spring_angular's Introduction

Digital Banking

Une application de gestion des comptes bancaires permettant de gérer les clients, les comptes bancaires et les opérations de type débit ou crédit.

Table des matières

  1. Présentation du projet
  2. Technologies utilisées
  3. Fonctionnalités
  4. Architecture du projet
  5. Installation et configuration
  6. Captures d'écran

Présentation du projet

Digital Banking est une application conçue pour gérer des comptes bancaires. Chaque compte est associé à un client et peut subir plusieurs opérations de type débit ou crédit. Il existe deux types de comptes : comptes courants et comptes épargnes.

Le projet est divisé en deux parties principales : un backend basé sur Spring Boot et un frontend développé avec Angular.

Backend

  1. Couche DAO :

    • Création des entités JPA : Customer, BankAccount, SavingAccount, CurrentAccount, AccountOperation.
    • Définition des interfaces JPA Repository basées sur Spring Data.
    • Tests de la couche DAO.
  2. Couche service et Web :

    • Mise en place de la couche service, des DTOs et des Mappers.
    • Création des RestController pour les services web RESTful.
    • Tests des services web RESTful.
  3. Swagger :

    • Intégration de Swagger pour la documentation des API REST en utilisant la dépendance suivante :
      <dependency> 
        <groupId>org.springdoc</groupId> 
        <artifactId>springdoc-openapi-starter-webmvc-ui</artifactId> 
        <version>2.1.0</version> 
      </dependency>
  4. Sécurisation :

    • Mise en place d'un système d'authentification basé sur Spring Security et JSON Web Token (JWT).

Frontend

  1. Gestion des clients et des comptes :

    • Développement des interfaces pour gérer les clients et les comptes bancaires.
  2. Dashboard et Statistiques :

    • Utilisation de ChartJS (ng-chart) pour créer des graphiques et des statistiques dans la partie dashboard de l'application.

Technologies utilisées

  • Backend :

    • Spring Boot
    • Spring Data JPA
    • Spring Security
    • Springdoc OpenAPI (Swagger)
    • H2 Database (pour les tests)
    • MySQL
    • JSON Web Token (JWT)
  • Frontend :

    • Angular
    • Bootstrap
    • ChartJS (ng-chart)

Fonctionnalités

  • Gestion des clients : ajout, suppression, édition, recherche.
  • Gestion des comptes : ajout, recherche, administration.
  • Enregistrement des opérations avec l'identifiant de l'utilisateur authentifié.
  • Gestion des comptes et des mots de passe des utilisateurs.
  • Dashboard avec des graphiques et des statistiques.

Architecture du projet

db.png

Installation et configuration

  1. Cloner le dépôt :

    git clone https://github.com/ELMOUADDIBE/DigitalBanking_Spring_Angular.git
  2. Configurer la base de données dans application.properties :

     spring.application.name=DigitalBanking_Spring_Angular
     server.port=8080
     
     #H2 Database Configuration
     #spring.datasource.url=jdbc:h2:mem:bank
     #spring.h2.console.enabled=true
     
     #MySQL Database Configuration
     spring.datasource.url=jdbc:mysql://localhost:3306/bank?createDatabaseIfNotExist=true
     spring.datasource.username=root
     spring.datasource.password=
     spring.jpa.hibernate.ddl-auto=update
     spring.jpa.properties.hibernate.dialect=org.hibernate.dialect.MariaDBDialect
     spring.jpa.show-sql=true
  3. Lancer l'application Spring Boot :

    mvn spring-boot:run
  4. Naviguer vers le dossier du frontend Angular et lancer le serveur de développement :

    cd frontend
    npm install
    ng serve
  5. Accéder à l'application sur http://localhost:4200.

Captures d'écran

Page de connexion

login.png

Page d'accueil utilisateur

userUI.png

Tableau de bord

dashboard.png

Liste des clients

customerlist.png

Ajouter un client

addcustomer.png

Modifier un client

editcustomer.png

Supprimer un client

deletecustomer.png

Rechercher un compte

accountSearch.png

Liste des comptes

accountlist.png

Modifier le profil

editprofile.png

digitalbanking_spring_angular's People

Contributors

elmouaddibe avatar

Stargazers

 avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.