The programming language and functionality in this project is given in below
Design Shopping Cart Using HTML and CSS
Implement React Components For Product List, Filter, Cart
Managing Component State using Redux, React-Redux and - Redux-Thunk
Creating Animations Using React-Reveal and Add Routes using React-Routers
Build Backend using Node, Express, MongoDB and Mongoose
Publish Project on the Heroku and MongoDB Atlas
How to start the project
Type npm start(first server start on localhost:3000)
after that type npm run server(second server start on loclhost:6000)
Before start second server set api in Postman Type:http://localhost:6000/api/products in (GET) and (POST) http://localhost:6000/api/products
Press ctr+c disconnect the server
Table Of Content
Introduction
Fully-Functional Shopping Cart
Instant Feedback
Animated and Intuitive Design
List Products
Sort Products By Price High or Low
Filter Products by Size
Open Modal By Click on Product
Add Product To Cart using Animation
Handle Multiple Click By Adding More Items
Remove Product
Show Checkout Form
Create Order with user friendly id
Admin Section to see list of products
Using postman to add or remove products and orders
Tools and Technologies
JavaScript (arrow functions, array functions, spread Operators, ...)
React (react-touter-dom, react-reveal, react-modal)
Redux (react-redux, redux-thunk)
Node (express, body-parser, Environment Variables, nodemon)
MongoDB ( mongoose, shortid)
VS Code (ES6 Snippets, ES7 React Extension, ESLint Extension,CSS Peek)
Chrome ( React Developer Tools, Redux Developer Tools)
Git (create repo, commit, remote, create and push branch)
Github (create repo, connect to local repo, pull request and merge)
Postman ( send get, post, put and delete requests to apis)
Deployment ( Heroku, MongoDB Atlas Cloud)
Create React App
Open VS Code and open terminal
cd Desktop
npx create-react-app react-shopping-cart
Remove unused files
Convert App.js Class Component
Add header, main and footer
Update index.css to add grid
Project Development Workflow
Create Google Spreadsheet
Add columns Feature, Description, State, and Duration
Enter Products Component, Show list of products, Open, 2
Add Time ? Hours, Rate 30 USD/Hours, Cost ? USD
Add All Features
Create Github account
Create new repository
Add it as remote repository in VS Code
Commit changes
Push changes on github
Start => create new feature Feature 1 in google spreadsheet
Create a new branch feature-1 for test the workflow
Add "// branch feature 1" in App.js Line 1
Commit with message "feature 1"
Click publish changes
Open repository page on github
Create pull request
Merge pull request
In VS Code switch to master and Sync changes
End => Loop from step 11 for next feature
Products Component
Create data.json {products:[{_id, title, ...}]
Update App.js to import data.json
div.content {flex, wrap}
div.main {flex: 3 60rem}
div.sidebar {flex: 1 20rem;}
Create components/Products.js component
Add it to div.main in App.js and set products props
ul.products {flex,center, center,warp, p:0,m:0, style:none}
this.props.products.map(p => li.key={p._id} {flex, p:1, m:1, none,h:47}
div.product { flex, column, space-between, h:100%}
a href="#" > img {max-width, max-height:37} + p {p.title}
div.product-price > div.product.price + button.button.primary Add to cart
product-price {flex, space-between, center}
div {p.price} flex: 1; align: center; size: 2rem
button.button.primary Add To Cart
Filter Component
Create components/Filter.js
Add it above Products component in App.js
Update Filter.js render
div.filter {flex, wrap, p,m:1rem, border-bottom: .1rem}
filter-result {this.props.filteredProducts.length}
filter-sort {flex:1}
label Order select value=this.props.sort
onChange= this.props.sortProducts(e.t.value)
option lowestprice Lowest, ...
filter-size {flex:1}
label Filter select value=this.props.size
onChange= this.props.filterProducts(e.t.value)
option "" ALL, XS, S, M, L, XL, XXL
App.js
Add Filter Component
Cart Component
Set Active Task Management Spreadsheet
Create branch cart-component
Product.js
Handle "Add To Cart" to this.props.addToCart(product)
App.js
Add cartItems to state as []
Create addToCart(product)
Slice, Check product existance, add to cartitems
Cart.js
Define cartItems from this.props
Check cartItems.length and show message
List cartItems {cartItems.length > 0 && (}
index.css
Style cart, cart-header, cart-items (img, li),
Publish changes
Pull request, merge, change to master
Task Management Spreadsheet set it done
Checkout Form
Set Active Task Management Spreadsheet
Create branch checkout-form
Cart.js
Make cart items persistent
Use LocalStorage on App constructor to load cart items (JSON.parse)
Use LocalStorage on addToCart to save cart items (JSON.stringify)
Handle Click on Proceed
Update showCheckout state to true on click
Conditional rendering Checkout Form
Get Email, Name and Address required input
Define handleInput function
Add Checkout Button
Handle onSubmit Form Event by this.createOrder
Create order object and pass to parent to handle it
Commit and Publish changes
Pull request, merge, change to master
Task Management Spreadsheet set it done
Add Modal and Animation
Set Active Task Management Spreadsheet
Create branch animation-modal
Show Animation
Install react-reveal
Create fade effect from bottom for products
Create fade left for add to cart
Create fade right for show checkout form
Open Modal by click on product image
Install react-modal
Products.js
Import Modal
Set state for product to null
Define openModal and closeModal
Show Modal if product exist
Create Modal
Create zoom effect for modal
index.css
Style Product Details
Commit and Publish changes
Pull request, merge, change to master
Task Management Spreadsheet set it done
Node.JS
Create Products Backend
Install nodemon globally
Add server.js
Install express body-parser mongoose shortid
Install MongoDB
app = express()
app.use(bodyParser.json())
mongoose.connect()
create Product model
app.post("/api.products")
Postman send post request
route.get("/api/products")
route.delete("/api/products/:id")
Add Redux
what is redux (diagram)
update task on spreadsheet
create branch add-redux-products
npm install redux react-redux redux-thunk
create types
types.js
define FETCH_PRODUCTS
actions/productActions.js
declare fetchProducts
create reducers
reducers/productReducers.js
define case FETCH_PRODUCTS
create store
store.js
import redux
set initial state
define initialState
create store
import productReducers
combine reducers
Use store
App.js
import store
wrap all in Provider
connect products
components/Products.js
connect to store
i mport fetchProducts
fetch products on did mount
package.json
set proxy to http://198.168.0.14:6000
npm run server
check products list
commit and publish
send pull request and merge
update spreadsheet
Add Redux To Filter
Updte task and branch
types.js
create FILTER_PRODUCTS_BY_SIZE
create ORDER_PRODUCTS_BY_PRICE
actions/productActions.js
create filterProducts
move app.js filterProducts logic here
create sortProducts
move app.js filterProducts logic here
reducers/productReducers.js
case FILTER_PRODUCTS_BY_SIZE
case ORDER_PRODUCTS_BY_PRICE
Filter.js
connect props: size, sort, items and filteredItems
connect actions: filterProducts and sortProducts
show loading if no filteredProducts
App.js
remove Filter props
check result
update task and branch
Add Redux To Cart
Updte task and branch
types.js
create ADD_TO_CART
create REMOVE_FROM_CART
actions/cartActions.js
create addToCart
create removeFromCart
reducers/cartReducers.js
case ADD_TO_CART
case REMOVE_FROM_CART
Cart.js
connect props: cartItems
connect actions: removeFromCart
Product.js
add action addToCart
App.js
store.jse Cart props
store.js
set initial cartItems to localStorage
check result
update task and branch
Contact us for this Application Solutions by Codersarts developers who can help you mentor and guide for such React and NodeJs Application.