An open source Next.js app to deploy a simple online store, with web3 native auth and payments enabled
This is Next.js app that natively integrates crypto authentication and payments for sellers and buyers of physical goods. The app can be connected to any chain and integrates a simple UI for not-so-technical people to set up a store, paired with a database.
We made this to simplify bootstrapping a web3 app and to allow a majority of people to set up an online store with crypto. We describe in the README how to set it up on a local computer.
This projects aims to be open source, free for everyone. Anyone can download or clone the repo and start configuring it. We wanted it as much simple as possible for a Next.JS app, to allow people around the world to host their store wherever they want, and for other developers to engage and maintain the project along the time, if it finds its people.
We used a Next.js template made by NextUI V2. We decided to choose this technology because of Tailwind integration, to focus on the backend. It was a challenge, because neither me or my partner are really experimented with Typescript, but we chose to keep it for most of the front-end to ensure data consistency. We especially wanted to release a unique Next.js template, which is widely used by developpers and could inspire others to take it and tweak it, or reuse the tools we built inside the app an integrate it in another template. For data management like orders and products we decided to use a database and we set up a MongoDB on Clever Cloud, a Platform as a Service, to be able to work on local but to communicate with the same database.
The app has two spaces: the admin space, only accessible to the admin when they run the app on local and claim the store with their wallet. Customers can access the public store and rest of the website. We use a JWT token that serves as an environment variable alongside the Ethereum address of the admin.
Our goal was to make the most of web2 technology and web3, and make them work together. Since the Ethereum address is public, it acts as a username, and transactions and signatures as a login system. The JWT token is their password, which can be injected on an environment variable file or on cloud platforms.I dealt with the frontend and my partner built the API to connect to any wallet an any chain with a "Connect Wallet" button component. We had to coordinate closely to avoid crashing each other commits as he built the API and I was integrating the components to it.
Managing the theme template was challenging and this app could be improved for sure, but we are proud of what we managed to do together, and hope it will inspire others to do even better in building this kind of apps.