Git Product home page Git Product logo

frederickngoiya / elliot-serverless-ecommerce Goto Github PK

View Code? Open in Web Editor NEW

This project forked from perufork/elliot-serverless-ecommerce

0.0 1.0 0.0 4.21 MB

Elliot - Serverless eCommerce Storefront. 100% headless & serverless. Built with Next.js & one-click deployable on Vercel. 100% cross border ready; deploy, sell & ship to 130+ countries instantly, no credit card required. Join us as contributor ([email protected]).

Home Page: https://headless-elliot.now.sh/en

License: MIT License

JavaScript 99.89% HTML 0.11%

elliot-serverless-ecommerce's Introduction

Elliot's Vercel Next.js Ecommerce Boilerplate

ELLIOT X VERCEL

Features

  • Deploy, sell and fulfill in seconds
  • Fully localized: multi-currency and language, duties and taxes (DDP - Delivered Duty Paid)
  • Native cross border fulfillment: packing, shipping and return labels, commercial invoices and custom declarations forms
  • Instant global payments: Apple, Google, Ali and WeChat Pay, plus all major credit cards and leading payment options (Klarna, iDEAL)
  • Static SSR for collections, products and all simple pages, in 100+ languages
  • Fast and high performing (90%+ across a11y, Performance, and SEO)
  • Fully customizable
  • Mobile-first and fully responsive
  • Cutting-edge project structure and architecture (GraphQL, Next.js and serverless)
  • Continuous deployment with Vercel

Prerequisites

Create an Elliot account

Start by creating a store and add a few products to it!

Yarn or NPM

Online

  1. Login on Elliot

  2. Choose a domain space

  3. Click on "Get Headless"

  4. Follow the onboarding and you will be good to go!

  5. For the env variables names, use the following:

    NEXT_PUBLIC_ELLIOT_ENV_VARIABLES
    NEXT_PUBLIC_BASE_URL

To enable Apple Pay, you will have to get the Apple verification file and place it under /public/.well-known/

Follow this Guide to get the Apple verification file

You might have to upgrade your Vercel account in order to prolonge the serverless function running time to go over 10 seconds in order to enable all the benefits of SSG on run time

Video tutorial

Locally

  1. Install Vercel CLI

  2. Follow the Online steps

  3. Clone your GitHub repository and run vercel env pull .env.local to get your environment variables from Vercel dashboard

  4. Run the following commands to start the server locally on port 3001:

    yarn run dev

Custom theme

You can easily customize the theme by changing the values on the theme config here

Core Team

If you're new and need some guidance feel free reach out to any of our core team members:

Structure

.
├── src
│   ├── assets              # Assets used including the default thumbnail of the website
│   ├── components          # Components
│   │   │── cart              # Components used on the cart page
│   │   │── checkout          # Components used on the checkout page
│   │   │── common            # Common components
│   │   │── listing           # Components used on the landing page
│   │   │── product           # Components used on the product page
│   │   │── shipping          # Components used on the checkout page
│   │   └── theme             # Header, Footer, global style and theme config
│   ├── config              # Config variables
│   ├── helpers             # Helpers functions
│   │   │── buildtime         # queries run on build time
│   │   │── constants         # constants
│   │   │── i18n              # functions to get browser's locale and anything related to i18n
│   │   │── payment           # payment logic
│   │   │── runtime           # queries run on run time
│   │   │── shipping          # shipping logic
│   │   └── ...               # 3 files, alert out of stock, attributes and isEmpty without lodash
│   ├── hoc                 # Higher order components
│   ├── hooks               # Custom hooks
│   ├── lang                # i18n json files
│   ├── pages               # Pages
│   │   │── [lang]            # To have a page for each language supported
│   │   │   │── collection            # Collection page
│   │   │   │   └── [slug]
│   │   │   │── product               # Product page
│   │   │   │   └── [slug]
│   │   │   │── about                 # About page
│   │   │   │── cart                  # Cart page
│   │   │   │── checkout              # Checkout page
│   │   │   │── failed-order          # Failed order page
│   │   │   │── faqs                  # Faqs page
│   │   │   │── index                 # Home page
│   │   │   │── privacy-policy        # Privacy policy page
│   │   │   │── return-policy         # Return policy page
│   │   │   │── successful-order      # About page
│   │   │   └── terms-and-conditions  # Terms and conditions page
│   │   │── _app
│   │   │── _document
│   │   │── _error
│   │   │── product
│   │   │── shipping
│   │   └── _error
│   ├── providers           # Providers
│   ├── queries             # GraphQL queries we run during build time
│   ├── reducers            # Reducers
│   └── scripts             # Scripts meant to be executed before building the website
└── public/.well-known/    # Where you'd put the Apple verification file

Built with

  • Next.js
  • React
  • VSCode
  • And these useful JavaScript libraries package.json

Want to contribute?

Want to invest some time in building the future of global commerce? Email us at [email protected].

If you have discovered a 🐜 or have a feature suggestion, feel free to create an issue on Github.

Enabling Digital Wallets

To enable wallets such as Apple Pay, your Vercel package will need a verification file from Elliot.

To receive that verification file, and be added to our Slack, email our Partnerships team.

elliot-serverless-ecommerce's People

Contributors

dependabot[bot] avatar francam94 avatar ijjk avatar nazarenooviedo avatar omoefe-dukuye avatar smakosh avatar surgieboi 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.