This is a solution to the E-commerce product page challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.
My first TypeScript project in any capacity. This is built upon the React solution I published for the same project to help me acclamate to the development environment.
One could make the arugement that useContext and useReducer are not necessary for an app of this size but I wanted to ease myself in to most aspects of building a react project - hence their inclusion.
Styling was not a priority for this project. Let it be noted that this was the first time I had used Styled Components to build my own project and currently, I do not see any benefits it offers over creating seperate CSS files, but I am intrigued in exploring more into the subject.
As for TypeScript, coming from a Java background, it's not particularly inticing. I did not see any benefits it might have offered (this could be a result of the size of the project) but I am moderately excited into delving more into the realm and seeing just what it can do and why it is highly regarded.
Users should be able to:
- View the optimal layout for the site depending on their device's screen size
- See hover states for all interactive elements on the page
- Switch the large product image by clicking on the small thumbnail images
- Add items to the cart
- View the cart and remove items from it
- Solution URL: Add solution URL here
- Live Site URL: Add live site URL here
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- CSS Grid
- Mobile-first workflow
- React - JS library
- Next.js - React framework
- Styled Components - For styles
- TypeScript - To add on to react
I am not a fan of TypeScript with React. But I am interested.
- Github - ChinyangaTL
- Frontend Mentor - @beyonce-beytwice