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.

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:

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.

next-digital-marketplace's Issues

Fix code scanning alert - Exception text reinterpreted as HTML

Tracking issue for:

• https://github.com/RicardoGEsteves/next-digital-marketplace/security/code-scanning/2

Stripe Webhook Endpoint

So what's the Stripe webhook URL even supposed to be?

Refactor and update project to latest versions

• Update configs and setup for latest versions
• Refactor and update project to latest versions

Dependency Dashboard

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Pending Approval

These branches will be created by Renovate only once you click their checkbox below.

• chore(deps): update dependency cliui to v8
• chore(deps): update dependency eslint to v9
• 🔐 Create all pending approval PRs at once 🔐

Awaiting Schedule

These updates are awaiting their schedule. Click on a checkbox to get an update now.

• fix(deps): update all non-major dependencies (@payloadcms/db-mongodb, @swc-node/register, @tanstack/react-query, @tanstack/react-query-devtools, @trpc/client, @trpc/next, @trpc/react-query, @trpc/server, @types/node, eslint, payload, swiper, tailwindcss)

Detected dependencies

npm

package.json

• @hookform/resolvers 3.9.0
• @payloadcms/bundler-webpack 1.0.7
• @payloadcms/db-mongodb 1.5.2
• @payloadcms/richtext-slate 1.5.2
• @radix-ui/react-dialog 1.1.1
• @radix-ui/react-dropdown-menu 2.1.1
• @radix-ui/react-label 2.1.0
• @radix-ui/react-scroll-area 1.1.0
• @radix-ui/react-separator 1.1.0
• @radix-ui/react-slot 1.1.0
• @react-email/components 0.0.21
• @swc-node/register 1.10.7
• @tanstack/react-query 5.51.1
• @tanstack/react-query-devtools 5.51.1
• @trpc/client 11.0.0-rc.421
• @trpc/next 11.0.0-rc.421
• @trpc/react-query 11.0.0-rc.421
• @trpc/server 11.0.0-rc.421
• body-parser 1.20.2
• class-variance-authority 0.7.0
• clsx 2.1.1
• cross-env 7.0.3
• date-fns 3.6.0
• dotenv 16.4.5
• express 4.19.2
• lucide-react 0.408.0
• next 14.2.5
• nodemailer 6.9.14
• payload 2.23.1
• react 18
• react-dom 18
• react-hook-form 7.52.1
• resend 3.4.0
• sonner 1.5.0
• stripe 16.2.0
• swiper 11.1.4
• tailwind-merge 2.4.0
• tailwindcss-animate 1.0.7
• zod 3.23.8
• zustand 4.5.4
• @types/express 4.17.21
• @types/node 20.14.10
• @types/nodemailer 6.4.15
• @types/react 18.3.3
• @types/react-dom 18.3.0
• autoprefixer 10.4.19
• copyfiles 2.4.1
• eslint ^8.57.0
• eslint-config-next 14.2.5
• nodemon 3.1.4
• postcss 8.4.39
• tailwindcss 3.4.4
• ts-node 10.9.2
• typescript 5.5.3
• cliui 8.0.1

---

• Check this box to trigger a request for Renovate to run again on this repository

Fix code scanning alert - Exception text reinterpreted as HTML

Tracking issue for:

• https://github.com/RicardoGEsteves/next-digital-marketplace/security/code-scanning/3

Fix code scanning alert - Exception text reinterpreted as HTML

Tracking issue for:

• https://github.com/RicardoGEsteves/next-digital-marketplace/security/code-scanning/1

nodemailer ReDoS when trying to send a specially crafted email

Package nodemailer(npm)

Affected versions <= 6.9.8
Patched version 6.9.9

Summary
A ReDoS vulnerability occurs when nodemailer tries to parse img files with the parameter attachDataUrls set, causing the stuck of event loop.
Another flaw was found when nodemailer tries to parse an attachments with a embedded file, causing the stuck of event loop.

Details
Regex: /^data:((?:[^;];)(?:[^,])),(.)$/

Path: compile -> getAttachments -> _processDataUrl

Regex: /(<img\b[^>]* src\s*=[\s"']*)(data:([^;]+);[^"'>\s]+)/

Path: _convertDataImages

PoC
https://gist.github.com/francoatmega/890dd5053375333e40c6fdbcc8c58df6
https://gist.github.com/francoatmega/9aab042b0b24968d7b7039818e8b2698

Impact
ReDoS causes the event loop to stuck a specially crafted evil email can cause this problem.