Building ecommerce with Next.js

Contents

1. Introduction
2. Features
3. Live Demo
4. Resources

Source code: https://github.com/aelassas/wexcommerce

Demo: https://wexcommerce.dynv6.net:8002

Introduction

Building ecommerce with Next.js provides a solid foundation for scaling your business. Focus on performance, security, and user experience while maintaining code quality and documentation. Regular updates and monitoring will ensure your platform remains competitive and reliable.

Next.js stands out as an excellent choice for ecommerce development due to its:

• Superior Performance: Built-in optimizations for fast page loads and seamless user experiences
• SEO Advantages: Server-side rendering capabilities that ensure your products are discoverable
• Scalability: Enterprise-ready architecture that grows with your business
• Rich Ecosystem: Vast collection of libraries and tools for rapid development
• Developer Experience: Intuitive development workflow with hot reloading and automatic routing

For developers who value creative freedom and technical control, traditional eCommerce platforms like Shopify can feel restrictive. While Shopify's templates offer quick setup, and their Storefront API provides some flexibility, neither solution delivers the complete architectural freedom that modern developers crave.

This project emerged from a desire to build without boundaries – a fully customizable eCommerce solution where every aspect is within your control. Built on Next.js for its powerful rendering capabilities, MongoDB for flexible data modeling, and Stripe for secure payment processing, this open-source platform empowers developers to:

• Own the UI/UX: Design unique customer experiences without fighting against template limitations
• Control the Backend: Implement custom business logic and data structures that perfectly match your requirements
• Master DevOps: Deploy, scale, and monitor your application with your preferred tools and workflows
• Extend Freely: Add new features and integrations without platform constraints or additional fees

By choosing this stack, you're not just building a store – you're investing in a foundation that can evolve with your needs, backed by robust open-source technologies and a growing developer community.

By choosing this solution, you can deploy your own customizable eCommerce website at minimal cost using the Docker-based setup. The platform integrates Stripe for secure payments, is optimized for SEO and can be efficiently hosted on a 1GB RAM droplet, making it an ideal choice for eCommerce operations looking for a scalable and cost-effective solution. You can deploy this solution for under $5 monthly using cloud providers like Hetzner or DigitalOcean.

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 instead of JavaScript 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.

I invested significant time and effort into building this open-source project to make it freely available to the community. If this project has been helpful in your work, consider supporting its continued development and maintenance. You can contribute through GitHub Sponsorship (one-time or monthly), PayPal, or Buy Me a Coffee. Even a simple star on the GitHub repository helps spread the word and is greatly appreciated.

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

Live Demo

• URL: https://wexcommerce.dynv6.net:8002/
• Login: jdoe@wexcommerce.com
• Password: sh0ppingC4rt

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. Unit Tests and Coverage
10. Logs