<p align="center"> <img src="https://lh3.googleusercontent.com/l_FUsy7RkYbixkWKitHJ1MbF-Rgw-L4qpt2xFz5lNmCwdEUjvJmqT9Bx69_9BDx-SYHysolygABvt352B-J-sG33pbxHNHg1RNYE5A8qR2DsV2_WH1DlPB7J7knrUWMUSvHEYbU06ZCkTb0PmcStldFOzvgVN2T7ane-GwmQXKLlOktUpgLC17rDOzPX-f8IW1IrjEq4S2zRhIjT0UsdpwQWWbA2IURa3n1JXDwOTI4etrfQnbTO2xNxY3YGcNxIfzUsPN5KkfLQTZ7EnB3XYA39pBpkZf20IpT3Q0dVXJUW9O0rDfJOMhCrqUkChb5k4_AEBdcjCFJkLrm_HXoE0gVNg-jdqTUQXEb8eimusbyGMqL40jQHBvHRyFG4CqGCszsSw_ADP3NKKfllQ9OOP9mKoFz9G9QJ6hqgQnydgZRKKxAa1ERpS40Y7kqABV8vm9B2LHTIHhsuejnqHSL5RhFayjpZz9t9FX4f9UlcLBzw6_CDSxABV30jRFRvpeKxK970zqBH_g9pHIbA9W2g1yAXG3V5asFsE7mR2uUTsb_YJwLwK25sek5TOZRX_s4rr_oZJ7wYtd-b_30mlzY1akEPvOV3dDynOUvZRf_PZJw77QxsQPzsY7NS-pf8-DwlM4BGi_6DtlOhY-yrKmRcJLXuVBRnqxBrWmTEyb_An5wp4EHcjXoT05fVVTtEnnyHZjURNhW_QM_zpQdTnXdX_Z2l=w563-h159-no"> </p>

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

<ul> <li><a href="#about-the-project">About the project</a></li> <li><a href="#feautures">Feautures </a></li> <li><a href="#getting-started">Getting Started</a></li> <li><a href="#installation">Installation</a></li> <li><a href="#creator">Creator </a></li> </ul>

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.

<img src="https://firebasestorage.googleapis.com/v0/b/booki-26bbf.appspot.com/o/a1.gif?alt=media&token=3fd32186-9342-488e-8e08-5006b47f0194">

Feautures

Front-End

• Reusable Independent components
  • User profile card </br>

<img src="https://lh3.googleusercontent.com/SXDlspy3VtNvDfkY_KLEUfRFMkETswcvUMg4xOPQUpnx6nyn1jtchSm57nfpwAzbs-IUTeN-_M3zwBGt27j1QB5VLN8KKKwr_VbPvai8PGaLzeECPFBqfxesscGxOP6K9EguS8le1KsJJ30R5-AhOmsBq4ZL9DChuUZVy29I4b1AUH9FVWH9Oa9WLt4xvS264vEl580Bb_1DskYYnl8WNBWMWOgZi90sf167i0nBcO2UbIUgyxc2vYj_xC7HJPoXjs0Fu0Y5qqdf554ANEryZd7cgef6IdYSdh1hHJ1TFq1fg4DEQZ6kK4usct4OyY11Ktdd_9Mtx-g3jp_wtXuilGGmR3l5TXyRVDPg8Pfc_dNe3SJjdzwdCfIMr7Yp_CfzEuggK27ZVgNE98xDblPDg3Oo0LgB2J7gcOhA2z_qGT4SFkD6gpZOdRJieqd1H0an1TrVrk15Srj3N3xaQHDsB7skDEqFVV6vwn9lqqoAveUZ9ECRerphmnYjI4IjUyn0cXCUMMLFic7LToJ4RRzxMRS-5qnPEej-k3HvViqofwsokD79tS3cEkaBXiPc0YynjFjhqKtFLwgzCIqBICccOzAp58T1-aOal3HV-DS756Kh5gbPq65hPFKspEXbBhywdS9CeW0XnkAPOHx05ohbkyte7goi6S3siXFIWB7gwvQyvq3_7M95E3x7dT_6TenoxOp9MK5srVPmGV_VjOOjwWh_=w1358-h551-no"> * **Book review Component** </br> <img src="https://lh3.googleusercontent.com/c1E7ESy7xzkB7vulNSEh4iTbfKGgP6sXxP0yIOP_rNsxG1ZOVGEJ-p9nDWOUXSwfp4f_BT-MyqVQOa4BbuVIqm7e7EGTEWQMj0RzRvMSTRBZynxvuUJ5S5dulL4kco4anHrQmvW5_3qRprF4Mrcq3ONUhVnMYcDfExjJVRtzg9-Wx9pUG1MC_6FdpoZajJP4eVWiccKfyprNABZJT15_ZZa9S1oOfa1UtDGYNZBfLB3aldoKyOYx1cMmtqhYTbh1ptLx2w-1XUTs7FG-P-v3u-iWKnzD9899RVglljm68RKw-JmUUZ58HpigUHZJeIit-vPfZtu1HMggWNo5G6FypoBuKW2qpGVf6_eTHwW81Ull_l1Y7CklK4yitUYxjkn_RlVDuJJS9bJpJkZFIZkAfIYYosZZW54m9FezYBusZUp5jEc1FPLwsNNiNnTF9yRiKbWD8HyC9TIikOZJGrRx-1fhrNRtbM9p_8xtKx--4bGkyLm4ruxctj77WSyg_c4yzUGJxphC7Sg3zskaTH-uRAhBVe8Gt-NKwlIz3Of3XKQXhkCTupjvVUGUjHPT9zsW25g4lQGaCxQHco2WhvODjN5Tfs52nvh9uGfB1Qt1mvdqQdwOICoIKyt2qwlloIutsxFA-GVpuYeRFO-texSKLzg5mqbvhwYYUfR0KBzy-0C3h0Seb4K4WGHQb3KO3HaDe24pq4_rLzBxcqodwep9ti2m=w504-h471-no">

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 <br/> <img src="https://lh3.googleusercontent.com/0IlrF5-AozR1UJ1mC83PmKJ3YY1s6HU0vAquhZquVbaa5bCRGjCEVHoQqiOoY2-eDfUTr6yUIYnrNnHreFMavQVMz04nuT-iteV0oXU7Gsg7jnCX3Ln_h8NhkLHoA93_eKsPLBIerehHN4wViEVspGZleg_prpOoBkoReVfNmfacHUDTZaZl805TLaKM_VyeFwpC0yyqmRL-95BdRsdxoFFHEM9paQQ6reIeQdmCa3NgecSFpizlmPJ44rux1sP4FN2WJm2AKADL8CKdSmv4srBKIh6CfauYRkqup2MQtV7fI0AvBu_aEOVPY_2ncPAJ7CILhQrg7XkY5kti9Q6h1LWWv_4Jug1HzJvelgZwuaw2y6hV2Ij9_7cClrUZ3ku1QtVzwTjYX0B4b_v_95W28Z3fzE_MMDnEEeX2esCpxd_Ue8xYrkRKy2eSj0O2NMz0Xo61I3404G3dd4fjC4CyXGKxdjxSgmobF-WcPilveSFbdryUoN2taa-nFhkuaTQNcAaJt7kWUQKkthmhW1TJNC-EuOWU26NbS6bGcUYV4gwCqRoXDn8bXMVYKyoXQ5ZxgYRSpuGrUeoMLlStszVgmDixCXzYD0s7OBQxfkYa1MDS5lWRDGt68xdmWOH_su5ux6UlYgCWD41D1fV_6UDgLRzXmdE2Pkyt0qSUzEqubhwoowGuN0nJOEpYxTF3e0N21A4dantQgNhEymXViQE9TEUs=w1333-h695-no">

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.

  <img src="https://lh3.googleusercontent.com/W5ieK4HjPUVB_kscf9c6GFpx23sj8YYsiFvyYRua72jeIWqUQ2lb48MX8wySYWQH6uOatk3PtFVvBqqxTklBUfIk_RZV8IsjEHtxFrhQHRQLRpIssnPSMzWFVU9B9DJ5-Q5rC0jU31T2ILX9PsG4YUfmeC7EnyOtPPv0U79AmgLrs3HHsxIpHyi_qroxLmne5oPXP1c-utEKo2wqvxZ1Gabgb5j5Z6ZXyUibMReL7XL5FFaOwA2XeiGM8fg1ZwxNIkw5nz608yuSFF3Jreci6AN4wDCZwKHo75y83WHMgva54TSiuN0pMhsTfKocpap401Yf-Zi1vx7CAl6S9jnf3C0N4mlMSsJxn3ML9XeWbHD4G-Lo9CoTg-6tf-9W4__iYEQNr9mPgNxjiNfYeFTpjQ1WaMdTm9uLjadX9JVhQQEGZXwBK0WnKp2RHOHhRcr_7XB9puMq5ZIG6OMJdZRe_0pS0IEC32cgaabFLWwUbfUd45yV2eKwCL2R_E4zaWQzpf77KE23AjDrTQiECXNd8-YpsUnVf2adFeGCSWR1Wx_0-wlQAS7f_bBu_Nq3ia8xdlVQyUJayG6kmc-XJWKklAaKLCWSKdF5gT4QLgPFTYOcwuNzG2vy-UphQ30AB-TVIGSKaFl6PgKzLC3ngQ3M3pBUZYedJmKeEl6iIPUCOD5LPu06obJAzWTyta5Pu4PS0q0wBX2-wiooEVbutwuQUIz4=w908-h646-no">

• Manage uploading files to the server

  <br/>

<img src="https://lh3.googleusercontent.com/mifhuF2cAmkH7OlPshcpaF0qfukohDIW-tXybxv5-YrYhkeD2SoniB78um9yQVU7laxM1V4eHXwwONtLNjNKutXz5tZ4q3dq3ZmLzcpBhRE9fNWo_qJaxu1q8gH4v80TzAEx_TvUkCv9H_3a4Qo-3_lJ1DmFJvY7ocx5XE6Hx-TLelJ9-lJXh-cqq1OEYkOE8F4RPczptmRDwVemZR-MspIdwWGJNxUgQFDsDzDwdKiRsjmdwM9PLWswMKGkC4vln78FG_Euv0SeX2e_qjqTtSODPX-ZCUpJk7ESe394xOByTfZ0qeNoYgXzkfu7eHmCVDnKSj6qVq_TkJqU9bGjDC3pkRKcGmhcLV9QgcLVXAAGgPsideFGoueQHkiTrF1Kg0dDysBIlo2PErw7TU5ZihNzshW4QH3rMbpi-XMG6azV6ODb6H8cT-Owyqh9S6riXMyXU8fc4JQYzO2L4zfLVjYbwM3EcjCeLKEAFFQVwhOewTzMbeHVfJnfGh68Vo4OGolkLk0qcFlAHFPSxcroHunPX6Mo1XqGcSBZnZfc7aRydnCanUdZfbq3GTqKk6x-j739HRNN5KyhFV6NQ5Z0jklf6a0tsY4OBaIdDxVK2kXeE7BZs3vUvHuhkvCoiX6Hxz3ufEmuiDm14C0NXs8AlU60RicefnZzxvuIm_3HAfPdCIFIuTy5BwhA9J8Bcu66XK9GigNPwQ32OoxlJxnXAM6G=w1239-h646-no">

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 '

<img src="https://lh3.googleusercontent.com/z2M6KTngB0ujAXJCnvOrw01S5QzlRnmMTcktAtv43tE-OwFR9eU80yjDOm10xcJdxaDz0zY9wtzVMDvKxTKS4NGFTfccTMopHcx3dCWnrrDwilee8emURkCRYN-qv3yJPgn0v8Q1q5a4G_COdT987Xq_8F20mm52Zx7i_kdopK5n3KrJmAJxKzhuD3zfY5uBScgP20RD8U3DnCQRJ2kHTx8M675ZIdwbzBRqL1x2HRc-wGvMth4pon6SNP7bbjwd4Gmqi5TEsdz62helvqgdprHbhf_z-TW027BfshfETVqM1aBI7Qgqvh8jJUeoQDdBagXiiwBm84iNro8_7gl1cSR7BW8QvwHB_a_prk6s63T90c1tP2X5A9YsQlCLrFQRxZWTJph9I1keTiUfKSLKrYgynb43uPqHyPHWoMLRNaOpsmh5kGTm0ffzoajkyG4wEd6w4EiE0p8KwIqTjmsGLdDagQIeZVhub6oqkOW8VnrS7o29vyhivwY-ZX-zMmoZt_p_tKZDMZX8KPhvEYjMIprUa0XLfZbySEd48S9lUgHPZp16PxjjhAHWReoxP8YjEsC1iem9fFpYGIdrjLbrtJ7DEM7G9jy2KqxwLUdKGAVMxpELw-4f7PUWOsiOBuYu5bNd_o7cE7rbsqWo9HawkMwSr2_4RiLaweHI0S7iT1aScYCSZrtXTpQOaoGwF-30-cKuvSX_JF5lGdqFFpbRor1p=w1150-h646-no">

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
  <img src="https://lh3.googleusercontent.com/H6eJ92R0aVHM_Q0A7gf97-xA70U-ZuyUqf0WtCED7HWIYQSn2u3MpU1jiPGe4gcuBpfWB34sZ300C9vnLNJJblYRboKr3CQ-qqGzOr1lGfkrdMH7ekMK2CkaM9qK55O3O2KNZEYuY02L3Gg2np5Godp4gCFK8dQ7lzPAPAO-_4sPHJJU5ej8Qy0YCsEg7HzRPzAlqEFhZyzF9Xi0RaPEaqaH-8R2-IGg-4fqj9_3YS4YFNK6sENkoZVVNNeIfpeSq87TA4P-36Yy0cDQW8uYIJEVb0Petnv7p7OKBBGjOMFPcMZtyqauPlM8_v8EuzIO3tmanm7g2_fq-LgGPdsiicLflZ_V5OwK8D-cYV7mfcXrNDQODPKoJH26nrl1ZgXDTKNMjdRVNEyHKJhfIRfiWfAscRt0Ffznb3z9jn8Mhccwm0q4eWQf8BTZjj9SsGBDQYHFC1iJ35mOekSO3QQ_d_xQNuNzklic2z-Rkxzwz0xaAEAEcBB7T4qnmvtrOzZ90pMvqErrj8VnOuUhV-cG82K2YzFvfTwjPNFxBbROwcXWXxMHQ_EcDdt7gtRWtQnnHU23mbJyjS35ASfNw8LfRWMEPaZrDxi10Xed4CQBDhDr2JzyUQ2Tp1hiXmnDwgVNoQedsEOULusHcJlB65CovsxSazkrexCZqHImXRiX6zVe6Fm-xxhAcbxtE9G6RTbTbLGzVeYlumVE_1173uIIR4kr=w627-h316-no">
  • Mysql
    mysql -u your_mysql_username -p bookidb < booki_mysql.sql