Next.js E-commerce Model

Try it : https://outfit-store-alpha.vercel.app/

Overview

The Next.js E-commerce Model with is a fully functional e-commerce application model built with Next.js, Formik, and several other libraries and technologies. It provides developers with a solid foundation to kickstart the development of their e-commerce projects.

Features

Product Listing and Details:
- Users can browse a catalog of products, view details such as name, price, and description, and navigate to individual product pages.
User Authentication:
- Authentication is implemented using Next-auth, allowing users to sign up, log in, and manage their accounts securely.
- Only authenticated users can access certain features like adding items to the cart and checking out.
Cart Management:
- Users can add products to their cart, update quantities, and remove items as needed.
- Cart information is stored in the browser's cookies using JS-cookie, ensuring persistence across sessions.
Checkout Process:
- A streamlined checkout process is implemented, allowing users to review their cart, enter shipping and payment information, and place orders.
- Formik is used for form management, providing a simple and intuitive way to handle form validation and submission.
Real-time Feedback with Toastify:
- Toastify is integrated to provide real-time feedback to users, such as success messages after adding items to the cart or error messages during the checkout process.
UI Enhancements with React-icons:
- React-icons are used to enhance the user interface with a variety of iconography, improving visual appeal and usability.
Data Validation with Yup:
- Yup is employed for client-side data validation, ensuring that user input is accurate and meets specified criteria before submission.
Backend Integration with Mongoose and Axios:
- Mongoose is used to model and interact with the MongoDB database, handling tasks such as storing product data, user profiles, and orders.
- Axios facilitates communication with external APIs or backend services, allowing seamless integration with payment gateways or shipping providers.

Usage

Development Environment Setup:
- Clone the repository and install dependencies using npm or yarn.
- Configure environment variables for Next-auth, MongoDB connection, and any other required services.
Customization and Extension:
- Customize the UI components, styles, and functionality to match the specific requirements of your e-commerce project.
- Extend the model by adding features like product reviews, wishlists, or promotional banners.
Testing and Deployment:
- Test the application thoroughly to ensure functionality and performance.
- Deploy the application to your preferred hosting platform, configuring deployment settings as necessary.

Services Used

Github
Vercel
Mongo DB Atlas
PayPal
Cloudinary

Getting started

Dependency
- Formik
- JS-cookie
- Typescript
- Toastfy
- React-icons
- YUP
- Mongoose
- Next-auth
- Axios
To install the dependencies.

  $ npm install

To run the project.

  $ npm run dev

To seed on data base

import Product from "@/models/Product";
import User from "@/models/User";
import data from "@/utils/data";
import db from "../../utils/db"

const handler = async (req:any, res:any) => {
  await db.connect();
  await User.deleteMany();
  await User.insertMany(data.users);
  await Product.deleteMany();
  await Product.insertMany(data.products);
  await db.disconnect();
  res.send({message: 'seeded successfully'})

};
export default handler;

Conclusion

The Next.js E-commerce Model with Formik offers a comprehensive and scalable solution for building e-commerce applications. With its robust authentication, cart management, checkout process, and integration with various libraries and technologies, it provides developers with a solid foundation to create feature-rich and user-friendly online stores.

Versioning

2.0.0.0

Authors

@jvmhonorato

Please follow github and join us! Thanks to visiting me and good coding!

jvmhonorato/next.js-ecommerce