codingwithtashi / booki

Booki Project 📖 Fully working Angular 7 - Java EE Spring Boot Application ❤️

Booki Project 📖

Fully working Angular 7 - Java EE Spring Boot Application ❤️

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

Well designed, responsive and many reusable components 🎨

Table of content

• About the project
• Feautures
• Getting Started
• Installation
• Creator

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 😊

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 ✔️

<img src="https://lh3.googleusercontent.com/lZv8mMAUT9MtYtBCI-I-UvpmfDV99MJSEmQyvA7X6Wg0C0b3G9lH4F0iLIdHuU3OzEYtQ-c4nDQXsgPXvgu-iEN9_8U7To7YJoV_aDTjM30G3J0U4UuOF1yv4PjDlaI5vJ0Gmw2pnl2uT0RxFNmpTX-U2YYGkogxLDsz33_BLxdK4O40e0Dld9PuLxwKamCkjkR5iI7i9-LiLoa96hczMOwwlJ0YyY3ADld-KSq1AP2dED_u8wFTHbWNRaj6CcinuAkekDxUi1t2TZ6sHkuVNTjnWeAYIjDZtyJeyIIo367U9-gYKkg2aQAnmstYRzWs8G6tpObFf7bvMFZSwMwxhER_VYCNan9Huxp0DHyYQFe_bdRDKf7qcEEL0vuC4n-5wcDc2jOgm5TQ0WxIxmBbBC4pTX0SwRewTaqgcEse8GNZcCOH6NUev8MBolEmSXFNCnloFKkmrryXfsyqxqJ7HAsV31bd3kcy2thUyW37bqsPL0jXZJGRpz167quSUkZkIJGHtwSImgQ6sZ-6I7C4y6GtJEbqId0o_sBW7TAzbOc6S9PMHADZoE2Zw-U0_BCM7e8T5GzdjTlT-6auxTxC7kCbW3oVW6bJPmnNXyHVaCB8nPKgoZQQE4UsLrm4n3R2uhVGQ-7jmtNQa9IH93B607lQGjyOqReQXbx3oA4GY-FBfB0QuVOQWk8YVY8Sc_THqH6VQiZyIVj-zBoV3tR1yBl1=w1248-h364-no">	

• 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 : [email protected]
  • password : houssem

Congrats 👏 🎉

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

Creator

Houssem Selmi ✏️

• https://github.com/Houssem-Selmi
• https://www.linkedin.com/in/hselmi/

License

Code released under the MIT License.