https://github.com/neelimabonangi/ecommerce-reactjs-spring
ecommerce online shop. Using Java, Spring Boot, JWT, OAuth2.0, React.js, Redux Toolkit, Ant Design, REST API, GraphQL
https://github.com/neelimabonangi/ecommerce-reactjs-spring
cart ecommerce ecommerce-application graphql java javascript jwt oauth2 postgresql reactjs redux-toolkit shopping shopping-cart spring spring-boot spring-security typescript
Last synced: 3 months ago
JSON representation
ecommerce online shop. Using Java, Spring Boot, JWT, OAuth2.0, React.js, Redux Toolkit, Ant Design, REST API, GraphQL
- Host: GitHub
- URL: https://github.com/neelimabonangi/ecommerce-reactjs-spring
- Owner: neelimabonangi
- License: mit
- Created: 2025-02-21T04:59:11.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-02-21T07:18:02.000Z (over 1 year ago)
- Last Synced: 2025-06-10T21:49:06.015Z (about 1 year ago)
- Topics: cart, ecommerce, ecommerce-application, graphql, java, javascript, jwt, oauth2, postgresql, reactjs, redux-toolkit, shopping, shopping-cart, spring, spring-boot, spring-security, typescript
- Language: TypeScript
- Homepage:
- Size: 334 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
[](https://travis-ci.com/merikbest/ecommerce-spring-reactjs)
[](https://codecov.io/gh/merikbest/ecommerce-spring-reactjs)
# :hibiscus: Perfume webstore
E-commerce project developed using Spring Boot and React.js.
#### An actual version of frontend build deployed to AWS S3 and backend deployed to Heroku:
http://perfume-web.tk
Login: admin@gmail.com
Password: admin
## Used Technologies:
* Back-end: Spring (Boot, Data, Security), JPA / Hibernate, PostgreSQL, JUnit, Mockito
* Front-end: TypeScript, React.js, Redux Toolkit, Ant Design, Jest
* Security: JWT, OAuth2 Google, Facebook, Github
* REST API, GraphQL API
* AWS S3, Heroku
* Server Build: Maven
* Client Build: npm, yarn, webpack
## Features
* Authentication with JWT and Email validation.
* Authentication with Google, Facebook or Github
* Customers can search for the product according to the specified criteria.
* Customers can add and delete products from the shopping cart.
* Customers can order the products in the shopping cart.
* Customers can change their password and view their orders.
* Admin can add or modify a product.
* Admin can change the data of any user.
* Admin can view orders of all users.
## Installation
1. Install maven: [link](https://www.baeldung.com/install-maven-on-windows-linux-mac)
2. Install Java 8: [link](https://www.oracle.com/ru/java/technologies/javase/javase8-archive-downloads.html)
3. Install Intellij IDEA Ultimate: [link](https://www.jetbrains.com/idea/)
4. Install Postgresql: [link](https://www.postgresql.org/download/)
5. Open pgAdmin and create a new DB (name: perfume and perfumetest) in Postgresql: [link](https://www.guru99.com/postgresql-create-database.html#:~:text=PostgreSQL%20Create%20Database%20using%20pgAdmin)
6. Add Postgresql properties to the application.properties file: [link](https://i.ibb.co/dL77cZS/prop-postgresql.png)
7. Add Lombok and GraphQL plugins to the Intellij IDEA (File/Settings/Plugins)
8. Register new AWS account: [link](https://portal.aws.amazon.com/billing/signup#/start)
9. Create new S3 bucket: [link](https://docs.aws.amazon.com/AmazonS3/latest/userguide/create-bucket-overview.html)
10. Change access from private to public in S3 bucket
11. Add public access policy to S3 bucket (!!!important!!! see:
[doc](https://docs.aws.amazon.com/AmazonS3/latest/userguide/access-policy-language-overview.html),
[github examle](https://stackoverflow.com/questions/58580042/how-to-set-public-read-only-access-on-amazon-s3-bucket#:~:text=To%20make%20objects%20publicly%20accessible%2C%20use%20a%20policy%20like%20this%3A) or
[my example](https://i.ibb.co/mSpHmyL/12-bucket.jpg ))
12. Get AWS keys: [link](https://supsystic.com/documentation/id-secret-access-key-amazon-s3/) and add to the application.properties file: [link](https://i.ibb.co/FKFKR4n/props-aws.png)
13. Register in gmail
14. Configure reCAPTCHA: [link](https://www.google.com/recaptcha/admin#list), [guide](https://developers.google.com/recaptcha/docs/verify), [video guide (RUS)](https://youtu.be/7cDpbAbhyjc?t=212)
15. Add reCAPTCHA key to the application.properties file: [link](https://i.ibb.co/nDTP8H5/prop-recaptcha.png) and to [link](https://github.com/merikbest/ecommerce-spring-reactjs/blob/4f74f86500ab9363c04a18412dd432bd913e0477/frontend/src/pages/Registration/Registration.tsx#L134)
16. Add gmail account and password to the application.properties file: [link](https://i.ibb.co/0tRr1Gy/props-gmail.png)
17. Go to [link](https://myaccount.google.com/u/2/lesssecureapps) (important) and change to: “Allow less secure apps: ON”
18. Configure OAuth2: [link](https://console.cloud.google.com/apis/credentials), [guide](https://spring.io/guides/tutorials/spring-boot-oauth2/), [video guide (RUS)](https://www.youtube.com/watch?v=-ohlXEJeRX8&ab_channel=letsCode)
19. Add OAuth2 properties to the application.properties file: [link](https://i.ibb.co/YpH4V3m/oauth2-props.png)
20. Install node.js and npm: [link](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm)
21. Now you can run EcommerceApplication (port 8080) and open terminal in client directory and type: npm start
22. Navigate to http://localhost:3000
## Swagger Documentation
https://perfume-websore-api.herokuapp.com/swagger-ui.html
Or show local:
http://localhost:8080/swagger-ui.html
## Screenshots
Menu page | Product page
:------------------------:|:-------------------------:
 | 
Cart | Ordering
:------------------------:|:-------------------------:
 | 
Email template | List of orders
:------------------------:|:-------------------------:
 | 
User profile page | Add perfume page
:------------------------:|:-------------------------:
 | 
Edit perfume list | Edit perfume page
:------------------------:|:-------------------------:
 | 