An complete e-commerce web application using Next.js and MongoDB, designed with simplicity for learning and real-world applicability in mind.
See an LIVE EXAMPLE! ✨
This project uses only Typescript
This project uses the following dependencies:
next.js- v9.3 or above required for API Routes and data fetching method.react- v16.8 or above required for react hooks.react-dom- v16.8 or above.stripe- to process payments.mongodbandmongoose- for database.chakra-uiandstyled-components- for styling.formikandyup- for forms and validation.swr- for state management.
The environment variables will be configured during build time
Environmental variables in this project:
MONGODB_URIYour MongoDB connection string (with credentials).MONGODB_DBName of your database.NEXTAUTH_URLURL of your application, for authentication and callback.AUTH0_CLIENT_IDClient ID received from Auth0, you can get one hereAUTH0_CLIENT_SECRET(only if you useexpress-session) The secret to be used inexpress-session.AUTH0_DOMAIN(optional, Cloudinary only) Cloudinary environment variable for configuration. See this.
Start the development server by running yarn dev or npm run dev. The project supports using .env. Start by creating a .env or .env.local file with the above variables.
I include my own environment variables in .env.example for experimentation purposes. Please replace them with your owns. You can try them in development by renaming it into .env.
In production, it is recommended to set the environment variables using the options provided by your cloud/hosting providers. Do not commit .env.
This project can be deployed with Vercel or anywhere Next.js can be deployed. Make sure to set the environment variables using the options provided by your hosting providers.
After building using npm run build, simply start the server using npm run start.
You can also deploy this with serverless providers given the correct setup.