This is a solution to the Product list with cart challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.
Users should be able to:
- Add items to the cart and remove them
- Increase/decrease the number of items in the cart
- See an order confirmation modal when they click "Confirm Order"
- Reset their selections when they click "Start New Order"
- View the optimal layout for the interface depending on their device's screen size
- See hover and focus states for all interactive elements on the page
- Solution URL: https://github.com/Nikhila-DN/Product-list-with-Cart.git
- Live Site URL: https://product-list-with-cart-dn.netlify.app/
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- CSS Grid
- Mobile-first workflow
- Vite - The Build Tool for the Web; The default Vite plugin for React projects
- React - JS library
- Ant Design - An enterprise-class UI design language and React components implementation
- Styled Components - For styles
- Vite - The Build Tool for the Web; The default Vite plugin for React projects
- React - JS library
- Ant Design - An enterprise-class UI design language and React components implementation
- Nikhila
- Frontend Mentor - @Nikhila-DN
- Download Zip from Repo
- Unzip
- Inside the Folder Download the Following and run:-
- Install React: npm create vite@latest
- Install Ant Design and React Icons npm install antd npm install react-icons --save
- Run npm run dev
- Youtube
This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
Currently, two official plugins are available:
- @vitejs/plugin-react uses Babel for Fast Refresh
- @vitejs/plugin-react-swc uses SWC for Fast Refresh