/ecommerce-spring-reactjs

🌺 eCommerce online shop. Using Java, Spring Boot, JWT, OAuth2.0, React.js, Redux Toolkit, Ant Design, REST API, GraphQL

Primary LanguageTypeScriptMIT LicenseMIT

Build Status codecov

🌺 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
  2. Install Java 8: link
  3. Install Intellij IDEA Ultimate: link
  4. Install Postgresql: link
  5. Open pgAdmin and create a new DB (name: perfume and perfumetest) in Postgresql: link
  6. Add Postgresql properties to the application.properties file: link
  7. Add Lombok and GraphQL plugins to the Intellij IDEA (File/Settings/Plugins)
  8. Register new AWS account: link
  9. Create new S3 bucket: link
  10. Change access from private to public in S3 bucket
  11. Add public access policy to S3 bucket (!!!important!!! see: doc, github examle or my example)
  12. Get AWS keys: link and add to the application.properties file: link
  13. Register in gmail
  14. Configure reCAPTCHA: link, guide, video guide (RUS)
  15. Add reCAPTCHA key to the application.properties file: link and to link
  16. Add gmail account and password to the application.properties file: link
  17. Go to link (important) and change to: “Allow less secure apps: ON”
  18. Configure OAuth2: link, guide, video guide (RUS)
  19. Add OAuth2 properties to the application.properties file: link
  20. Install node.js and npm: link
  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
Menu page Product page
Cart Ordering
Email template List of users
Email template List of orders
Email template List of users
User profile page Add perfume page
User profile page Add perfume page
Edit perfume list Edit perfume page
Edit perfume list Edit perfume page