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: 26 days 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).