Giter Club home page Giter Club logo

infraform / react-e-commerce-project Goto Github PK

View Code? Open in Web Editor NEW
3.0 1.0 4.0 985 KB

E-commerce application built with React.js, Axios, Context Api, Formik, Yup and SASS for the frontend; Swagger API for the backend. And we used Docker for containerization of the application. We triggered the GitHub Actions build process by pushing the code to the GitHub repository. Used DockerHub as container registry to push our Docker images. We used AWS CloudFormation as the Infrastructure as Code solution for deployment the application on AWS EC2 instance.

Home Page: https://hub.docker.com/repository/docker/devenes/react-commerce

License: Apache License 2.0

JavaScript 67.47% HTML 0.39% SCSS 32.03% CSS 0.01% Dockerfile 0.10%
airbnb-eslint aws axios css cypress docker dockerfile formik javascript js

react-e-commerce-project's Introduction



ikinci-el-logo


Description

E-commerce application built with React.js, Axios, Context Api, Formik, Yup and SASS for the frontend; Swagger API for the backend. And we used Docker for containerization of the application. We triggered the GitHub Actions build process by pushing the code to the GitHub repository. Used DockerHub as container registry to push our Docker images. We used AWS CloudFormation as the Infrastructure as Code solution for deployment the application on AWS EC2 instance.

You can access the live demo from the link here: Live Demo

Content

About

  • Second Hand Project is an e-commerce site that provides its users with the functionality to add, buy and sell products.

  • Users can directly purchase the products, as well as bid on the products that are open to offers, or open the products they own to offer.

  • In the bidding section, the highest bid was taken into consideration. If the seller approves the offer, the product becomes cannot be offered. In this way, the product is sold to the person with the direct price or the highest offer.

  • If the seller rejects the highest bid, the product offer is shown as rejected in the vendor panel unless there is a higher bid than it. The purpose here is interpreted as the seller expects a higher offer.

  • The product owner cannot buy or bid on her/his own product.

  • If you already have an account, you can log in or use the site by registering.

  • The application is designed for web and mobile. All UI designs are responsive.

Used Packages And Modules

  • React JS
  • Context Api
  • Axios
  • Js-cookie
  • Airbnb Eslint
  • SASS
  • Formik
  • Yup
  • Ant Design Upload
  • Toastify
  • Cypress
  • Netlify

Installation

  • First, clone the project:

    git clone https://github.com/infraform/react-e-commerce-project.git
    
  • Install dependencies with npm

    npm install
    
  • or install dependencies with yarn

    yarn install
    
  • Start the project on localhost port: 3000 with using npm or yarn

    npm start
    
    yarn start
    
  • Test the project by running Cypress tests and clicking ikinciElLoginRegister.test.js

    yarn run cypress open
    

Previews

Web - Login Page

Web - Register Page

Web - Main Page

Web - Detail Page

Web - Add Product Page

Web - Account Page

Mobile

mobile-prew mobile-prew mobile-prew mobile-prew mobile-prew mobile-prew



App Performance

Web

mobile-prew

Mobile

mobile-prew

react-e-commerce-project's People

Contributors

burak-caniklioglu avatar devenes avatar

Stargazers

 avatar  avatar  avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.