Project Name: My Second React App
Description: This is my second React App, where I've leveraged HTML5 for structuring and plain CSS for designing. React.js has been instrumental in helping me write efficient code and create a dynamic user experience.
Key Features:
-
API Integration: I've seamlessly integrated an API to fetch detailed product information, providing users with up-to-date data.
-
Interactive Cart: Users can add products to their cart with a single click. The number of items in the cart is dynamically updated and displayed in the UI, enhancing the shopping experience.
-
Responsive Design: The website is designed to be responsive across various devices, including desktop, tablet, and mobile. I've utilized plain CSS for responsiveness, and in the future, I plan to incorporate CSS frameworks to further enhance compatibility across all devices.
Technologies Used:
- React.js
- HTML5
- Plain CSS
Future Enhancements: I'm committed to continuously improving this project. Future plans include implementing CSS frameworks to ensure optimal responsiveness across a wide range of devices.
Additional Key Features:
-
Product Data Storage: The application stores product data in the browser's local storage, ensuring that users can retrieve their selected items even after reloading the page. This feature enables a seamless shopping experience, as users can continue where they left off.
-
User-Friendly UI: The website features an intuitive and user-friendly interface, making it easy for customers to browse and add products to their cart. The UI is designed to enhance the overall shopping experience.
-
Shopping Cart Management: Users can add and remove items from their cart with ease. The cart management system is intuitive and provides a smooth user experience.
-
Order Summary: The Order Summary component provides a detailed breakdown of the user's shopping cart, including:
- Number of Items Selected: It displays the total quantity of items in the cart, making it easy for users to see how much they're purchasing.
- Total Price of Selected Items: Users can quickly view the subtotal of their selected items, helping them keep track of their expenses.
- Total Shipping Charge: This feature calculates the shipping charges based on user preferences or predefined rates.
- Tax Calculation: The application computes taxes on the selected items, ensuring transparency in the pricing.
- Grand Total: The Order Summary component displays the final grand total, which includes the product cost, shipping charges, and taxes.
-
Real-Time Updates: The cart and order summary are updated in real-time as users add or remove items, helping them make informed decisions about their purchases.
-
Customization: The application allows users to customize certain aspects, such as shipping options and tax rates, to suit their individual preferences.
-
Persistent Data: Data stored in the browser's local storage persists even if the user closes the browser, allowing them to continue their shopping session seamlessly.
-
Responsive Design: The website is designed to be responsive, ensuring a consistent and visually pleasing experience across various devices, including desktops, tablets, and mobile phones.
-
Secure Checkout: The application ensures the security of user data and payment information during the checkout process.
-
Feedback and Support: Users can provide feedback and seek assistance through the integrated support system to enhance their overall experience.
The Ema John Shopping Cart project offers an improved shopping experience with a focus on user convenience and transparency in order calculation. Whether users are browsing for a single item or multiple products, the application provides a comprehensive and user-friendly solution to meet their shopping needs.
Feel free to explore the code and contribute to the development of this exciting project!
Netlify: https://ema-john-shopping-cart-nion.netlify.app/
Final image of Website UI:
Image 1:
Image 2 (Full Website):
This project was bootstrapped with Create React App.
In the project directory, you can run:
Runs the app in the development mode.
Open http://localhost:3000 to view it in your browser.
The page will reload when you make changes.
You may also see any lint errors in the console.
Launches the test runner in the interactive watch mode.
See the section about running tests for more information.
Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.
The build is minified and the filenames include the hashes.
Your app is ready to be deployed!
See the section about deployment for more information.
Note: this is a one-way operation. Once you eject, you can't go back!
If you aren't satisfied with the build tool and configuration choices, you can eject at any time. This command will remove the single build dependency from your project.
Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except eject will still work, but they will point to the copied scripts so you can tweak them. At this point you're on your own.
You don't have to ever use eject. The curated feature set is suitable for small and middle deployments, and you shouldn't feel obligated to use this feature. However we understand that this tool wouldn't be useful if you couldn't customize it when you are ready for it.
You can learn more in the Create React App documentation.
To learn React, check out the React documentation.
This section has moved here: https://facebook.github.io/create-react-app/docs/code-splitting
This section has moved here: https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size
This section has moved here: https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app
This section has moved here: https://facebook.github.io/create-react-app/docs/advanced-configuration
This section has moved here: https://facebook.github.io/create-react-app/docs/deployment
This section has moved here: https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify