{"id":16772522,"url":"https://github.com/pranav-kural/plamatio-frontend","last_synced_at":"2026-02-10T21:32:20.509Z","repository":{"id":255737802,"uuid":"847942723","full_name":"pranav-kural/plamatio-frontend","owner":"pranav-kural","description":"Production-quality web-based e-commerce frontend built with Next.js, Redux, TypeScript, Clerk, Stripe, and more.","archived":false,"fork":false,"pushed_at":"2024-09-25T22:07:17.000Z","size":816,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-09-05T02:37:12.943Z","etag":null,"topics":["crud","ecommerce","nextjs","react","redux","rtk-query","tailwindcss","typescript"],"latest_commit_sha":null,"homepage":"https://plamatio.pkural.ca","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/pranav-kural.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","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-08-26T20:54:05.000Z","updated_at":"2024-09-25T22:07:20.000Z","dependencies_parsed_at":"2025-07-13T22:32:48.273Z","dependency_job_id":"756432d9-b1c3-4ae1-97f7-f81bef1837dc","html_url":"https://github.com/pranav-kural/plamatio-frontend","commit_stats":null,"previous_names":["pranav-kural/plamatio-frontend"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/pranav-kural/plamatio-frontend","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pranav-kural%2Fplamatio-frontend","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pranav-kural%2Fplamatio-frontend/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pranav-kural%2Fplamatio-frontend/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pranav-kural%2Fplamatio-frontend/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/pranav-kural","download_url":"https://codeload.github.com/pranav-kural/plamatio-frontend/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pranav-kural%2Fplamatio-frontend/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29317956,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-10T20:44:44.282Z","status":"ssl_error","status_checked_at":"2026-02-10T20:44:43.393Z","response_time":65,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"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":["crud","ecommerce","nextjs","react","redux","rtk-query","tailwindcss","typescript"],"created_at":"2024-10-13T06:43:03.951Z","updated_at":"2026-02-10T21:32:20.468Z","avatar_url":"https://github.com/pranav-kural.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Plamatio Frontend\n\nThis project demonstrates a production-quality intuitive and responsive web frontend for an e-commerce store.\n\nThis project also serves as one of the frontends for the [Plamatio Backend](https://github.com/pranav-kural/plamatio-backend), which is a highly performant, scalable, and resilient distributed backend built using Go-lang and PostgreSQL.\n\nTo learn more about Plamatio frontend, backend, and data streaming pipeline, check the blog post on [Introduction to Plamatio](http://www.pkural.ca/blog/posts/plamatio-intro/).\n\n| Environment | Deployment Status                                                                                                  | URL                                  | Branch                                                                    |\n| ----------- | ------------------------------------------------------------------------------------------------------------------ | ------------------------------------ | ------------------------------------------------------------------------- |\n| Preview     | \u003cimg src=\"https://img.shields.io/github/deployments/pranav-kural/plamatio-frontend/preview?label=preview\"/\u003e        | https://plamatio-frontend.vercel.app | [`preview`](https://github.com/pranav-kural/plamatio-frontend/tree/stage) |\n| Production  | \u003cimg src=\"https://img.shields.io/github/deployments/pranav-kural/plamatio-frontend/production?label=production\" /\u003e | https://plamatio.pkural.ca           | [`main`](https://github.com/pranav-kural/plamatio-frontend/tree/main)     |\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://github.com/user-attachments/assets/fdd5e7f2-3234-4c79-be7c-0d345d4bdac7\" alt=\"Plamatio home page\" /\u003e\n\u003c/p\u003e\n\n\n## Key Features\n\n- **Next.js:** Built with Next.js, a React framework that enables server-side rendering and static site generation for faster content loading and improved SEO.\n- **Redux / RTK-Query:** Uses Redux and RTK Query for efficient side effects and state management. Reduces latency in page loads and calls made to backend API for data fetching with optimal data caching with strategic invalidation.\n- **TypeScript:** Written in TypeScript, providing static type checking to catch errors early and improve code quality and maintainability.\n- **Tailwind CSS:** Utilizes Tailwind CSS for styling, allowing for rapid UI development with a utility-first approach and ensuring a consistent design system.\n- **Event data streaming:** Streams user events to a Kafka pipeline, enabling real-time analytics and monitoring of user interactions.\n- **Real-time cross-platform updates:** Listens to specific Kafka topics for updates to core components like cart and orders, ensuring real-time synchronization across different platforms.\n- **Component-based development:** Follows a component-based architecture, promoting reusability, maintainability, and scalability of UI components.\n- **Clerk:** Using Clerk for user authentication. A duplicate entry exists in the Plamatio backend for each user with user's data. This is done to reduce vendor dependency and to ensure referential integrity of data on the backend side.\n- **Stripe:** Integrates with Stripe for payment handling. Plamatio frontend primarily uses the Stripe's JS SDK and Embedded Form, with price IDs setup in Stripe.\n\nPlamatio is a brand focused on Llama-inspired products. However, the Plamatio Frontend and Plamatio Backend projects are very loosely coupled with the Plamatio e-commerce data.\n\nIt is possible to completely switch the products data, branding data, company name, product categories, product subcategories, etc. The intention behind building this project was not to develop a frontend specifically for Plamatio brand, but instead, focuses on displaying a production-quality e-commerce frontend that is not only snappy and visually pleasing but is also capable of handling side effects, data mutations, state changes efficiently, while streaming \u0026 listening for real-time data and user events (Kafka).\n\n## Overall Architecture\n\nThe image below displays a simplified view of the overall architecture and the components involves in the functioning of the Plamatio Frontend.\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://github.com/user-attachments/assets/f6142f7a-0be5-4abc-9826-0cf38818387c\" alt=\"Plamatio frontend overall architecture\" width=\"800px\" /\u003e\n\u003c/p\u003e\n\n## Developing Locally\n\nPlease follow the steps below to get started with developing or testing Plamatio Frontend on your own local machine.\n\n### Clone the Repository\n\n```bash\ngit clone https://github.com/pranav-kural/plamatio-frontend.git\n```\n\n### Setup Environment Variables - Integrations\n\nPlamatio frontend directly relies on three main external integrations:\n\n- **Plamatio Backend:** For anything to do with any sort of data (example: products, categories, user orders, user cart items, etc.).\n- **Clerk:** For user authentication. A duplicate entry exists in the Plamatio backend for each user with user's data. This is done to reduce vendor dependency and to ensure referential integrity of data on the backend side.\n- **Stripe:** For payment handling. Plamatio frontend primarily uses the Stripe's JS SDK and Embedded Form.\n\nAdd API keys and other required environment variables in `.env.local` file (or you can create separate `.env.development` and `.env.production` files).\n\n```bash\n# Plamatio Backend\nNEXT_PUBLIC_PLAMATIO_BACKEND_API_URL=\nNEXT_PUBLIC_PLAMATIO_BACKEND_API_KEY=\n\n# Clerk\nNEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=\nCLERK_SECRET_KEY=\nNEXT_PUBLIC_CLERK_SIGN_IN_URL=/auth/sign-in\nNEXT_PUBLIC_CLERK_SIGN_UP_URL=/auth/sign-up\n\n# Stripe\nNEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=\nSTRIPE_SECRET_KEY=\n\n# Set this environment variable to support webhooks\n# STRIPE_WEBHOOK_SECRET=\n```\n\n### Getting Started\n\nFirst, run the development server:\n\n```bash\nnpm run dev\n# or\nyarn dev\n# or\npnpm dev\n# or\nbun dev\n```\n\nOpen [http://localhost:3000](http://localhost:3000) with your browser to see the result.\n\n### Deploy on Vercel\n\nThe easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template\u0026filter=next.js\u0026utm_source=create-next-app\u0026utm_campaign=create-next-app-readme) from the creators of Next.js.\n\nCheck out the [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.\n\n## License\n\nThis project is licensed under the Apache License 2.0 - see the [LICENSE](LICENSE) file for details.\n\n## Issues\n\nIf you encounter any issues or bugs while using Plamatio Frontend, please report them by following these steps:\n\n1. Check if the issue has already been reported by searching our issue tracker.\n2. If the issue hasn't been reported, create a new issue and provide a detailed description of the problem.\n3. Include steps to reproduce the issue and any relevant error messages or screenshots.\n\n[Open Issue](https://github.com/pranav-kural/plamatio-frontend/issues)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpranav-kural%2Fplamatio-frontend","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpranav-kural%2Fplamatio-frontend","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpranav-kural%2Fplamatio-frontend/lists"}