"If a worker wants to do his job well, he must first sharpen his tools." - Confucius, "The Analects of Confucius. Lu Linggong"
Front page > Programming > Building eCommerce with Next.js

Building eCommerce with Next.js

Published on 2024-10-31
Browse:209

Building eCommerce with Next.js

As a dev, I don't want to be confined by a Shopify template, but also don't want to use their storefront API with a custom app. I want to have in hand a fully customizable solution that I can adjust the way I want. From ui/ux, db, backend, api, authentication, devops and so on. So, I built a fully customizable solution with React, Next.js, MongoDB and Stripe for payments.

You can find demo link here: https://wexcommerce.dynv6.net:8002

And source code here: https://github.com/aelassas/wexcommerce

With the following solution, you can build a fully customizable eCommerce website optmized for SEO with an operational Stripe payment gateway at very low cost by hosting it on a Docker droplet with at least 1GB of RAM.

This solution is composed of a frontend and an admin dashboard. From the frontend, customers can search for the products they want, add them to their cart and checkout. Customers can sign up with Google, Facebook, Apple or Email, and pay with Credit Card, Cash On Delivery, Wire Transfer, PayPal, Google Pay, Apple Pay, Link or other Stripe payment methods. Once logged in, they can have access to the history of their purshases and follow their orders. From the admin dashboard, admins can manage orders, payments, products, categories, customers and general settings such as the default language, the currency, delivery, shipping and payment methods accepted.

A key design decision was made to use TypeScript due to its numerous advantages. TypeScript offers strong typing, tooling, and integration, resulting in high-quality, scalable, more readable and maintainable code that is easy to debug and test.

Features

  • Stock management
  • Order management
  • Payment management
  • Customer management
  • Multiple payment options (Credit Card, Cash On Delivery, Wire Transfer, PayPal, Google Pay, Apple Pay, Link)
  • Operational Stripe Payment Gateway
  • Multiple delivery options (Home delivery, Store withdrawal)
  • Multiple language support (English, French)
  • Multiple login options (Google, Facebook, Apple, Email)
  • Responsive backend and frontend

Resources

  1. Overview
  2. Installing (Self-hosted)
  3. Installing (Docker)
    1. Docker Image
    2. SSL
  4. Setup Stripe
  5. Run from Source
  6. Demo Database
    1. Windows, Linux and macOS
    2. Docker
  7. Change Language and Currency
  8. Add New Language
  9. Logs

Any feedback is appreciated.

Release Statement This article is reproduced at: https://dev.to/aelassas/building-ecommerce-with-nextjs-3aa4?1 If there is any infringement, please contact [email protected] to delete it
Latest tutorial More>

Disclaimer: All resources provided are partly from the Internet. If there is any infringement of your copyright or other rights and interests, please explain the detailed reasons and provide proof of copyright or rights and interests and then send it to the email: [email protected] We will handle it for you as soon as possible.

Copyright© 2022 湘ICP备2022001581号-3