Git Product home page Git Product logo

alphafund / react-storefront Goto Github PK

View Code? Open in Web Editor NEW

This project forked from saleor/storefront

0.0 0.0 0.0 19.17 MB

An open-source storefront in React.js with Next.js. Built for Headless Commerce, using a modern stack with TypeScript, GraphQL, Apollo, and Tailwind CSS.

Home Page: https://reactstorefront.vercel.app

License: BSD 3-Clause "New" or "Revised" License

TypeScript 98.74% JavaScript 0.81% CSS 0.42% Shell 0.01% HTML 0.01%

react-storefront's Introduction

Nextjs Storefront

Next.js Storefront

Next.js Storefront: Your open-source frontend starter pack for building performant e-commerce experiences with Saleor.

Saleor Checkout: Extensible Next.js checkout application and payment integrations powered by Saleor API.

Motivation

๐ŸŽ๏ธ modern & fast: The project utilizes all the best practices for e-commerce, like SSR, ISR, and image optimization.

๐Ÿ’ณ integrated payments: Reduce the purchase friction by taking advantage of integrations with modern payment providers such as Adyen, Mollie or Stripe.

๐Ÿ› ๏ธ easily customizable: TailwindCSS can be easily extended and tweaked, or completely replaced with your favorite CSS solution.

๐Ÿ‘Œ works out-of-the-box: Pre-configured tools built with DX in mind.

Stack

  • Next.js
  • TypeScript
  • GraphQL with Apollo Client
  • Tailwind CSS
  • Turborepo
  • Saleor Checkout

Quickstart

Supercharge your development with our CLI tool and free developer account at Saleor Cloud. To download and install Saleor CLI, run the following command:

npm i -g @saleor/cli

Learn more about Saleor CLI

Set up your local storefront development environment by running the storefront create command with --demo attribute. It will create a fresh clone, install dependencies and create a Saleor instance in the Saleor Cloud. The backend will be set to the newly created Cloud instance.

saleor storefront create --demo

You can also spawn your local storefront development environment without using the --demo attribute. It will create a fresh clone and install dependencies. The default configuration uses the master staging environment of the Saleor Cloud as a backend.

saleor storefront create

Development

First install pnpm (an alternative to npm, focused on performance) globally:

npm install -g [email protected]

Note

react-storefront requires version 7.11.0 of pnpm to run properly, using newer versions won't work

Then install dependencies:

pnpm i

To start the servers, run:

pnpm dev

The command will boot up 4 applications running on different ports.

Read more about development in docs/development.md.

Payment gateways

Saleor App Checkout supports three configurable payment gateways:

Mollie

Adyen

Stripe

For further information, please go to docs/payment/index.md.

Deployment

Read Vercel deployment guide in docs/vercel.md

FAQ

Read FAQ in docs/faq.md

react-storefront's People

Contributors

2can avatar adrian-potepa avatar bandieramonte avatar bmigirl avatar chrislais avatar cloud11pl avatar culy247 avatar dr0er avatar irgenkini avatar jwm0 avatar krzysztofwolski avatar lephuongbg avatar lkostrowski avatar magul avatar mguldner avatar mirekm avatar mmiszy avatar orzechdev avatar peelar avatar rodolfojcj avatar santoni0 avatar servindc avatar szczecha avatar timuric avatar witoszekdev avatar zaiste 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.