{"id":15631368,"url":"https://github.com/basir/react-shopping-cart","last_synced_at":"2025-04-05T21:11:24.056Z","repository":{"id":44447817,"uuid":"260670414","full_name":"basir/react-shopping-cart","owner":"basir","description":"React Redux Tutorial - Build ECommerce Shopping Cart In 5 Hours","archived":false,"fork":false,"pushed_at":"2024-07-13T10:46:59.000Z","size":571,"stargazers_count":216,"open_issues_count":13,"forks_count":204,"subscribers_count":6,"default_branch":"master","last_synced_at":"2025-03-29T20:07:21.113Z","etag":null,"topics":["ecommerce","react","redux","shopping-cart","tutorial"],"latest_commit_sha":null,"homepage":"https://react-shopping-cart-final.herokuapp.com/","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/basir.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":"2020-05-02T11:14:11.000Z","updated_at":"2025-03-23T03:47:58.000Z","dependencies_parsed_at":"2024-11-14T21:01:13.693Z","dependency_job_id":"6caa36f9-85c6-4bd7-be57-691a433ec960","html_url":"https://github.com/basir/react-shopping-cart","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/basir%2Freact-shopping-cart","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/basir%2Freact-shopping-cart/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/basir%2Freact-shopping-cart/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/basir%2Freact-shopping-cart/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/basir","download_url":"https://codeload.github.com/basir/react-shopping-cart/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247399885,"owners_count":20932880,"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":["ecommerce","react","redux","shopping-cart","tutorial"],"created_at":"2024-10-03T10:40:05.048Z","updated_at":"2025-04-05T21:11:24.038Z","avatar_url":"https://github.com/basir.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Build ECommerce Shopping Cart by React \u0026 Redux 2020 Edition\n\nDemo: https://reactredux-shoppingcart.herokuapp.com/\n\n[Get 90% Discount On This Course At Udemy](https://codingwithbasir.com/udemy-shopping-cart)\n\n## What you’ll learn\n\n- Design Shopping Cart Using HTML and CSS\n- Implement React Components For Product List, Filter, Cart\n- Managing Component State using Redux, React-Redux and - Redux-Thunk\n- Creating Animations Using React-Reveal and Add Routes using React-Routers\n- Build Backend using Node, Express, MongoDB and Mongoose\n- Publish Project on the Heroku and MongoDB Atlas\n\n## Are there any course requirements or prerequisites?\n\n- Basic HTML and CSS\n- Basic JavaScript\n\n## Who this course is for:\n\n- Javascript developers\n- Web Developers\n- Freelancers\n- Programming Students\n\n## Table Of Content\n\n1. Introduction\n\n   1. Introduction\n      1. Fully-Functional Shopping Cart\n      2. Instant Feedback\n      3. Animated and Intuitive Design\n      4. List Products\n      5. Sort Products By Price High or Low\n      6. Filter Products by Size\n      7. Open Modal By Click on Product\n      8. Add Product To Cart using Animation\n      9. Handle Multiple Click By Adding More Items\n      10. Remove Product\n      11. Show Checkout Form\n      12. Create Order with user friendly id\n      13. Admin Section to see list of products\n      14. Using postman to add or remove products and orders\n   2. Tools and Technologies\n      1. JavaScript (arrow functions, array functions, spread Operators, ...)\n      2. React (react-touter-dom, react-reveal, react-modal)\n      3. Redux (react-redux, redux-thunk)\n      4. Node (express, body-parser, Environment Variables, nodemon)\n      5. MongoDB ( mongoose, shortid)\n      6. VS Code (ES6 Snippets, ES7 React Extension, ESLint Extension,CSS Peek)\n      7. Chrome ( React Developer Tools, Redux Developer Tools)\n      8. Git (create repo, commit, remote, create and push branch)\n      9. Github (create repo, connect to local repo, pull request and merge)\n      10. Postman ( send get, post, put and delete requests to apis)\n      11. Deployment ( Heroku, MongoDB Atlas Cloud)\n   3. Create React App\n      1. Open VS Code and open terminal\n      2. cd Desktop\n      3. npx create-react-app react-shopping-cart\n      4. Remove unused files\n      5. Convert App.js Class Component\n      6. Add header, main and footer\n      7. Update index.css to add grid\n   4. Project Development Workflow\n      1. Create Google Spreadsheet\n      2. Add columns Feature, Description, State, and Duration\n      3. Enter Products Component, Show list of products, Open, 2\n      4. Add Time ? Hours, Rate 30 USD/Hours, Cost ? USD\n      5. Add All Features\n      6. Create Github account\n      7. Create new repository\n      8. Add it as remote repository in VS Code\n      9. Commit changes\n      10. Push changes on github\n      11. Start =\u003e create new feature Feature 1 in google spreadsheet\n      12. Create a new branch feature-1 for test the workflow\n      13. Add \"// branch feature 1\" in App.js Line 1\n      14. Commit with message \"feature 1\"\n      15. Click publish changes\n      16. Open repository page on github\n      17. Create pull request\n      18. Merge pull request\n      19. In VS Code switch to master and Sync changes\n      20. End =\u003e Loop from step 11 for next feature\n\n2. React\n\n   1. Products Component\n      1. Create data.json {products:[{_id, title, ...}]\n      2. Update App.js to import data.json\n      3. div.content {flex, wrap}\n      4. div.main {flex: 3 60rem}\n      5. div.sidebar {flex: 1 20rem;}\n      6. Create components/Products.js component\n      7. Add it to div.main in App.js and set products props\n      8. ul.products {flex,center, center,warp, p:0,m:0, style:none}\n      9. this.props.products.map(p =\u003e li.key={p.\\_id} {flex, p:1, m:1, none,h:47}\n      10. div.product { flex, column, space-between, h:100%}\n      11. a href=\"#\" \u003e img {max-width, max-height:37} + p {p.title}\n      12. div.product-price \u003e div.product.price + button.button.primary Add to cart\n      13. product-price {flex, space-between, center}\n      14. div {p.price} flex: 1; align: center; size: 2rem\n      15. button.button.primary Add To Cart\n   2. Filter Component\n      1. Create components/Filter.js\n      2. Add it above Products component in App.js\n      3. Update Filter.js render\n      4. div.filter {flex, wrap, p,m:1rem, border-bottom: .1rem}\n      5. filter-result {this.props.filteredProducts.length}\n      6. filter-sort {flex:1}\n      7. label Order select value=this.props.sort\n      8. onChange= this.props.sortProducts(e.t.value)\n      9. option lowestprice Lowest, ...\n      10. filter-size {flex:1}\n      11. label Filter select value=this.props.size\n      12. onChange= this.props.filterProducts(e.t.value)\n      13. option \"\" ALL, XS, S, M, L, XL, XXL\n      14. App.js\n      15. Add Filter Component\n   3. Cart Component\n      1. Set Active Task Management Spreadsheet\n      2. Create branch cart-component\n      3. Product.js\n      4. Handle \"Add To Cart\" to this.props.addToCart(product)\n      5. App.js\n      6. Add cartItems to state as []\n      7. Create addToCart(product)\n      8. Slice, Check product existance, add to cartitems\n      9. Cart.js\n      10. Define cartItems from this.props\n      11. Check cartItems.length and show message\n      12. List cartItems {cartItems.length \u003e 0 \u0026\u0026 (}\n      13. index.css\n      14. Style cart, cart-header, cart-items (img, li),\n      15. Publish changes\n      16. Pull request, merge, change to master\n      17. Task Management Spreadsheet set it done\n   4. Checkout Form\n      1. Set Active Task Management Spreadsheet\n      2. Create branch checkout-form\n      3. Cart.js\n      4. Make cart items persistent\n      5. Use LocalStorage on App constructor to load cart items (JSON.parse)\n      6. Use LocalStorage on addToCart to save cart items (JSON.stringify)\n      7. Handle Click on Proceed\n      8. Update showCheckout state to true on click\n      9. Conditional rendering Checkout Form\n      10. Get Email, Name and Address required input\n      11. Define handleInput function\n      12. Add Checkout Button\n      13. Handle onSubmit Form Event by this.createOrder\n      14. Create order object and pass to parent to handle it\n      15. Commit and Publish changes\n      16. Pull request, merge, change to master\n      17. Task Management Spreadsheet set it done\n   5. Add Modal and Animation\n      1. Set Active Task Management Spreadsheet\n      2. Create branch animation-modal\n      3. Show Animation\n      4. Install react-reveal\n      5. Create fade effect from bottom for products\n      6. Create fade left for add to cart\n      7. Create fade right for show checkout form\n      8. Open Modal by click on product image\n      9. Install react-modal\n      10. Products.js\n      11. Import Modal\n      12. Set state for product to null\n      13. Define openModal and closeModal\n      14. Show Modal if product exist\n      15. Create Modal\n      16. Create zoom effect for modal\n      17. index.css\n      18. Style Product Details\n      19. Commit and Publish changes\n      20. Pull request, merge, change to master\n      21. Task Management Spreadsheet set it done\n\n3. Node.JS\n\n   1. Create Products Backend\n      1. Install nodemon globally\n      2. Add server.js\n      3. Install express body-parser mongoose shortid\n      4. Install MongoDB\n      5. app = express()\n      6. app.use(bodyParser.json())\n      7. mongoose.connect()\n      8. create Product model\n      9. app.post(\"/api.products\")\n      10. Postman send post request\n      11. route.get(\"/api/products\")\n      12. route.delete(\"/api/products/:id\")\n\n4. Redux\n\n   1. Add Redux\n      1. what is redux (diagram)\n      2. update task on spreadsheet\n      3. create branch add-redux-products\n      4. npm install redux react-redux redux-thunk\n      5. create types\n      6. types.js\n      7. define FETCH_PRODUCTS\n      8. actions/productActions.js\n      9. declare fetchProducts\n      10. create reducers\n      11. reducers/productReducers.js\n      12. define case FETCH_PRODUCTS\n      13. create store\n      14. store.js\n      15. import redux\n      16. set initial state\n      17. define initialState\n      18. create store\n      19. import productReducers\n      20. combine reducers\n      21. Use store\n      22. App.js\n      23. import store\n      24. wrap all in Provider\n      25. connect products\n      26. components/Products.js\n      27. connect to store\n      28. import fetchProducts\n      29. fetch products on did mount\n      30. package.json\n      31. set proxy to http://127.0.0.1:5000\n      32. npm run server\n      33. check products list\n      34. commit and publish\n      35. send pull request and merge\n      36. update spreadsheet\n   2. Add Redux To Filter\n      1. Updte task and branch\n      2. types.js\n      3. create FILTER_PRODUCTS_BY_SIZE\n      4. create ORDER_PRODUCTS_BY_PRICE\n      5. actions/productActions.js\n      6. create filterProducts\n      7. move app.js filterProducts logic here\n      8. create sortProducts\n      9. move app.js filterProducts logic here\n      10. reducers/productReducers.js\n      11. case FILTER_PRODUCTS_BY_SIZE\n      12. case ORDER_PRODUCTS_BY_PRICE\n      13. Filter.js\n      14. connect props: size, sort, items and filteredItems\n      15. connect actions: filterProducts and sortProducts\n      16. show loading if no filteredProducts\n      17. App.js\n      18. remove Filter props\n      19. check result\n      20. update task and branch\n   3. Add Redux To Cart\n      1. Updte task and branch\n      2. types.js\n      3. create ADD_TO_CART\n      4. create REMOVE_FROM_CART\n      5. actions/cartActions.js\n      6. create addToCart\n      7. create removeFromCart\n      8. reducers/cartReducers.js\n      9. case ADD_TO_CART\n      10. case REMOVE_FROM_CART\n      11. Cart.js\n      12. connect props: cartItems\n      13. connect actions: removeFromCart\n      14. Product.js\n      15. add action addToCart\n      16. App.js\n      17. remove Cart props\n      18. store.js\n      19. set initial cartItems to localStorage\n      20. check result\n      21. update task and branch\n\n5. Advanced Topics\n\n   1. Create Order\n      1. Backend\n      2. server.js\n      3. create order modal\n      4. get /api/orders\n      5. post /api/orders\n      6. delete /api/orders/:id\n      7. Frontend\n      8. create types\n      9. types.js\n      10. CLEAR_ORDER, CLEAR_CART, CREATE_ORDER\n      11. create actions\n      12. actions/orderActions.js\n      13. createOrder(order)\n      14. clearOrder()\n      15. create reducers\n      16. reducers/orderReducers.js\n      17. case CREATE_ORDER\n      18. case CLEAR_ORDER\n      19. Update Cart Component\n      20. components/Cart.js\n      21. connect order, createOrder, clearOrder\n      22. form onSubmit={this.createOrder}\n      23. createOrder() this.props.createOrder(order)\n      24. closeModal() this.props.clearOrder()\n      25. render()\n      26. const { cartItems, order } = this.props;\n      27. {order \u0026\u0026 (\u003cModal\u003e\u003c/Modal\u003e}\n   2. Manage Orders\n      1. Add new page\n      2. Install react-router-dom\n      3. App.js\n      4. Import BrowserRouter, Route, Link\n      5. render()\n      6. BrowserRouter\n      7. Route path=\"/admin\" component={AdminScreen}\n      8. Route path=\"/\" exact={true} component={HomeScreen}\n      9. HomeScreen.js\n      10. \u003cFilter /\u003e \u003cProducts /\u003e \u003cCart /\u003e\n      11. AdminScreen.js\n      12. \u003cOrders /\u003e\n      13. components/Orders.js\n      14. render() \u003cdiv\u003e Orders \u003c/div\u003e\n      15. Backend\n      16. server.js\n      17. app.get(\"/api/orders\")\n      18. app.delete(\"/api/orders/:id\")\n      19. Frontend\n      20. types.js\n      21. FETCH_ORDERS\n      22. actions/orderActions.js\n      23. fetchOrders()\n      24. reducers/orderReducers.js\n      25. case FETCH_ORDERS {orders: action.payload}\n      26. components/Orders.js\n      27. connect orders, fetchOrders\n      28. componentDidMount() fetchOrders\n      29. render()\n      30. !orders \u003cdiv\u003eLoading...\u003c/div\u003e\n      31. table orders\n      32. index.css\n      33. style orders\n\n6. Deploy Website\n   1. Create MongoDB Cloud Database\n   2. Login to https://www.mongodb.com/cloud\n   3. Add database user\n   4. Left sidebar\u003e Select Security \u003e Database Access\n   5. Select Add New User button\n   6. Enter user name and password and click Add User\n   7. Add IP whitelist\n   8. Left sidebar \u003e Select Security \u003e Network Access\n   9. Select Add IP Address\n   10. Enter 0.0.0.0/0 in Whitelist Entry and click Confirm\n   11. Get connection string\n   12. Left sidebar \u003e Select Altas \u003e Cluster\n   13. Click Connect\n   14. Click Connect to your application\n   15. Click Copy button\n   16. Step 2: Deploy On Heroku\n   17. Create git repository in amazona folder using git init\n   18. Create Heroku Account at heroku.com\n   19. Heroku\n   20. Create Heroku account on heroku.com\n   21. Install Heroku cli https://devcenter.heroku.com/articles/heroku-cli\n   22. Open Terminal\n   23. heroku login\n   24. heroku apps:create react-shopping-cart-best\n   25. Edit package.json\n   26. \"engines\": { \"node\": \"12.4.0\", \"npm\": \"6.9.0\"}\n   27. Create Procfile\n   28. web: node server.js\n   29. Set MongoDB connection string in Heroku\n   30. Open Heroku apps https://dashboard.heroku.com/apps/\n   31. Select your apps, open Setting Tab and click Reveal Config Vars\n   32. Add key MONGODB_URL\n   33. Enter copied connection string from the previous step\n   34. Update database name and username and password\n   35. Add key NODE_MODULES_CACHE and value false\n   36. app.use(\"/\", express.static(\\_\\_dirname + \"/build\"));\n   37. app.get(\"/\", (req, res) =\u003e res.sendFile(\\_\\_dirname + \"/build/index.html\"));\n   38. git add . \u0026\u0026 git commit -m \"publish\"\n   39. git push heroku\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbasir%2Freact-shopping-cart","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbasir%2Freact-shopping-cart","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbasir%2Freact-shopping-cart/lists"}