Skip to main content
  1. All Posts/

ecommerce-spring-reactjs

eCommerce TypeScript


🌺 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


Cart
Ordering


Email template
List of orders


User profile page
Add perfume page


Edit perfume list
Edit perfume page