{"id":24159521,"url":"https://github.com/nitish2773/nxttrendzapp","last_synced_at":"2026-04-07T23:31:59.424Z","repository":{"id":270327571,"uuid":"830986463","full_name":"Nitish2773/NxtTrendzApp","owner":"Nitish2773","description":"NxtTrendz is a feature-rich e-commerce platform offering a seamless shopping experience. With functionalities like Add to Cart, Search, Category Browsing, Filtering, and Sorting, users can easily find and manage products. ","archived":false,"fork":false,"pushed_at":"2025-02-14T06:55:13.000Z","size":65313,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-02T02:34:21.677Z","etag":null,"topics":["bootstrap","html-css-javascript","nodejs","reactjs"],"latest_commit_sha":null,"homepage":"https://nitishnxttrendz.ccbp.tech/","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/Nitish2773.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}},"created_at":"2024-07-19T11:58:31.000Z","updated_at":"2025-02-14T06:55:16.000Z","dependencies_parsed_at":null,"dependency_job_id":"d8c76424-ea43-4ddf-b48c-5c3749089680","html_url":"https://github.com/Nitish2773/NxtTrendzApp","commit_stats":null,"previous_names":["nitish2773/nxttrendzapp"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Nitish2773/NxtTrendzApp","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Nitish2773%2FNxtTrendzApp","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Nitish2773%2FNxtTrendzApp/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Nitish2773%2FNxtTrendzApp/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Nitish2773%2FNxtTrendzApp/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Nitish2773","download_url":"https://codeload.github.com/Nitish2773/NxtTrendzApp/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Nitish2773%2FNxtTrendzApp/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31533823,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-07T16:28:08.000Z","status":"ssl_error","status_checked_at":"2026-04-07T16:28:06.951Z","response_time":105,"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":["bootstrap","html-css-javascript","nodejs","reactjs"],"created_at":"2025-01-12T15:18:00.039Z","updated_at":"2026-04-07T23:31:59.399Z","avatar_url":"https://github.com/Nitish2773.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"---\n\n# NxtTrendz Shopping Cart Website\n\n## 🚀 Live Demo\n[Click here to experience NxtTrendz](https://nitishnxttrendz.ccbp.tech/)\n\nNxtTrendz is a next-generation e-commerce platform designed to provide users with a seamless and engaging online shopping experience. With a sleek interface, intuitive navigation, and advanced features, shopping has never been easier.\n\n---\n\n## ✨ Key Features\n- 🛒 **Shopping Cart** – Effortlessly add, remove, and update product quantities.\n- 🔍 **Search Functionality** – Quickly locate products with a responsive search bar.\n- 🏷 **Category Browsing** – Browse through different product categories (electronics, fashion, home goods, etc.).\n- 🔄 **Filtering \u0026 Sorting** – Apply filters (price range, brand) and sort by price, popularity, or ratings.\n- 📄 **Product Details** – View detailed product information, including description, availability, pricing, and reviews.\n- 🔗 **Similar Products** – Discover related products based on your selected item.\n\n---\n\n## 🎨 Responsive Design\nNxtTrendz is designed to be fully responsive across all devices. Below are design previews for different screen sizes:\n\n- 📱 **Small Screens (\u003c576px)**:  \n  ![Small Screen](https://assets.ccbp.in/frontend/content/react-js/nxt-trendz-cart-features-sm-output-v0.png)\n\n- 💻 **Medium to Large Screens (≥768px)**:  \n  ![Large Screen](https://assets.ccbp.in/frontend/content/react-js/nxt-trendz-cart-features-lg-output.png)\n\n---\n\n## ⚡ Getting Started\nFollow these steps to set up and run the project locally:\n\n### 1️⃣ Prerequisites\nEnsure you have the following installed on your machine:\n- Node.js\n- npm (Node Package Manager)\n\n### 2️⃣ Installation\nClone the repository and install dependencies:\n```sh\nnpm install\n```\n\n### 3️⃣ Running the App\nStart the development server:\n```sh\nnpm start\n```\nThe application will run at `http://localhost:3000/`.\n\n---\n\n## 🛍 Features to Implement\n\n### 🔐 Authentication \u0026 Cart Access\n- Users must log in before accessing the cart. Unauthenticated users will be redirected to the **Login** page.\n\n### 🛒 Cart Functionalities\n- Adding the same product multiple times increases its quantity instead of duplicating it.\n- The **Cart Route** displays the total amount and item count.\n- **Item Quantity Controls:**\n  - Clicking **+** increases the quantity.\n  - Clicking **−** decreases the quantity (removes the item if quantity is 1).\n  - **Remove** button deletes an item from the cart.\n  - **Remove All** button clears the entire cart.\n- The product price and **Cart Summary** update dynamically.\n\n### 🏗 Cart Context Methods\nThe following methods manage cart operations:\n```js\ncartList // Stores cart items\nremoveAllCartItems() // Clears all items from the cart\naddCartItem(item) // Adds an item to the cart\nremoveCartItem(id) // Removes an individual item\nincrementCartItemQuantity(id) // Increases item quantity\ndecrementCartItemQuantity(id) // Decreases item quantity\n```\n\n---\n\n## 🏛 Components Structure\nTo understand the component architecture, refer to the image below:\n\n![Component Structure](https://assets.ccbp.in/frontend/content/react-js/nxt-trendz-cart-features-component-structure-breakdown.png)\n\n---\n\n## 📂 Implementation Files\nThe following files need updates or creation:\n- `src/App.js`\n- `src/components/Cart/index.js`\n- `src/components/Cart/index.css`\n- `src/components/CartItem/index.js`\n- `src/components/CartItem/index.css`\n- `src/components/CartSummary/index.js`\n- `src/components/CartSummary/index.css`\n\n---\n\n## 💡 Quick Tips\n\n### CSS – Line Height\nUse `line-height` to control text spacing:\n```css\nline-height: 1.5;\n```\n\n### JavaScript – Array `find()` Method\nRetrieve a specific item from an array:\n```js\nconst item = arr.find(item =\u003e item.name === 'Product');\n```\n\n---\n\n## 🎨 UI Elements \u0026 Icons\n- **Icons (react-icons):**\n  - ➕ **Plus:** `BsPlusSquare`\n  - ➖ **Minus:** `BsDashSquare`\n  - ❌ **Remove:** `AiFillCloseCircle`\n\n- **Test IDs:**\n  - `plus` and `minus` for cart item quantity buttons.\n  - `remove` for the remove button.\n\n---\n\n## 🛡 User Credentials (For Testing)\n\n### 🔑 Prime User\n- **Username:** `rahul`\n- **Password:** `rahul@2021`\n\n### 🔑 Non-Prime User\n- **Username:** `nitish`\n- **Password:** `nitish@2021`\n\n---\n\n## 🎨 Design Guidelines\n\n### 🎨 Colors Used\n- ![#0b69ff](https://www.colorhexa.com/0b69ff.png) `#0b69ff`\n- ![#171f46](https://www.colorhexa.com/171f46.png) `#171f46`\n- ![#616e7c](https://www.colorhexa.com/616e7c.png) `#616e7c`\n- ![#ffffff](https://www.colorhexa.com/ffffff.png) `#ffffff`\n\n### 🖋 Font Used\n- **Roboto**\n\n---\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnitish2773%2Fnxttrendzapp","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnitish2773%2Fnxttrendzapp","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnitish2773%2Fnxttrendzapp/lists"}