Skip to content

Commit 8a56086

Browse files
ujjavaldesai07ujjavaldesai07
committed
Added the README.md and .env-sample file
1 parent 1754159 commit 8a56086

File tree

2 files changed

+154
-0
lines changed

2 files changed

+154
-0
lines changed

‎.env-sample

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
MYSQL_ROOT_PASSWORD=mypass
2+
MYSQL_DATABASE=ecommerce_app_database
3+
MYSQL_USER=mysqluser
4+
MYSQL_PASSWORD=mypass
5+
6+
DB_PORT=3306
7+
DB_SCHEMA=ecommerce_app_database
8+
DB_USER=mysqluser
9+
DB_PASS=mypass
10+
11+
REACT_APP_STRIPE_PUBLISH_KEY=pk_test_51H805Oa3n3j3JVXUotWOsdf223PXI2ZehJ0s4QSQK0WjEJer78w87wer8h2u3bo32sTVcxyh5bDuulBildNrp
12+
REACT_APP_GOOGLE_AUTH_CLIENT_ID=23432543654-m4s23i3dsf72938gubrj32n8932ro9knqudv.apps.googleusercontent.com
13+
REACT_APP_PORT=3000
14+
15+
AUTHENTICATION_SERVICE_PORT=7000
16+
PAYMENT_SERVICE_PORT=9050
17+
COMMON_DATA_SERVICE_PORT=9000
18+
SEARCH_SUGGESTION_SERVICE_PORT=10000
19+
20+
ACTIVE_PROFILE=dev
21+
REDIS_PASSWORD=mypass
22+
REDIS_PORT=6379

‎README.md

Lines changed: 132 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,132 @@
1+
# spring-boot-react-ecommerce-app
2+
Ecommerce application based on microservice architecture built using Spring-boot (back-end) and React JS (front-end).
3+
4+
**DEMO**
5+
- Deployed to Heroku Cloud:
6+
7+
https://shoppers-ecom-app.herokuapp.com
8+
9+
**Note:** It is running on a free dyno, so the services goes to sleep if not in use.
10+
For the first time it may take some time to responds.
11+
12+
**FEATURES**
13+
14+
- Google OAuth 2.0 support for a quick login.
15+
- Regular Username/Password authentication.
16+
- Search bar and Search suggestions help to find products quickly.
17+
- Stores user information in MySQL database.
18+
- Stores API data in Redis Cache to minimize network calls.
19+
- Select filters to display products based on the selections.
20+
- Sort products by popularity, newest and prices.
21+
- Pagination to display max products on a single page.
22+
- Stores authentication details like token information in cookies.
23+
- Store cart's products information in cookies.
24+
- Payment service using Stripe's API to buy products.
25+
26+
**TOOLS USED**
27+
28+
- **ReactJS:** Front-end Javascript framework.
29+
- **Spring-boot 2.0:** Back-end JAVA framework to build microservices using Spring
30+
Rest Controller and Spring JPA.
31+
- **Material-UI:** Used Google's material design based on CSS Framework for a responsive website.
32+
- **Semantic-UI:** Used some components which Material-UI doesn't support.
33+
- **MySQL:** Stores product and user information.
34+
- **Redis:** Stores API data in key-value pairs.
35+
- **Cloudinary:** CDN server for storing product images.
36+
- **Google OAuth:** 3rd Party authentication service for quick login by retrieving user profile information.
37+
- **Stripe:** Payment service API to handle user payment requests.
38+
- **Heroku Cloud Platform:** Deploying microservices on Heroku.
39+
- **Docker-Compose:** Easy way to bring up the application using containerization
40+
and behaves similar in production environment.
41+
42+
**MICROSERVICES**
43+
44+
- **React-UI Service:** Front-end client UI which displays data and makes API calls using Axios API.
45+
- **Common Data Service:** Handles client request to provide common data such as product, filters, categories and order information etc.
46+
- **Authentication Service:** Creates user account and handles username/password authentication.
47+
- **Payment Service:** Handles payment request from the client and makes subsequent request to Stripe API
48+
for money deduction.
49+
- **Search Suggestion Service:** Provide default search suggestions and provides suggestions based on a prefix
50+
using Hashmap. The service creates the Hashmap based on available data from the database with various combination
51+
and populates the map.
52+
53+
**Steps for executing application using docker-compose:**
54+
1. Clone/Download the repository.
55+
56+
2. Set the environmental variables which will be impacted on docker-compose.yml.
57+
You can check .env-setup file. Most of the variables are already set.
58+
You need to create Stripe account and Google OAuth credentials.
59+
These accounts are doesn't charge you anything and are absolutely free.
60+
61+
You need to set below two env variables.
62+
63+
REACT_APP_STRIPE_PUBLISH_KEY=<Your Stripe Publishable Key>
64+
65+
Go [Here](https://dashboard.stripe.com/register) to create Stripe account.
66+
67+
REACT_APP_GOOGLE_AUTH_CLIENT_ID=<Your Google AUTH Client ID>
68+
69+
Go [Here](https://console.developers.google.com) to create Google OAuth Credentials.
70+
71+
3. Build all the microservices and run the app using docker-compose. This is done using ./start-all.sh script which creates
72+
the network and set the container dependencies based on the config mention in the docker-compose.yml.
73+
This will build all the jar files and run all the services.
74+
```
75+
./start-all.sh
76+
```
77+
78+
4. If you are making any change in the code then you need to you ./stop-all.sh to clean up
79+
the jars created by ./start-all.sh script. Also, you need to remove the images from the docker
80+
otherwise it will occupy the image spaces unnecessarily.
81+
82+
You can check docker images with below command
83+
```
84+
docker images
85+
```
86+
Remove multiple docker images
87+
```
88+
docker images -a | grep -E "ecommerce|none" | awk '{print $3}' | xargs docker rmi -f
89+
```
90+
91+
**Steps to deploy on heroku using docker-compose:**
92+
93+
1. create heroku.yml as docker-compose.yml is not invoked on heroku.
94+
95+
2. If the application contains database then install mysql or any other database
96+
from heroku marketplace[https://elements.heroku.com].
97+
98+
Note: Before installing you need to add credit/debit card info. Without this it
99+
wont allow you to install the database.
100+
101+
3. Set the config vars based on the database url.
102+
103+
4. Set the stack:container for the application in order to build with docker-compose.
104+
```
105+
heroku stack:set container -a <application-name>
106+
```
107+
108+
5. Deploy individual service on Heroku.
109+
110+
111+
**References**
112+
1. https://spring.io/blog/2015/06/08/cors-support-in-spring-framework
113+
2. https://devcenter.heroku.com/articles/build-docker-images-heroku-yml
114+
3. https://material-ui.com/
115+
4. https://react.semantic-ui.com/
116+
5. https://swiperjs.com/demos/
117+
6. https://www.geeksforgeeks.org/write-a-c-program-to-print-all-permutations-of-a-given-string/
118+
7. https://redis.io/commands
119+
8. https://docs.spring.io/spring-data/data-redis/docs/current/reference/html/#reference
120+
9. https://github.com/google/gson
121+
10. http://modelmapper.org/user-manual/spring-integration/
122+
11. https://www.baeldung.com/spring-data-redis-tutorial
123+
12. https://github.com/js-cookie/js-cookie
124+
13. https://reactjs.org/docs/hooks-reference.html
125+
14. https://redux-form.com/8.3.0/docs/gettingstarted.md/
126+
15. https://react-redux.js.org/api/connect
127+
16. https://github.com/reduxjs/redux-thunk
128+
17. https://attacomsian.com/blog/spring-data-jpa-one-to-many-mapping
129+
18. https://stripe.com/docs
130+
19. https://developers.google.com/identity/protocols/oauth2
131+
20. https://devcenter.heroku.com/articles/heroku-redis
132+

0 commit comments

Comments
 (0)