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.

The above is the detailed content of Building eCommerce with Next.js. For more information, please follow other related articles on the PHP Chinese website!