All Projects → ujjavaldesai07 → spring-boot-react-ecommerce-app

ujjavaldesai07 / spring-boot-react-ecommerce-app

Licence: other
eCommerce application based on the microservices architecture built using Spring Boot and ReactJS.

Programming Languages

javascript
184084 projects - #8 most used programming language
java
68154 projects - #9 most used programming language
CSS
56736 projects

Projects that are alternatives of or similar to spring-boot-react-ecommerce-app

React Antd Admin Template
一个基于React+Antd的后台管理模版,在线预览https://nlrx-wjc.github.io/react-antd-admin-template/
Stars: ✭ 1,022 (+362.44%)
Mutual labels:  react-router, react-redux, redux-thunk
React Interview Questions
300+ React Interview Questions
Stars: ✭ 151 (-31.67%)
Mutual labels:  react-router, redux-form, redux-thunk
React Admin
基于antd、redux-observable、redux-thunk、react-router响应式SPA脚手架,后台管理系统demo. 权限管理,用户管理,菜单管理。无限级菜单,下拉树形选择框
Stars: ✭ 141 (-36.2%)
Mutual labels:  react-router, react-redux, redux-thunk
React-Playground
Learning reactjs from the ground up (router, redux, thunk, hooks, context, portals, and functional components)
Stars: ✭ 15 (-93.21%)
Mutual labels:  react-router, react-redux, redux-thunk
trivin
⚡️Setup your entire project quickly and easily with 1-line command ⚡️
Stars: ✭ 58 (-73.76%)
Mutual labels:  react-router, react-redux, redux-thunk
cra-redux-boilerplate
⚛️🔨create-react-app application with redux and another cool libraries to make your life easier.
Stars: ✭ 15 (-93.21%)
Mutual labels:  react-router, react-redux, redux-thunk
rapid-react
A light weight interactive CLI Automation Tool 🛠️ for rapid scaffolding of tailored React apps with Create React App under the hood.
Stars: ✭ 73 (-66.97%)
Mutual labels:  react-router, react-redux, redux-form
Create React App Redux
React Router, Redux, Redux Thunk & Create React App boilerplate
Stars: ✭ 885 (+300.45%)
Mutual labels:  react-router, react-redux, redux-thunk
Simple Universal React Redux
The simplest possible Async Universal React & Redux Boilerplate app, that works on both Mac and Windows
Stars: ✭ 58 (-73.76%)
Mutual labels:  react-router, react-redux, redux-thunk
React Sight
Visualization tool for React, with support for Fiber, Router (v4), and Redux
Stars: ✭ 2,716 (+1128.96%)
Mutual labels:  react-router, react-redux
Create React Server
Server & middleware for React + Router + Redux with Server Side Rendering
Stars: ✭ 139 (-37.1%)
Mutual labels:  react-router, react-redux
V2 Universal Js Hmr Ssr React Redux
⚡ (V2) Universal JS - Server Side Rendering, Code Splitting and Hot Module Reloading ⚡
Stars: ✭ 147 (-33.48%)
Mutual labels:  react-router, react-redux
Favesound Redux
🎶 A SoundCloud Client in React + Redux running in production. Live Demo and Source Code to explore React + Redux as a beginner.
Stars: ✭ 1,586 (+617.65%)
Mutual labels:  react-router, redux-thunk
Cwg React Starter
Pre-configured and Ready to use React Starter App. To save time in settings things up for new project. Almost everything needed is already configured. Just clone and start developing without wasting time in doing same stuffs for every project. (#codewithghazi)
Stars: ✭ 122 (-44.8%)
Mutual labels:  react-router, react-redux
React Login
A client side implementation of authentication using react.js for my blog on medium. This is the second part of my previous blog on how to implement scalable node.js server.
Stars: ✭ 105 (-52.49%)
Mutual labels:  react-router, react-redux
React Demo Gather
react demo合集,有自己写的,也有在学习过程中觉得很好的demo收集的,持续更新中
Stars: ✭ 97 (-56.11%)
Mutual labels:  react-router, react-redux
Express Webpack React Redux Typescript Boilerplate
🎉 A full-stack boilerplate that using express with webpack, react and typescirpt!
Stars: ✭ 156 (-29.41%)
Mutual labels:  react-router, react-redux
Slack Patron
Log and view all Slack messages.
Stars: ✭ 157 (-28.96%)
Mutual labels:  react-router, react-redux
Redux First History
🎉 Redux First History - Redux history binding support react-router - @reach/router - wouter
Stars: ✭ 163 (-26.24%)
Mutual labels:  react-router, react-redux
Express React Boilerplate
Express, MySQL, React/Redux, NodeJs Application Boilerplate
Stars: ✭ 179 (-19%)
Mutual labels:  react-router, redux-form

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

  1. Clone/Download the repository.

  2. Set the environmental variables which will be impacted on docker-compose.yml.

    1. Rename the file ".env-sample" to ".env".

    2. (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.

  3. 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. This will build all the jar files and run all the services.

       ./start-all.sh
    
  4. 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.

Payment Service Test Details:

Credit card no.: 4242 4242 4242 4242
Expiry: Any future date
CVV: Any 3-digit number

Steps to deploy on Heroku using docker-compose:

  1. create heroku.yml as docker-compose.yml is not invoked on Heroku.

  2. If the application contains a database then install MySQL or any other database from Heroku marketplace[https://elements.heroku.com].

    Note: Before installing you need to add credit/debit card info. Without this it won't allow you to install the database.

  3. Set the config vars based on the database URL.

  4. Set the stack:container for the application in order to build with docker-compose.

       heroku stack:set container -a <application-name>
    
  5. Deploy individual service on Heroku.

References

  1. https://spring.io/blog/2015/06/08/cors-support-in-spring-framework
  2. https://devcenter.heroku.com/articles/build-docker-images-heroku-yml
  3. https://material-ui.com/
  4. https://react.semantic-ui.com/
  5. https://swiperjs.com/demos/
  6. https://www.geeksforgeeks.org/write-a-c-program-to-print-all-permutations-of-a-given-string/
  7. https://redis.io/commands
  8. https://docs.spring.io/spring-data/data-redis/docs/current/reference/html/#reference
  9. https://github.com/google/gson
  10. http://modelmapper.org/user-manual/spring-integration/
  11. https://www.baeldung.com/spring-data-redis-tutorial
  12. https://github.com/js-cookie/js-cookie
  13. https://reactjs.org/docs/hooks-reference.html
  14. https://redux-form.com/8.3.0/docs/gettingstarted.md/
  15. https://react-redux.js.org/api/connect
  16. https://github.com/reduxjs/redux-thunk
  17. https://attacomsian.com/blog/spring-data-jpa-one-to-many-mapping
  18. https://stripe.com/docs
  19. https://developers.google.com/identity/protocols/oauth2
  20. https://devcenter.heroku.com/articles/heroku-redis
Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].