spring-boot-react-ecommerce
eCommerce
JavaScript
spring-boot-react-ecommerce-app
eCommerce application based on the microservices architecture built using Spring Boot and ReactJS.
DEMO
-
Deployed to Heroku Cloud:
https://shoppers-ecom-app.herokuapp.com
Note: It is running on a free dyno, so the services go to sleep if not in use.
For the first time, it may take some time to respond.
FEATURES
- Google OAuth 2.0 support for quick login.
- Regular Username/Password authentication.
- Search bar and Search suggestions help to find products quickly.
- Stores user information in the MySQL database.
- Stores API data in Redis Cache to minimize network calls.
- Select filters to display products based on the selections.
- Sort products by popularity, newest, and prices.
- Pagination to display max products on a single page.
- Stores authentication details like token information in cookies.
- Store cart’s product information in cookies.
- Payment service using Stripe’s API to buy products.
- Responsiveness support for all devices.
TOOLS USED
- ReactJS: Front-end Javascript framework.
-
Spring Boot 2.0: Back-end JAVA framework to build microservices using Spring
Rest Controller and Spring JPA. - Material-UI: Used Google’s material design based on the CSS Framework for a responsive website.
- Semantic-UI: Used some components which Material-UI doesn’t support.
- MySQL: Stores product and user information.
- Redis: Stores API data in key-value pairs.
- Cloudinary: CDN server for storing product images.
- Google OAuth: 3rd Party authentication service for quick login by retrieving user profile information.
- Stripe: Payment service API to handle user payment requests.
- Heroku Cloud Platform: Deploying microservices on Heroku.
- Docker-Compose: Easy way to bring up the application using containerization and behaves similarly in the production environment.
MICROSERVICES
- React-UI Service: Front-end client UI which displays data and makes API calls using Axios API.
- Common Data Service: Handles client request to provide common data such as product, filters, categories and order information, etc.
- Authentication Service: Creates user account and handles username/password authentication.
-
Payment Service: Handles payment requests from the client and makes a subsequent request to Stripe API
for money deduction. - Search Suggestion Service: Provide default search suggestions and provides suggestions based on a prefix using Hashmap. The service creates the Hashmap based on available data from the database with various combinations and populates the map.
Steps for executing the application using docker-compose:
Installation Video:
https://youtu.be/nPKYbdKPd0E
- Clone/Download the repository.
-
Set the environmental variables which will be impacted on docker-compose.yml.
- Rename the file “.env-sample” to “.env”.
-
(Optional Step) You need to create a Stripe account and Google OAuth credentials.
The application works even if you don’t create this account, only the payment and OAuth functionality will not work.
These accounts doesn’t charge you anything and are absolutely free.
You need to set below two env variables.
REACT_APP_STRIPE_PUBLISH_KEY=
Go Here to create a Stripe account.REACT_APP_GOOGLE_AUTH_CLIENT_ID=
Go Here to create Google OAuth Credentials.
<li>
Build all the microservices and run the app using docker-compose. This is done using ./start-all.sh script which creates the network and set the container dependencies based on the config mention in the docker-compose.yml.<br /> This will build all the jar files and run all the services.</p> <pre class="notranslate"><code> ./start-all.sh
<li>
If you are making any change in the code then you need to you ./stop-all.sh to clean up the jars created by ./start-all.sh script.
</li></ol>
<p>
<strong>Payment Service Test Details:</strong>
</p>
<pre class="notranslate"><code>Credit card no.: 4242 4242 4242 4242
Expiry: Any future date CVV: Any 3-digit number
<p>
<strong>Steps to deploy on Heroku using docker-compose:</strong>
</p>
<ol dir="auto">
<li>
create heroku.yml as docker-compose.yml is not invoked on Heroku.
</li>
<li>
If the application contains a database then install MySQL or any other database<br /> from Heroku marketplace[<a rel="nofollow noopener" target="_blank" href="https://elements.heroku.com">https://elements.heroku.com</a>].</p> <p>
Note: Before installing you need to add credit/debit card info. Without this it<br /> won’t allow you to install the database. </li>
<li>
Set the config vars based on the database URL.
</li>
<li>
Set the stack:container for the application in order to build with docker-compose.</p> <pre class="notranslate"><code> heroku stack:set container -a <application-name>
<li>
Deploy individual service on Heroku.
</li></ol>
<p>
<strong>References</strong>
</p>
<ol dir="auto">
<li>
<a rel="nofollow noopener" target="_blank" href="https://spring.io/blog/2015/06/08/cors-support-in-spring-framework">https://spring.io/blog/2015/06/08/cors-support-in-spring-framework</a>
</li>
<li>
<a rel="nofollow noopener" target="_blank" href="https://devcenter.heroku.com/articles/build-docker-images-heroku-yml">https://devcenter.heroku.com/articles/build-docker-images-heroku-yml</a>
</li>
<li>
<a rel="nofollow noopener" target="_blank" href="https://material-ui.com/">https://material-ui.com/</a>
</li>
<li>
<a rel="nofollow noopener" target="_blank" href="https://react.semantic-ui.com/">https://react.semantic-ui.com/</a>
</li>
<li>
<a rel="nofollow noopener" target="_blank" href="https://swiperjs.com/demos/">https://swiperjs.com/demos/</a>
</li>
<li>
<a rel="nofollow noopener" target="_blank" href="https://www.geeksforgeeks.org/write-a-c-program-to-print-all-permutations-of-a-given-string/">https://www.geeksforgeeks.org/write-a-c-program-to-print-all-permutations-of-a-given-string/</a>
</li>
<li>
<a rel="nofollow noopener" target="_blank" href="https://redis.io/commands">https://redis.io/commands</a>
</li>
<li>
<a rel="nofollow noopener" target="_blank" href="https://docs.spring.io/spring-data/data-redis/docs/current/reference/html/#reference">https://docs.spring.io/spring-data/data-redis/docs/current/reference/html/#reference</a>
</li>
<li>
https://github.com/google/gson
</li>
<li>
<a rel="nofollow noopener" target="_blank" href="http://modelmapper.org/user-manual/spring-integration/">http://modelmapper.org/user-manual/spring-integration/</a>
</li>
<li>
<a rel="nofollow noopener" target="_blank" href="https://www.baeldung.com/spring-data-redis-tutorial">https://www.baeldung.com/spring-data-redis-tutorial</a>
</li>
<li>
https://github.com/js-cookie/js-cookie
</li>
<li>
<a rel="nofollow noopener" target="_blank" href="https://reactjs.org/docs/hooks-reference.html">https://reactjs.org/docs/hooks-reference.html</a>
</li>
<li>
<a rel="nofollow noopener" target="_blank" href="https://redux-form.com/8.3.0/docs/gettingstarted.md/">https://redux-form.com/8.3.0/docs/gettingstarted.md/</a>
</li>
<li>
<a rel="nofollow noopener" target="_blank" href="https://react-redux.js.org/api/connect">https://react-redux.js.org/api/connect</a>
</li>
<li>
https://github.com/reduxjs/redux-thunk
</li>
<li>
<a rel="nofollow noopener" target="_blank" href="https://attacomsian.com/blog/spring-data-jpa-one-to-many-mapping">https://attacomsian.com/blog/spring-data-jpa-one-to-many-mapping</a>
</li>
<li>
<a rel="nofollow noopener" target="_blank" href="https://stripe.com/docs">https://stripe.com/docs</a>
</li>
<li>
<a rel="nofollow noopener" target="_blank" href="https://developers.google.com/identity/protocols/oauth2">https://developers.google.com/identity/protocols/oauth2</a>
</li>
<li>
<a rel="nofollow noopener" target="_blank" href="https://devcenter.heroku.com/articles/heroku-redis">https://devcenter.heroku.com/articles/heroku-redis</a>
</li>
</ol>