{"id":30667251,"url":"https://github.com/arnobt78/marketing--react-frontend","last_synced_at":"2025-08-31T22:39:08.414Z","repository":{"id":282788179,"uuid":"864869513","full_name":"arnobt78/Marketing--React-Frontend","owner":"arnobt78","description":"Marketing-TailwindCSS-Templet is a Static React-Vite Frontend Landing Page, using React-Vite, TailwindCSS, Framer-Motion, React-Animate, React-Icons, and deployed on Netlify.","archived":false,"fork":false,"pushed_at":"2025-07-01T14:12:24.000Z","size":723,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-08-31T22:39:03.707Z","etag":null,"topics":["animatecss","framer-motion","marketing-landing-page","netlify-deployment","react","react-animate","react-icons","react-vite","reactjs","static-site","tailwindcss"],"latest_commit_sha":null,"homepage":"https://marketing-arnob.netlify.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":"2024-09-29T11:41:53.000Z","updated_at":"2025-07-29T21:04:13.000Z","dependencies_parsed_at":"2025-07-01T15:39:27.219Z","dependency_job_id":null,"html_url":"https://github.com/arnobt78/Marketing--React-Frontend","commit_stats":null,"previous_names":["arnobt78/marketing--tailwindcss-fundamental-project-2","arnobt78/marketing-landing-page--tailwindcss-fundamental-project-2","arnobt78/marketing--react-frontend"],"tags_count":0,"template":true,"template_full_name":null,"purl":"pkg:github/arnobt78/Marketing--React-Frontend","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arnobt78%2FMarketing--React-Frontend","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arnobt78%2FMarketing--React-Frontend/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arnobt78%2FMarketing--React-Frontend/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arnobt78%2FMarketing--React-Frontend/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/arnobt78","download_url":"https://codeload.github.com/arnobt78/Marketing--React-Frontend/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arnobt78%2FMarketing--React-Frontend/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":273051861,"owners_count":25037074,"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","status":"online","status_checked_at":"2025-08-31T02:00:09.071Z","response_time":79,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["animatecss","framer-motion","marketing-landing-page","netlify-deployment","react","react-animate","react-icons","react-vite","reactjs","static-site","tailwindcss"],"created_at":"2025-08-31T22:39:05.649Z","updated_at":"2025-08-31T22:39:08.405Z","avatar_url":"https://github.com/arnobt78.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Marketing Template - TailwindCSS Fundamental Project 2\n\n![Screenshots](https://github.com/user-attachments/assets/b2278b37-2816-4221-bf54-c67b599ae35b)\n\n---\n\nA modern, production-ready, static React landing page template built with Vite, TailwindCSS, and a fully integrated feedback widget powered by Next.js, Prisma, and Vercel. Easily customizable and deployable, this project demonstrates best practices for building, styling, and extending React apps with real-world features.\n\n- **Live Demo:** [https://marketing-arnob.netlify.app](https://marketing-arnob.netlify.app)\n\n- _Note: The feedback widget is integrated from: [Feedback-Widget--NextJS](https://github.com/arnobt78/Feedback-Widget--NextJS)_\n\n---\n\n## Table of Contents\n\n1. [Project Summary](#project-summary)\n2. [Features](#features)\n3. [Technology Stack](#technology-stack)\n4. [Project Structure](#project-structure)\n5. [Getting Started](#getting-started)\n6. [Widget Integration Guide](#widget-integration-guide)\n7. [Development Scripts](#development-scripts)\n8. [React Testing](#react-testing)\n9. [Keywords \u0026 Topics](#keywords--topics)\n10. [Learn More](#learn-more)\n11. [About](#about)\n12. [Conclusion](#conclusion)\n\n---\n\n## Project Summary\n\nThis project is a static marketing landing page built with React, Vite, and TailwindCSS, featuring a real-time feedback widget. The widget is a standalone, reusable component that can be embedded in any site and submits feedback to a Next.js API (deployed on Vercel). The dashboard displays all feedback in real time.\n\n---\n\n## Features\n\n- ⚡ **Fast \u0026 Modern**: Built with Vite and React 18.\n- 🎨 **Beautiful UI**: Styled with TailwindCSS and custom design tokens.\n- 📝 **Feedback Widget**: Collects user feedback, star ratings, and displays them in a dashboard.\n- 🔌 **Easy Integration**: Widget can be embedded in any HTML page with a single script tag.\n- 🌐 **API-Driven**: Feedback is stored and retrieved from a Next.js API (Vercel).\n- 🧪 **Ready for Testing**: Easily add React tests (see below for test instructions).\n- 🚀 **Deployed on Netlify**: Static frontend, instant global delivery.\n\n---\n\n## Technology Stack\n\n- **Frontend**: React, Vite, TailwindCSS, Framer Motion, React Animate, React Icons\n- **Widget**: React, TailwindCSS, Next.js API, Prisma, Vercel\n- **Backend**: Next.js API routes (Vercel), Prisma ORM, (optionally MongoDB/Postgres)\n- **Deployment**: Netlify (frontend), Vercel (widget/API)\n- **Testing**: Jest, React Testing Library (see below)\n\n---\n\n## Project Structure\n\n```bash\nmarketing-tailwind/\n├── public/\n│   └── vite.svg\n├── src/\n│   ├── App.jsx\n│   ├── index.css\n│   ├── main.jsx\n│   ├── assets/\n│   ├── components/\n│   │   ├── Banner/\n│   │   ├── Cards/\n│   │   ├── Dashboard/\n│   │   │   └── FeedbackDashboard.jsx\n│   │   ├── Email/\n│   │   ├── Hero/\n│   │   ├── Navbar/\n│   │   ├── Services/\n│   └── utility/\n├── index.html\n├── package.json\n├── tailwind.config.js\n├── postcss.config.js\n└── README.md\n```\n\n---\n\n## Getting Started\n\n### 1. Install Dependencies\n\n```bash\nnpm install\n```\n\n### 2. Start the Development Server\n\n```bash\nnpm run dev\n```\n\nVisit [http://localhost:5173/](http://localhost:5173/) in your browser.\n\n### 3. Build for Production\n\n```bash\nnpm run build\n```\n\n### 4. Deploy\n\n- **Frontend**: Deploy the `marketing-tailwind` folder to Netlify.\n- **Widget/API**: Deploy the feedback widget project to Vercel.\n\n---\n\n## Widget Integration Guide\n\nYou can embed the feedback widget into any HTML page (including this project) 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 the widget 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 Scripts\n\n- `npm run dev` – Start local dev server\n- `npm run build` – Build for production\n- `npm run preview` – Preview production build\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, Vite, and TailwindCSS workflows, with a focus on real-world integration patterns and best practices.\n\n---\n\n## Conclusion\n\nThis template provides a robust starting point for any marketing or landing page project, with a fully functional feedback system that can be reused across multiple sites. The modular widget 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%2Fmarketing--react-frontend","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Farnobt78%2Fmarketing--react-frontend","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Farnobt78%2Fmarketing--react-frontend/lists"}