{"id":26714291,"url":"https://github.com/santhoshpandi/broad-store-stripe","last_synced_at":"2026-04-09T15:42:54.013Z","repository":{"id":284728157,"uuid":"955850598","full_name":"santhoshpandi/broad-store-stripe","owner":"santhoshpandi","description":"This application is a MERN stack project (MongoDB, Express, React, Node.js) integrated with Stripe for handling payments. It's designed to enable users to complete transactions securely through Stripe's payment gateway.","archived":false,"fork":false,"pushed_at":"2025-03-27T11:30:49.000Z","size":129,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-27T11:34:27.403Z","etag":null,"topics":["css","expressjs","github","html-css-javascript","javascript","mongodb","nodejs","react","stripe","stripe-checkout","stripe-payments","tailwindcss"],"latest_commit_sha":null,"homepage":"https://broad-store-stripe.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/santhoshpandi.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}},"created_at":"2025-03-27T09:49:14.000Z","updated_at":"2025-03-27T11:30:53.000Z","dependencies_parsed_at":"2025-03-27T11:45:26.814Z","dependency_job_id":null,"html_url":"https://github.com/santhoshpandi/broad-store-stripe","commit_stats":null,"previous_names":["santhoshpandi/broad-store-stripe"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/santhoshpandi%2Fbroad-store-stripe","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/santhoshpandi%2Fbroad-store-stripe/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/santhoshpandi%2Fbroad-store-stripe/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/santhoshpandi%2Fbroad-store-stripe/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/santhoshpandi","download_url":"https://codeload.github.com/santhoshpandi/broad-store-stripe/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245850358,"owners_count":20682647,"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":["css","expressjs","github","html-css-javascript","javascript","mongodb","nodejs","react","stripe","stripe-checkout","stripe-payments","tailwindcss"],"created_at":"2025-03-27T13:19:04.061Z","updated_at":"2025-12-30T18:54:29.599Z","avatar_url":"https://github.com/santhoshpandi.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Broad Store🅱 - Stripe\n\nThis application is a MERN stack project (`MongoDB`, `Express`, `React`, `Node.js`) integrated with `Stripe` for handling payments. It's designed to enable users to complete transactions securely through Stripe's payment gateway.\n\n## Developed by\n\n- \u003ca href='https://github.com/santhoshpandi'\u003e`Santhosh Pandi`\u003c/a\u003e \u0026\n \u003ca href='https://github.com/madheshgavinesh'\u003e `Madhesh`\u003c/a\u003e\n\n## Screenshots\n\u003cimg src=\"https://github.com/user-attachments/assets/e9b0222f-06b9-4a31-a07a-cb1bbe496d58\" alt=\"\" \u003e\n\u003cimg src=\"https://github.com/user-attachments/assets/0b9212f5-f355-4271-a6e0-a4107fec241e\" alt=\"\" \u003e\n\u003cimg src=\"https://github.com/user-attachments/assets/6d0c16ed-b06f-44c1-8709-62566fb26da0\" alt=\"\" \u003e\n\n\n\u003cimg height=\"\" src=\"https://github.com/user-attachments/assets/805e192a-9806-4fdf-9b7f-0734fe01fcc0\" alt=\"mobile image\" height=\"400\" width=\"200\" \u003e \u0026nbsp;\n\u003cimg src=\"https://github.com/user-attachments/assets/607498ab-1860-4e1c-81f4-9f58efde6c2f\" alt=\"mobile image\" height=\"400\" width=\"200\" \u003e\n\n## Features\n- **Home Page**: \n  - Displays various `Shopping Items`\n\n- **Item Selection \u0026 Cart Management**: \n  - Users can **select  items** and specify their **quantity**.\n  - Items can be added to a **shopping cart**.\n\n- **Checkout Page**: \n  - When the user clicks the **checkout button**, they are redirected to the **Stripe payment page** to complete the transaction securely.\n\n- **Stripe Payment Integration**: \n  - Handles secure payment processing using **Stripe**.\n  - After a **successful payment**, the user is redirected back to the **home page**.\n\n- **Order Confirmation \u0026 History**: \n  - After a successful payment, users receive **order confirmation** message.\n\n---\n\n# Workflow:\n\n1. **Select Items**: Users browse the available items and add them to their cart, specifying quantities.\n2. **Proceed to Checkout**: Once the user is ready to complete the purchase, they click the **checkout button**, which navigates them to the **Stripe payment page**.\n3. **Payment Processing**: The payment is processed securely through Stripe.\n4. **Payment Success**: After a successful payment, users are redirected back to the **home page**.\n\n---\n\nThese features provide a seamless and secure user experience, allowing users to browse, purchase, and manage their orders, all with Stripe's secure payment integration.\n\n\n## Tech Stack\n\n- **Frontend**:\n  - React\n  - Tailwind CSS\n  - Vite (for faster development builds)\n\n- **Backend**:\n  - Node.js\n  - Express.js\n  - MongoDB\n\n## Getting Started\n\n### Prerequisites\n\nMake sure you have the following installed on your system:\n\n- **Node.js**: Version 14 or higher\n- **Node.js** (version 14 or above)\n- **MongoDB** (local or Atlas for cloud-based DB)\n- **Git**: Version 6 or higher\n\n### Installation\n\n1. Clone the repository:\n   ```\n   git clone https://github.com/santhoshpandi/broad-store-stripe.git\n   ```\n\n2. Navigate to the project directory:\n   ```\n   cd broad-store-stipe\n   ```\n\n3. Install the dependencies:\n   ```\n   npm install\n   npm run installs\n   ```\n\n  ### Environment Variables Setup\n\n  You’ll need to set up the following environment variables for both the backend and the frontend:\n\n  #### Backend (Create `.env` file inside `backend` folder )\n\n```\nSTRIPE_SECRET_KEY= \u003cyour_Stripe_Secret_key\u003e\nBASE_URL= http://localhost:8000\nDB_URL= \u003cyour_mongodb_connection_String\u003e\nPORT= 8000\n```\n\n  #### Frontend (Create `.env` file inside `frontend` folder )\n\n  ```\n  VITE_APP_API_URI = http://localhost:8000\n  ```\n\n4. Start the App ( From `broad-store-stripe` ):\n\n   ```\n   npm run dev\n   ```\n\nThe App will be available at http://localhost:5173\n\nHappy Coding😊👩‍💻\n\n\n## Acknowledgments\n\n\n- **React**: A JavaScript library for building user interfaces.\n- **Context API**: A Built-in method in react used for State Management.\n- **MongoDB**: A NoSQL database used for storing data in a flexible, JSON-like format. It provides high scalability and performance, making it ideal for modern web applications.\n\n- **Node.js**: A JavaScript runtime built on Chrome's V8 engine. It allows the execution of JavaScript code on the server side, enabling full-stack JavaScript development.\n\n- **Express.js**: A minimalist web framework for Node.js that simplifies the creation of server-side applications by providing a robust set of features for building APIs and handling requests.\n- **Tailwind CSS**: A utility-first CSS framework for rapid UI development.\n- **Vite**: An extremely fast build tool for modern web projects.\n\n\n  \n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsanthoshpandi%2Fbroad-store-stripe","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsanthoshpandi%2Fbroad-store-stripe","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsanthoshpandi%2Fbroad-store-stripe/lists"}