I completed my React project using Typescript and Redux. In my last e-commerce project, I went through significant errors that were unnoticeable. I couldn't define where the errors came from after completing an entire project, yet my project would not deploy on Netlify. To rectify the intricacies that I faced and ensure a successful project, I redid this project using only React and Typescript to ensure that each step that I code improves my editor support and catches mistakes in my editor before any runtime for testing.
I also wanted to ensure that my project was continuously deployable, catching any errors after making a commit with any changes. This strategy ensured that I noticed the mistakes in the deploy log and could quickly reverse the code to correct the errors. Lastly, I created more notes throughout the project to ensure that I understood not only what the code's functions were supposed to achieve within the various pages but also noted any errors I received and should avoid preventing my code from crashing.
- Adding items to a cart
- Incrementing & decrementing items w/in a modal cart summary
- Calculating the total cost and # of items in the cart summary
- Clearing the cart
- Deleting specific items in the cart while keeping other items
- Displaying a cart icon with the # of items in the cart and staying stagnant while maneuvering through different pages
I installed the project with the following library and programming language:
- npx create-react-app APP NAME
- npm install -g typescript
Please install the following dependencies below to work the project:
- npm install [email protected] [email protected] [email protected] [email protected] [email protected] [email protected]
- npm install sass
- npm i --save @fortawesome/fontawesome-svg-core
- npm install --save @fortawesome/free-solid-svg-icons
- npm install --save @fortawesome/react-fontawesome
- npm install –save @fortawesome/free-brands-svg-icons
- The project can be simply ran using npm start. However, this project has been deployed to netlify. Please check out the functionality of the project there.
Below are some images that really dives into the complexity of this project utilizing both React and TypeScript:
The project includes various responsiveness to different screen sizes, making it easy for the user to access the app on any platform.
The shop page is able to add an item to the cart, increment the item, decrement the item or completely remove an item from a cart.
The offcanvas comes from the left side of the screen and features all items that were added to the cart. The cart summary also has the item price, cart total, # of items in cart, and the close button to remove the item completely without deleting the cart.
I would like to accomplish various tasks to improve the complexity of this project, which will include the following:
- User Authentication: I want to add user authentication and authorization to my application, allowing users to sign up, log in, and log out. This will add an extra layer of security and privacy to my project.
- Payment Integration: I want to integrate a payment gateway such as Stripe or PayPal into my application, allowing users to make purchases and check out securely.
- Admin Dashboard: I also want to create an admin dashboard that allows me to manage products, orders, and customers. This will make it easier for me to keep track of my personal project and make mock data-driven decisions.
- Product Management: I want to add a feature where the system will automatically order more items once the products are low in stock. The system will also allow the consumer to register with their email to receive a notification when the product is back in stock.