Amasport, an Amazon clone, is a full-stack web application that allows users to browse, review and checkout products in a similar way to Amazon. It includes features such as user authentication, search and filter functionality, product pages with detailed information and reviews, as well as a shopping cart and checkout process. With a modern and user-friendly interface, Amasport provides a seamless e-commerce experience for users, and was built using a combination of front-end and back-end technologies such as React, Node.js, Flask, and PostgreSQL.
- Users can find by products through the use of either the search bar or category links.
- A dropdown menu next to the search bar allows users to filter results to the selected category.
- Matching results to the current category and search-term combination will be displayed as links in real time.
- Users can add, update quantities, and remove products from their carts.
- Users can checkout their carts and will be directed to the checkout page.
- Total price will be displayed on the shopping cart page.
- Items that are in the cart will be cleared from the cart after payment is complete.
- Users are only able to buy a maximum of nine of the same products. If the cart has already nine of a particular product, adding one more to the cart will lead to a message that users have to check out before purchasing more.
// if no product is found, create that product in the cart table
useEffect(async () => {
if (!myProduct) {
await dispatch(addProduct(userId, id));
await dispatch(getCart(userId));
} else {
// if found, check if the quantity is <= 9, if yes, then add to db increase +1
if (myProduct.quantity < 9) {
myProduct.quantity = myProduct.quantity + 1;
await dispatch(updateQuantity(userId, id, myProduct.quantity));
} else {
// if not found, then display a message and do not add to cart
setExceedLimit(true);
}
}
}, [dispatch]);
- On the checkout page, users can choose their shipping address. (Users can put their delivery address on their profile page and this address will be shown when they check out).
- Or users can add a new/different shipping address during checkout.
- After the users select their shipping address, they are able to checkout their carts and will get redirected to the home page in five seconds.
- Users can view their order history by clicking Account & Lists on the right of the navigation bar.
- User can edit their shipping address or cancel their orders if the order status pending.
- When the users place their orders, the status is pending initially.
- Two hours later from the time they place their orders, the status will change to "Shipped" dynamically.
- Two days later, the status will change to "Delivered".
useEffect(() =>{
...
...
if (currentTime >= twoHoursLater && currentTime < twoDaysLater) {
setStatus("Shipped");
const data = {
delivery_status: "Shipped",
};
dispatch(updateStatus(data, item.id));
} else if (currentTime >= twoDaysLater) {
setStatus("Delivered");
const data = {
delivery_status: "Delivered",
};
dispatch(updateStatus(data, item.id));
}
});
}, [dispatch, status]);
- Users can write reviews on any products and rate them using stars.
- Users can edit or remove their own reviews.
function StarRating({ review }) {
return (
<div className="star-rating">
{[...Array(review.rating)].map((star) => {
return (
<span className="star">
<i class="fa-solid fa-star" id="review-star"></i>
</span>
);
})}
</div>
);
}
- A customized page for any undefined URLs, such as /abc or /xyz
