{"id":20823229,"url":"https://github.com/bottomsnode/cart_product_react_workshop","last_synced_at":"2025-03-12T06:42:30.679Z","repository":{"id":252637794,"uuid":"841009097","full_name":"BottomsNode/Cart_Product_React_Workshop","owner":"BottomsNode","description":"A React application for managing a shopping cart with product listings, integrated with a backend server and MongoDB for data storage. This project demonstrates the use of React for building single-page applications (SPA) and connecting to a MongoDB database through a backend server.","archived":false,"fork":false,"pushed_at":"2024-08-11T11:33:25.000Z","size":42959,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-01-18T16:56:37.945Z","etag":null,"topics":["cart","expressjs","mongodb","nodejs","react-vite"],"latest_commit_sha":null,"homepage":"","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/BottomsNode.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":"2024-08-11T11:23:04.000Z","updated_at":"2024-08-11T11:34:33.000Z","dependencies_parsed_at":"2024-08-11T12:56:11.889Z","dependency_job_id":null,"html_url":"https://github.com/BottomsNode/Cart_Product_React_Workshop","commit_stats":null,"previous_names":["bottomsnode/cart_product_react_workshop"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BottomsNode%2FCart_Product_React_Workshop","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BottomsNode%2FCart_Product_React_Workshop/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BottomsNode%2FCart_Product_React_Workshop/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BottomsNode%2FCart_Product_React_Workshop/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/BottomsNode","download_url":"https://codeload.github.com/BottomsNode/Cart_Product_React_Workshop/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243172113,"owners_count":20247884,"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":["cart","expressjs","mongodb","nodejs","react-vite"],"created_at":"2024-11-17T22:17:44.501Z","updated_at":"2025-03-12T06:42:30.650Z","avatar_url":"https://github.com/BottomsNode.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Project Name\n\n## Description\n\nA React application for managing a shopping cart with product listings, integrated with a backend server and MongoDB for data storage. This project demonstrates the use of React for building single-page applications (SPA) and connecting to a MongoDB database through a backend server.\n\n## Features\n\n- Single-page application using React and Vite\n- Routing for page navigation\n- Dynamic product listing with image display\n- CRUD operations on products\n- Integration with MongoDB for data storage\n\n## Installation\n\n### Prerequisites\n\n- Node.js (v14 or higher)\n- MongoDB\n\n### Setup\n\n1. **Clone the Repository**\n\n   ```bash\n   git clone https://github.com/your-username/your-repository.git\n   cd your-repository\n   ```\n2. **Install Dependencies**\n    *Frontend:*\n    Navigate to the frontend directory (if you have separate directories for frontend and backend) and install dependencies:\n   ```bash\n   cd frontend\n   npm install\n   ```\n\n    *Backend:*\n    Navigate to the backend directory (if applicable) and install dependencies:\n\n   ```bash\n   cd backend\n   npm install\n   ```\n\n4. **Start the Backend Server**\n\n   ```bash\n   npm run start\n   ```   \n   \n6. **Start the Frontend Development Server**\n\n   ```bash\n   npm run dev\n   ```\nOpen your browser and go to http://localhost:3000 to view the application.\n\n8. **Components**\n    App.js: The main component that renders the Cart component.\n    Cart.js: Manages the state of products and integrates with Header, ProductList, and Footer.\n    ProductList.js: Displays a list of products using CartItem components.\n    CartItem.js: Represents individual products and includes functionality for displaying product details and deleting products.\n    Header.js: Displays the header of the application.\n    Footer.js: Shows the subtotal and provides checkout options.\n\n9. **Database Schema**\n    ```bash\n    {\n    \"_id\": \u003cObjectId\u003e,\n    \"name\": \"Product Name\",\n    \"brand\": \"Brand Name\",\n    \"price\": Number,\n    \"qty\": Number,\n    \"image\": \"/path/to/image.jpg\"\n   }\n   ```\n\n11. **API Endpoints**\n   GET /products  : Retrieve all products.\n   POST /products : Add a new product.\n   PUT /products/ :Update an existing product by ID.\n   DELETE /products/ : Delete a product by ID.\n\n12. **Acknowledgements**\n    React\n    Vite\n    FontAwesome\n    MongoDB\n    Express.js\n\n13. ## Customization\n\n- Replace BottomsNode with your GitHub repository URL.\n- Update the paths and commands according to your project structure.\n- Add or remove sections as needed based on your project's specifics.\n\n# Thankyou !!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbottomsnode%2Fcart_product_react_workshop","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbottomsnode%2Fcart_product_react_workshop","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbottomsnode%2Fcart_product_react_workshop/lists"}