Booki Project 📖

June 27, 2024 · View on GitHub

Booki Project 📖

Fully working Angular 7 - Java EE Spring Boot Application :heart:

Project with Angular 7 + Angular Cli + Spring Boot + Spring Security + Spring Data ..

Well designed, responsive and many reusable components :art:

Table of content

About the project

Booki is an application that allows the management and tracking of user books reading list, published to provide a fully working web application for developers who are interested in building modern web apps using Spring Boot as a backend solution, and Angular 7 for the frontend.

Feautures

Front-End

  • Reusable Independent components
    • User profile card
* **Book review Component** 
and much more to discover ...

  • Responsive components

  • Implementing pagination

  • Angular Guards implementation

    Manage routes access according to the connected user ( JWT token decode ).

  • Implementing Angular interceptor to send the jwt token on every API call from the backend ( with Spring Security JWT Implementation )

  • Using Angular Environment variables to get the URL of the Backend - API ( Dev / Prod )

  • On typing books filters using Angular Pipes

Back-End

  • Clear implementation of Spring Security - JWT - for securing the REST API

  • Using JpaRepository to generate Entities CRUD ( Spring Data )

  • Using profiles

    • The project contains two profiles, one for Mysql, the other for Postgres, you just have to properly configure

      • spring.datasource.url
      • spring.datasource.username
      • spring.datasource.password

      in the application.properties file corresponding to the database that you are going to use, then you need to specify the profile you want when running the project.

  • Manage uploading files to the server


Getting Started

Prerequisites

  • Front-End ( Angular )

    • A stable version of node installed on your machine
    • Npm
      • npm install npm@latest -g
    • Angular CLI
      • npm install -g @angular/cli

  • Back-End ( Spring Boot )

    • Java SDK v1.8 or higher
    • Apache Maven 3.3 or above
    • Databases : Booki application was developed to support two databases ( Postgres && Mysql ), so you should have at least one of those databases running correctly on your machine.

Installation

Clone the repo :blush:

git clone https://github.com/Houssem-Selmi/booki.git

Front-End ( Angular )

Access the Front-End folder

cd Booki-Front-end

Install dependencies

npm install

Start the angular project

ng serve

Verify the file 'src/environments/environment.ts '

apiBaseUrl should match your backend URL and the port you are running the spring boot app on, it should be 8080 in the default case.

Back-End ( Spring Boot )

Setting up the databases

you can choose to work with MySQL or Postgres, there is a profile for both databases

  • Create a database with the name of ' bookidb '

  • Import the dump provided in the DATABASE_DUMP folder according to the database you will use

    • Postgres
      psql -U your_postgres_username bookidb < postgres_booki.sql
    • Mysql
      mysql -u your_mysql_username -p bookidb < booki_mysql.sql

  • Check if the data is added successfully to bookidb ✔️


  • Open the folder Booki-Back-end with your favorite Java IDE ( I used Spring tool suite )

    • You need to set up Lombok in your IDE before running the project, How-To

  • Configure application.properties file ( MySql / Postgres )

       spring.datasource.url
   spring.datasource.username
   spring.datasource.password

  • Run the app and specify which profile to use ( Postgres or Mysql )


  • Try to login into the app with the dummy user provided in the database dump :

    • Email : client@email.com
    • password : houssem

Congrats 👏 🎉

Now everything is set up correctly and you can start exploring Booki ❤️

Creator

Houssem Selmi :pencil2:

License

Code released under the MIT License.