Welcome to Amazing Store project

An multi-currencies e-commerce using Apollo-client to consume the data, React, react-router-dom and styled-components

Production mode

The company didn’t require it, but i’d deployed it in production, the back-end i did a few changes to host it in heroku server and the front-end archives are in my personal host, it’s as my subdomain. So, you can see the application working in this link: http://amazing.sipione.tech. I hope you enjoy the experience in the website! =D

Description

All the code was created by Ricardo Deo Sipione Augusto in order to reach the challange goals proposed by the company Scandiweb. So, at first, thank you company for the opportunity to do it, to develop as a professional and to make me grow up with my knowledge.

The back-end and the template were already ready, in the gitHub repository and in the Figma. In this context I had to try to construct a react front-end solution for the problem following the visual identity.

Among the rules, responsivity was not necessary, just a desktop with minimum responsivity for the different desktop screens, following the requisition I didn’t write the code using mobile first as the base method.

In addition I must use class components and was not permitted to use functional components, bootstrap, materialUI, Jquery, etc. The third-part lib allowed was styled-components and react-router-dom.

The Folder structure

  • client folder //Root
    • public //public folder with html and ico for the web public access

    • src

      • assets //The static informations folder
      • images //Folder with images for the website, preferentially in svg or webp format.
    • common //Folder with the items used for more then one page or component

      • components //Folder for the components used in more than one time or to make the item near to SOLID pattern
      • context //The folder with all context archives which work with global variables
      • foundation //The folder with the basis of the app, like variables, global style, etc.
    • pages //The folder which contains the pages information, the element who is gonna call for components and contexts most intensively. Every page folder has an index.js and a style.js for the object and styled components respectively.

      • shop //The Home page with the products by category
      • cart //The cart page with all the items add in the cart by the user
      • product //The product page with all the product attributes and details
    • services //The folder responsible to save all the archives witch make the link with database

      • apolloClientService.js //Here are all the apollo client configuration to use the data in the app
      • queryAllProducts.js //Here are request for all products, used in the index of shop page
      • queryCategories.js //Here are the request for the categories available, used for the component header to mount the navigation system
      • queryCurrency.js //Here are the request for the currencies available, used also by the header components, to mount the currency switcher
      • queryProductById.js //Here are the product request, used by the product page, requesting by the id
    • App.js //Main app archive with routes, global style and normalize.css

    • index.js //The main archive with the app rendering and context providers application

GitHub

View Github