{"id":29092147,"url":"https://github.com/arnobt78/embedded-feedback-widget--nextjs","last_synced_at":"2025-06-28T07:03:38.369Z","repository":{"id":300241522,"uuid":"1005638873","full_name":"arnobt78/Embedded-Feedback-Widget--NextJS","owner":"arnobt78","description":"Feedback Widget Next is a reusable, embeddable feedback widget for modern web projects. Users can submit feedback (name, email, message, rating), which is stored in a MongoDB database via Prisma. The widget is designed for easy integration, customization, and educational purposes.","archived":false,"fork":false,"pushed_at":"2025-06-27T18:26:08.000Z","size":237,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-06-27T19:36:24.783Z","etag":null,"topics":["app-router-nextjs","feedback","feedback-collection","integrated-app","javascript","nextjs","postcss","prisma","prisma-client","prisma-orm","react-functional-components","resuable-feedback-widget","reusable-widget","shadcn","tailwindcss","typescript","vercel-deployment","widget","widget-embedding"],"latest_commit_sha":null,"homepage":"https://widget-feedback-next.vercel.app/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/arnobt78.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-06-20T14:54:39.000Z","updated_at":"2025-06-27T18:26:11.000Z","dependencies_parsed_at":"2025-06-27T19:47:23.754Z","dependency_job_id":null,"html_url":"https://github.com/arnobt78/Embedded-Feedback-Widget--NextJS","commit_stats":null,"previous_names":["arnobt78/nexx-widget-next","arnobt78/feedback-widget--nextjs","arnobt78/embedded-feedback-widget--nextjs"],"tags_count":0,"template":true,"template_full_name":null,"purl":"pkg:github/arnobt78/Embedded-Feedback-Widget--NextJS","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arnobt78%2FEmbedded-Feedback-Widget--NextJS","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arnobt78%2FEmbedded-Feedback-Widget--NextJS/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arnobt78%2FEmbedded-Feedback-Widget--NextJS/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arnobt78%2FEmbedded-Feedback-Widget--NextJS/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/arnobt78","download_url":"https://codeload.github.com/arnobt78/Embedded-Feedback-Widget--NextJS/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arnobt78%2FEmbedded-Feedback-Widget--NextJS/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":262389457,"owners_count":23303341,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["app-router-nextjs","feedback","feedback-collection","integrated-app","javascript","nextjs","postcss","prisma","prisma-client","prisma-orm","react-functional-components","resuable-feedback-widget","reusable-widget","shadcn","tailwindcss","typescript","vercel-deployment","widget","widget-embedding"],"created_at":"2025-06-28T07:02:47.411Z","updated_at":"2025-06-28T07:03:38.364Z","avatar_url":"https://github.com/arnobt78.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 🧩 Embedded Feedback Widget (Reusable) – Next.js\n\n\u003cimg width=\"700\" alt=\"Screenshot 2025-06-24 at 00 39 22\" src=\"https://github.com/user-attachments/assets/26adec5e-1b6a-4fd7-ba36-ef77e8997920\" /\u003e \u003cimg width=\"700\" alt=\"Screenshot 2025-06-24 at 00 32 52\" src=\"https://github.com/user-attachments/assets/fbae9823-52ee-47cf-aa7b-6aa006453a07\" /\u003e \u003cimg width=\"700\" alt=\"Screenshot 2025-06-24 at 00 39 05\" src=\"https://github.com/user-attachments/assets/ad5163c6-0401-4d1b-812c-0cf1c6119a5a\" /\u003e\n\n---\n\nA modern, reusable full-stack feedback widget built with Next.js, React, Tailwind CSS, and Prisma (MongoDB). Easily embed this widget into any project to collect user feedback — view and manage submissions across platforms via a connected CRM or shared feedback table.\n\n## Live Demo \u0026 Integration\n\n- **Live Widget:** [https://widget-feedback-next.vercel.app/](https://widget-feedback-next.vercel.app/)\n- **Integrated Example:** [https://marketing-arnob.netlify.app/](https://marketing-arnob.netlify.app/)\n- **Integration Repo:** [Marketing--TailwindCSS-Fundamental-Project-2](https://github.com/arnobt78/Marketing--TailwindCSS-Fundamental-Project-2)\n\n---\n\n## Table of Contents\n\n1. [Project Summary](#project-summary)\n2. [Features](#features)\n3. [Screenshots](#screenshots)\n4. [Live Demo \u0026 Integration](#live-demo--integration)\n5. [Project Structure](#project-structure)\n6. [Technology Stack](#technology-stack)\n7. [Prerequisites](#prerequisites)\n8. [Installation](#installation)\n9. [Environment Variables](#environment-variables)\n10. [Database Setup](#database-setup)\n11. [Usage Instructions](#usage-instructions)\n12. [Widget Integration](#widget-integration)\n13. [Development \u0026 Customization](#development--customization)\n14. [ESLint \u0026 Tailwind CSS Configuration](#eslint--tailwind-css-configuration)\n15. [React Testing](#react-testing)\n16. [Keywords \u0026 Topics](#keywords--topics)\n17. [Learn More](#learn-more)\n18. [About](#about)\n19. [Conclusion](#conclusion)\n\n---\n\n## Project Summary\n\nFeedback Widget Next is a reusable, embeddable feedback widget for modern web projects. Users can submit feedback (name, email, message, rating), which is stored in a MongoDB database via Prisma. The widget is designed for easy integration, customization, and educational purposes.\n\n---\n\n## Features\n\n- **Reusable Widget Component**: Easily add, customize, and extend widgets.\n- **API Route Example**: Feedback API route for backend integration.\n- **Prisma ORM**: Type-safe database access and schema management (MongoDB or PostgreSQL).\n- **Tailwind CSS**: Utility-first, responsive styling.\n- **UI Component Library**: Modular, reusable UI components (Button, Card, Input, etc.).\n- **TypeScript \u0026 JavaScript**: Mixed usage for flexibility and gradual migration.\n- **Ready for Testing**: Easily add React tests (see below for test instructions).\n- **Widget Embedding**: Can be built and embedded in other projects as a UMD bundle.\n- **Vercel Deployment**: Fast, global delivery with serverless functions.\n\n---\n\n## Technology Stack\n\n- **Next.js** (App Router)\n- **React** (Functional Components)\n- **Tailwind CSS** (Styling)\n- **Prisma** (ORM for MongoDB or PostgreSQL)\n- **TypeScript \u0026 JavaScript**\n- **PostCSS**\n- **ESLint**\n\n---\n\n## Project Structure\n\n```bash\nfeedback-widget-next/\n├── components.json\n├── eslint.config.mjs\n├── next-env.d.ts\n├── next.config.ts\n├── package.json\n├── postcss.config.js\n├── tailwind.config.js\n├── tsconfig.json\n├── prisma/\n│   └── schema.prisma\n├── public/\n│   └── *.svg, widget.umd.js, ...\n├── src/\n│   ├── app/\n│   │   ├── favicon.ico\n│   │   ├── globals.css\n│   │   ├── layout.tsx\n│   │   ├── page.jsx\n│   │   ├── page.module.css\n│   │   └── api/\n│   │       └── feedback/route.js\n│   ├── components/\n│   │   ├── Widget.jsx\n│   │   └── ui/\n│   │       ├── button.jsx, button.tsx\n│   │       ├── card.tsx\n│   │       ├── input.jsx, input.tsx\n│   │       ├── label.jsx, label.tsx\n│   │       ├── popover.jsx, popover.tsx\n│   │       ├── separator.jsx\n│   │       ├── textarea.jsx, textarea.tsx\n│   └── lib/\n│       ├── prisma.js\n│       ├── utils.js, utils.ts\n```\n\n---\n\n## Getting Started\n\n### 1. Clone the repository\n\n```bash\ngit clone \u003cyour-repo-url\u003e\ncd feedback-widget-next\n```\n\n### 2. Install dependencies\n\n```bash\nnpm install\n# or\nyarn install\n# or\npnpm install\n# or\nbun install\n```\n\n---\n\n## Environment Variables\n\nCreate a `.env` file in the root directory and add the following (example for MongoDB):\n\n```sh\nDATABASE_URL=\"mongodb+srv://USER:PASSWORD@CLUSTER.mongodb.net/DATABASE?retryWrites=true\u0026w=majority\"\n```\n\n---\n\n## Database Setup\n\n1. **Edit your Prisma schema (`prisma/schema.prisma`) as needed.**\n2. **Push your schema to the database:**\n\n```bash\nnpx prisma generate\nnpx prisma db push\n```\n\n---\n\n## Usage Instructions\n\n### Running the Development Server\n\n```bash\nnpm run dev\n# or\nyarn dev\n# or\npnpm dev\n# or\nbun dev\n```\n\nVisit [http://localhost:3000](http://localhost:3000) in your browser.\n\n### Building the Widget UMD Bundle\n\n```bash\nnpm run build:widget\n```\n\nThis will output `widget.umd.js` in the `public/` directory, ready for embedding.\n\n---\n\n## Widget Integration Guide\n\nYou can embed the feedback widget into any HTML page (including other projects) with just a few lines:\n\n```html\n\u003c!-- Load React and ReactDOM UMD builds for the widget --\u003e\n\u003cscript src=\"https://unpkg.com/react@18/umd/react.production.min.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"https://unpkg.com/react-dom@18/umd/react-dom.production.min.js\"\u003e\u003c/script\u003e\n\u003c!-- Include the widget script from your Vercel deployment --\u003e\n\u003cscript src=\"https://widget-feedback-next.vercel.app/widget.umd.js\"\u003e\u003c/script\u003e\n\u003cmy-widget\n  api-base=\"https://widget-feedback-next.vercel.app/api/feedback\"\n\u003e\u003c/my-widget\u003e\n```\n\n- The `api-base` attribute should point to your deployed Next.js API endpoint.\n- The widget will automatically inject its styles and handle feedback submission.\n\n**To integrate into your own project:**\n\n1. Deploy this project to Vercel.\n2. Copy the script and `\u003cmy-widget\u003e` tag above into your HTML.\n3. Optionally, style or position the widget as needed.\n\n---\n\n## Development \u0026 Customization\n\n- **Add new UI components** in `src/components/ui/`.\n- **Update database schema** in `prisma/schema.prisma` and run `npx prisma db push`.\n- **Customize Tailwind** in `tailwind.config.js`.\n- **Utility functions** in `src/lib/utils.js` and `src/lib/utils.ts`.\n\n---\n\n## ESLint \u0026 Tailwind CSS Configuration\n\n- **ESLint:** See `eslint.config.mjs` for linting rules. Example:\n\n```js\nimport { dirname } from \"path\";\nimport { fileURLToPath } from \"url\";\nimport { FlatCompat } from \"@eslint/eslintrc\";\n\nconst __filename = fileURLToPath(import.meta.url);\nconst __dirname = dirname(__filename);\n\nconst compat = new FlatCompat({\n  baseDirectory: __dirname,\n});\n\nconst eslintConfig = [\n  ...compat.extends(\"next/core-web-vitals\", \"next/typescript\"),\n];\n\nexport default eslintConfig;\n```\n\n- **Tailwind CSS:** See `tailwind.config.js` for theme and content settings. Example:\n\n```js\nmodule.exports = {\n  darkMode: [\"class\"],\n  content: [\n    \"./pages/**/*.{js,jsx}\",\n    \"./components/**/*.{js,jsx}\",\n    \"./app/**/*.{js,jsx}\",\n    \"./src/**/*.{js,jsx}\",\n  ],\n  theme: {\n    extend: {\n      // ...custom colors, borderRadius, keyframes, etc.\n    },\n  },\n  plugins: [require(\"tailwindcss-animate\")],\n};\n```\n\n---\n\n## React Testing\n\nThis project is ready for adding React tests. To add tests:\n\n1. Install a test runner (e.g., Jest, React Testing Library):\n\n   ```bash\n   npm install --save-dev jest @testing-library/react @testing-library/jest-dom\n   ```\n\n2. Add test files alongside your components, e.g., `Widget.test.jsx`.\n3. Run tests with:\n\n   ```bash\n   npm test\n   # or\n   yarn test\n   ```\n\n4. For more, see [React Testing Library Docs](https://testing-library.com/docs/react-testing-library/intro/).\n\n---\n\n## Keywords \u0026 Topics\n\nwidget, reactjs, feedback, mongodb, feedback-form, widget-manager, tailwindcss, feedback-collector, feedback-widget, easy-integration, nextjs, prisma, fullstack, typescript, component-library, api, vercel, modern-web, boilerplate, teaching, example\n\n---\n\n## Learn More\n\n- [Next.js Documentation](https://nextjs.org/docs)\n- [Learn Next.js](https://nextjs.org/learn)\n- [Next.js GitHub Repository](https://github.com/vercel/next.js)\n- [Prisma Documentation](https://www.prisma.io/docs/)\n- [Tailwind CSS Documentation](https://tailwindcss.com/docs)\n- [React Testing Library](https://testing-library.com/docs/react-testing-library/intro/)\n\n---\n\n## About\n\nThis project is designed as a teaching and demonstration tool for modern React, Next.js, and TailwindCSS workflows, with a focus on real-world integration patterns and best practices. It is ideal for learning, rapid prototyping, and production use.\n\n---\n\n## Conclusion\n\nFeedback Widget Next provides a robust starting point for building embeddable widgets and APIs for modern web projects. The modular approach allows for easy integration and extension, making it ideal for both learning and production use.\n\n---\n\nIf you have questions or want to contribute, feel free to open an issue or pull request!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Farnobt78%2Fembedded-feedback-widget--nextjs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Farnobt78%2Fembedded-feedback-widget--nextjs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Farnobt78%2Fembedded-feedback-widget--nextjs/lists"}