This app has many features, it comes with:
- A fully responsive website ranging from mobile view to desktop
- A cart menu where the user can see items they have added to the cart as well as their respective prices, item quantity control, and cart subtotal. All items stored in localStorage for data persistence.
- Dynamic motorcycle category selection
- Contact Page
- Cart checkout page where the user can get a final view of their cart before making a purchase of all items in cart.
This project was a highly anticipated project of mine - being able to create a nice mock of an e-commerce site that had dynamic page creation and item control was the goal for this project. I had lots of practice with react-router as well as being exposed to other technologies such as react-scroll, and more react hooks such as useContext. I also ended up using some functions from the Math object (as well as using other functions) in order to be able to calculate the subtotal of multiple cart items. Lots of practice with commonly used react tech such as useState and passing props was done throughout the project.
All components were created using functional components.
Figma Mock: https://www.figma.com/file/NL6a8wlfEi2rwZ25Cg95ef/Motorcycle-Shop
This project follows the Airbnb JavaScript Style Guide.
Eslint and Prettier were also used in this project.
Built with
- React
- Prettier
- ESlint
- Babel
- Webpack
- Jest
- npm
- react-testing-library
- create-react-app
- react-responsive
- react-scroll
- uniqid
$ git clone git@github.com:ec-rilo/iron-motorcycles.git
All tests are run using Jest and react-testing-library.
To install Jest please follow the Getting Started Page on the Jest website.
To install react-testing-library type npm install --save-dev @testing-library/dom in the terminal.
To learn more please read the docs at testing-library.com/react
Please note, if using create-react-app - both Jest and react-testing-library will have been installed for you.
I'd like to thank my small community on discord for always supporting my small milestones announcements for this project and The Odin Project community on discord for having helped me out with hints and feedback whenever I had questions. I can't thank either group enough for the amount of support that has been given to me.
Edgar Carrillo
Project created by Edgar Carrillo