{"id":30103487,"url":"https://github.com/paishanmadusha/pern-stack-product-store","last_synced_at":"2026-04-08T20:45:08.906Z","repository":{"id":302469783,"uuid":"1006091886","full_name":"PAIshanMadusha/pern-stack-product-store","owner":"PAIshanMadusha","description":"Product Store is a fullstack web application built using the PERN Stack. It allows users to add, view, edit, and delete product entries with features like theme toggling (light/dark), bot protection, rate limiting, and smooth UI using Tailwind + daisyUI.","archived":false,"fork":false,"pushed_at":"2025-07-02T14:54:05.000Z","size":225,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-08-09T21:37:47.192Z","etag":null,"topics":["arcjet","bot-protection","client-server-architecture","daisyui","express","helmet","javascript","lucide-icons","neon-postgres","nodejs","postgresql","rate-limiting","react-toast","reactjs","tailwindcss","theme-switcher","zustand-state-management"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/PAIshanMadusha.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":"2025-06-21T13:26:59.000Z","updated_at":"2025-07-02T14:54:08.000Z","dependencies_parsed_at":"2025-07-02T15:42:51.715Z","dependency_job_id":null,"html_url":"https://github.com/PAIshanMadusha/pern-stack-product-store","commit_stats":null,"previous_names":["paishanmadusha/pern-stack-product-store"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/PAIshanMadusha/pern-stack-product-store","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PAIshanMadusha%2Fpern-stack-product-store","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PAIshanMadusha%2Fpern-stack-product-store/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PAIshanMadusha%2Fpern-stack-product-store/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PAIshanMadusha%2Fpern-stack-product-store/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/PAIshanMadusha","download_url":"https://codeload.github.com/PAIshanMadusha/pern-stack-product-store/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PAIshanMadusha%2Fpern-stack-product-store/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31573788,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-08T14:31:17.711Z","status":"ssl_error","status_checked_at":"2026-04-08T14:31:17.202Z","response_time":54,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5: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":["arcjet","bot-protection","client-server-architecture","daisyui","express","helmet","javascript","lucide-icons","neon-postgres","nodejs","postgresql","rate-limiting","react-toast","reactjs","tailwindcss","theme-switcher","zustand-state-management"],"created_at":"2025-08-09T21:24:15.240Z","updated_at":"2026-04-08T20:45:08.899Z","avatar_url":"https://github.com/PAIshanMadusha.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n  \u003ch1 align=\"center\" \u003e🛒 Product Store\u003c/h1\u003e\n  \u003ch3 align=\"center\"\u003eBUILD WITH THE PERN STACK \u0026 CLIENT-SERVER ARCHITECTURE\u003c/h3\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://img.shields.io/badge/PostgreSQL-4169E1?style=for-the-badge\u0026logo=postgresql\u0026logoColor=white\" width=\"155\"/\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp;\n  \u003cimg src=\"https://img.shields.io/badge/Express.js-000000?style=for-the-badge\u0026logo=express\u0026logoColor=white\" width=\"155\"/\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp;\n  \u003cimg src=\"https://img.shields.io/badge/React-61DAFB?style=for-the-badge\u0026logo=react\u0026logoColor=black\" width=\"103\"/\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp;\n  \u003cimg src=\"https://img.shields.io/badge/Node.js-339933?style=for-the-badge\u0026logo=node.js\u0026logoColor=white\" width=\"111\"/\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp;\n\u003c/p\u003e\n\n---\n\n**Product Store** is a fullstack web application built with the **PERN stack** (PostgreSQL, Express, React, Node.js). It uses **PostgreSQL via Neon** as the database and allows users to **add**, **view**, **edit**, and **delete** product entries. The app features **light/dark theme toggling**, **Arcjet** for bot protection and rate limiting, and a smooth, responsive UI built with **Tailwind CSS** and **daisyUI**.\n\n---\n\n## 🚀 Features:\n\n* 🌐 Full client-server architecture (Frontend + Backend).\n* 📝 Add, edit, and delete products (name, brand, description, price, image).\n* 🌙 Theme switcher with Zustand and localStorage.\n* 📦 PostgreSQL database hosted on [Neon](https://neon.com/).\n* 🛡️ Arcjet integration for: Bot detection `detectBot`, Rate limiting `tokenBucket`.\n* ✨ Clean and responsive UI using Tailwind CSS and daisyUI.\n* 🔐 Helmet \u0026 CORS for basic security.\n\n---\n\n## 🧰 Tech Stack:\nThe following tech stack is used in this project (Frontend \u0026 Backend):\n\n| Dependency                   | Description                               |\n| ---------------------------- | ----------------------------------------- |\n| React 19 + Vite: build tool  | Modern frontend framework + fast bundler  |\n| **Zustand**                  | Lightweight state management              |\n| **Tailwind CSS**             | Utility-first CSS framework               |\n| **daisyUI**                  | Tailwind-based UI component library       |\n| **React Router DOM**         | Client-side routing                       |\n| **Axios**                    | HTTP client for making API requests       |\n| **Lucide Icons**             | Beautiful open-source icon set            |\n| **React Hot Toast**          | Toast notification library                |\n| ---------------------------- | ----------------------------------------- |\n| **Node.js + Express**        | Server runtime and web framework          |\n| **PostgreSQL**               | Relational database (via Neon serverless) |\n| **@neondatabase/serverless** | Client for Neon-hosted PostgreSQL         |\n| **Helmet**                   | Secures HTTP headers                      |\n| **CORS**                     | Enables Cross-Origin Resource Sharing     |\n| **Morgan**                   | HTTP request logger                       |\n| **Arcjet**                   | Bot detection and rate limiting           |\n\n---\n\n## ⚙️ How to Run the Project:\nFollow these steps to successfully run the project:\n\n### 1. Clone the repository:\n\n```bash\nhttps://github.com/PAIshanMadusha/pern-stack-product-store.git\n```\n\n##### And, navigate to the project directory:\n\n```bash\ncd pern-stack-product-store\n```\n\n### 2. Create `.env` File:\n\n##### At the root of the project, create a `.env` file and add the following credentials.\n##### Go to [**Neon**](https://neon.tech/) and sign in or create an account. Create a new project and copy your ** 🔐 database connection details** from the dashboard.\n##### Then go to [**Arcjet**](https://arcjet.com/), log in, create a new site, and get your `🔐 ARCJET_KEY` from the **SDK Configuration** section.\n##### Paste everything in your `.env` like this:\n\n```env\nPORT=3000\n\nPGUSER=[your_neon_user]\nPGPASSWORD=[your_neon_password]\nPGHOST=[your_neon_host]\nPGDATABASE=[your_neon_db]\n\nARCJET_KEY=[your_arcjet_key]\n\nNODE_ENV=production\n```\n\n### 3. Install Dependencies, Build \u0026 Start (Production):\n\n##### To prepare the app for production:\n\n```bash\nnpm run build\n```\n\n##### Then start the application:\n\n```bash\nnpm start\n```\n\n##### ✅ If everything is successful, your terminal should show:\n\n```\nDatabase initialized\nServer is running on port: 3000\n```\n\n---\n\n### ⚙️ Development Mode (Optional):\n\n##### To run in development mode, edit your `.env` file and set:\n\n```env\nNODE_ENV=development\nARCJET_ENV=development\n```\n\n##### Then, navigate to the `pern-stack-product-store\\server` and `pern-stack-product-store\\client` folders and start both:\n\n```bash\nnpm run dev\n```\n\n##### ✅ If successful, you should see the following in the **client** terminal:\n\n```\nhttp://localhost:5173/\n```\n\n##### ✅ And in the **server** terminal:\n\n```\nDatabase initialized\nServer is running on port: 3000\n```\n\n### 🧪 Add Sample Products (Optional):\n\n##### To quickly populate your database with test products, run this script from the root:\n\n```bash\nnode server/seeds/products.js\n```\n\n##### ✅ This will insert a few sample items you can use to test the UI.\n\n---\n\n## 🧾 Scripts:\nUse these commands to manage the app in development and production environments:\n\n| Command         | Description                                                          |\n| --------------- | -------------------------------------------------------------------- |\n| `npm install`   | Install dependencies for both Client and Server                      |\n| `npm run dev`   | Run the app in development mode (client \u0026 server)                    |\n| `npm run build` | Install all dependencies and build frontend \u0026 backend for production |\n| `npm start`     | Start the app in production mode                                     |\n\n## 📸 System Screenshots:\nThese screenshots illustrate how the system appears on desktop and mobile devices:\n\n---\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://github.com/user-attachments/assets/bd498c73-fbf8-4e3f-ad8a-cc93f5b83eab\" alt=\"Screenshot 1\" width=\"700\"\u003e\n  \u003cbr\u003e\u003cbr\u003e\n  \u003cimg src=\"https://github.com/user-attachments/assets/4dd0f294-631f-4980-8642-d791f83afe30\" alt=\"Screenshot 3\" width=\"700\"\u003e\n  \u003cbr\u003e\u003cbr\u003e\n  \u003cimg src=\"https://github.com/user-attachments/assets/f60855e3-8c48-4b41-995d-692c318143f6\" alt=\"Screenshot 4\" width=\"700\"\u003e\n  \u003cbr\u003e\u003cbr\u003e\n  \u003cimg src=\"https://github.com/user-attachments/assets/39cc34f5-f6d6-4af4-affa-3ff8b7e7da36\" alt=\"Screenshot 4\" width=\"700\"\u003e\n  \u003cbr\u003e\u003cbr\u003e\n  \u003cimg src=\"https://github.com/user-attachments/assets/24d51e52-096f-41eb-a248-2f9493f1ed83\" alt=\"Screenshot 4\" width=\"700\"\u003e\n  \u003cbr\u003e\u003cbr\u003e\n  \u003cimg src=\"https://github.com/user-attachments/assets/4ba26f03-cd16-4e87-a9be-b8adc4c26a4b\" alt=\"Screenshot 4\" width=\"340\"\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp;\n  \u003cimg src=\"https://github.com/user-attachments/assets/749b7451-b613-48f1-9490-76bfd5c4ac28\" alt=\"Screenshot 4\" width=\"340\"\u003e\n\u003c/p\u003e\n\n---\n\n### 👨‍💻 Created by: \n**Ishan Madhusha**  \nGitHub: [PAIshanMadusha](https://github.com/PAIshanMadusha)\n\nFeel free to explore my work and get in touch if you'd like to collaborate! 🚀\n\n---\n\n## 📝 License:  \nThis project is licensed under the MIT License : See the [LICENSE](LICENSE) file for details.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpaishanmadusha%2Fpern-stack-product-store","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpaishanmadusha%2Fpern-stack-product-store","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpaishanmadusha%2Fpern-stack-product-store/lists"}