Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/RicardoGEsteves/next-digital-marketplace

Digital marketplace it's a next.js full stack application (e-commerce platform). Digital Marketplace is a sophisticated full-stack e-commerce platform designed to deliver a seamless shopping experience for users. It incorporates cutting-edge technologies and frameworks to ensure robustness, efficiency, and scalability.
https://github.com/RicardoGEsteves/next-digital-marketplace

express mongodb nextjs nodemailer payload react react-email react-hook-form react-query resend shadcn-ui sonner stripe swiper tailwindcss trpc typescript zod zustand

Last synced: about 1 month ago
JSON representation

Digital marketplace it's a next.js full stack application (e-commerce platform). Digital Marketplace is a sophisticated full-stack e-commerce platform designed to deliver a seamless shopping experience for users. It incorporates cutting-edge technologies and frameworks to ensure robustness, efficiency, and scalability.

Awesome Lists containing this project

README

        

# Digital Marketplace

> **(UPDATE)** - with the latest dependencies updates, you will have to do some small config changes.

Digital Marketplace is a sophisticated full-stack e-commerce platform designed to deliver a seamless shopping experience for users. It incorporates cutting-edge technologies and frameworks to ensure robustness, efficiency, and scalability.

## Overview

This platform serves as a comprehensive digital marketplace, leveraging modern technologies to provide a rich user experience. From frontend to backend, it harnesses the power of Next.js, React, TypeScript, Tailwind CSS, and a myriad of other tools to offer a smooth e-commerce solution.

### Tech Stack

`Next 14, React, Typescript, Tailwind, React-query, MongoDB, Express, Payload CMS, Trpc, Stripe, Zod, Zustand, React-hook-forms, Shadcn-ui, Lucide-react, React-email, Nodemailer, Resend, Sonner, Swiper`

## Key Features

- **Robust and Scalable Architecture:** Next 14, React, and Typescript form the backbone of the application, ensuring exceptional performance and scalability.

- **Tailwind CSS for Responsive Design:** Tailwind CSS is employed for rapid and consistent styling across the platform, adapting seamlessly to various screen sizes.

- **React-Query for Data Fetching and Caching:** React-query manages data fetching and caching efficiently, providing a smooth user experience even with large datasets.

- **MongoDB for Data Storage:** MongoDB serves as the database backend, handling the storage and retrieval of e-commerce data with flexibility and efficiency.

- **Express for API Development:** Express is utilized for developing secure and performant API endpoints, enabling seamless communication between the frontend and backend.

- **Payload CMS for Content Management:** Payload CMS provides a user-friendly content management system for merchants to manage their products, categories, and other content.

- **Trpc for API Gateway:** Trpc acts as an API gateway, handling authentication, authorization, and routing requests to the appropriate microservices.

- **Stripe for Payment Processing:** Stripe facilitates secure and seamless payment processing, ensuring a fraud-free and user-friendly payment experience.

- **Zod for Data Validation:** Zod enforces strict data validation rules, ensuring data integrity and preventing errors during data processing.

- **Zustand for State Management:** Zustand handles state management across the application, ensuring data consistency and reactivity.

- **React-hook-forms for Form Handling:** React-hook-forms simplifies form handling and validation, making it easy to build user-friendly forms.

- **Shadcn-ui for Custom Components:** Shadcn-ui provides a collection of custom React components for enhancing the application's UI and UX.

- **Lucide-react for Charts and Visualizations:** Lucide-react enables the creation of interactive and data-driven charts, providing merchants with valuable insights into their sales performance.

- **React-email for Email Notifications:** React-email facilitates the sending of email notifications to customers and merchants, enhancing communication and user engagement.

- **Nodemailer for Email Sending:** Nodemailer is integrated with React-email for sending emails through various email providers.

- **Resend for Resend Mechanism:** Resend provides a convenient mechanism for resending emails that failed to deliver due to technical issues.

- **Sonner for Date and Time Manipulation:** Sonner simplifies date and time manipulations, ensuring accurate and consistent date-related operations.

- **Swiper for Product Carousels:** Swiper facilitates the creation of engaging and responsive product carousels, enhancing the product discovery experience.

## Installation

1. Clone the repository.
2. Navigate to the project directory.
3. Install dependencies using `npm install`.
4. Set up MongoDB and configure the necessary environment variables.
5. Start the application with `npm run dev`.

## Environment Variables

Create an .env or .env.local to store your keys:

```bash
NEXT_PUBLIC_SERVER_URL= your localhost
PAYLOAD_SECRET= your payload key
MONGODB_URL= your key
STRIPE_SECRET_KEY= stripe key
STRIPE_WEBHOOK_SECRET= webhook key
STRIPE_PRODUCT_KEY= product key
RESEND_API_KEY= resend key
EMAIL= your email from address
```

## To manage your payload data

localhost/sell for admin cms access | or other route that you define.

## Usage

1. Access the application via the provided URL.
2. Explore the digital marketplace, browse products, and enjoy a seamless shopping experience.
3. Utilize the various features such as secure payments, content management, and user-friendly interfaces.

### Development Process

The development of Digital Marketplace adhered to rigorous software development principles, including **clean code**, **type safety**, **optimization**. These practices ensured the application's code quality, maintainability, and ability to adapt to evolving requirements.

### Conclusion

Digital Marketplace stands as a testament to the power of modern technologies and development methodologies in crafting a robust and feature-rich e-commerce platform. With its seamless integration of React, Typescript, Tailwind, and a comprehensive suite of backend services, this platform empowers merchants to establish a successful online presence and cater to the needs of their customers.

## Contributions

Contributions are welcome!

## License

This project is licensed under the [MIT License](LICENSE).