Storika

A dummy frontend shopping-cart website using - with ReactJS/TailwindCSS

Live website

Previews

Home

Products (Loading skeleton)

Product (FakeStore API)

Individual Product Route (Loading skeleton)

Individual Product Route

Cart (Empty page - I made that cute art :D)

Cart (Dummy checkout)

404 Page (a little hobby I have)

Features

• Beautiful light-themed interface. coughs
• Unique and visually appealing 404 page && Empty Cart page (I really meant it when I said UNIQUE && I also made the svg art from the empty-cart page)
• Products displayed and filtered using the Fakestore API
• Properly routed pages with React Router
• Responsive design for optimal viewing on all devices
• Cart functionality allowing users to add, remove, and adjust quantities

Tools/Languages

Getting started

• Make sure you have Node 20.xx.x or higher and Git downloaded

git clone [email protected]:mathdebate09/storika.git
cd storika
npm install
npm run dev

Learning Outcomes

• Gained experience on working with React Router and managing routed pages.
• Learned how to share states between components using Context API.
• Writing UI tests using vitest and prop-checking with propTypes.
• Also, attempted to use custom code-formatting using Prettier and ES Lint (been avoiding them for too long).

Asset credits

• Icon links
  • Cart
  • Remove item
  • Visa, MasterCard & Paypal
  • Github
  • EmptyCart Image (yep I made that :D)
• Google fonts
  • Logo Font: Playwrite USA Modern
  • System Font: Libre Franklin
  • 404 Page heading: EB Garamond
• Carousel images: Desktop, Laptop, Typewriter, Walkman & Game Console
• Homepage Painting: Unsplash link
• Products data from FakeStore API.

Code snippets

• CSS Resets: Josh W. Comeau's Reset && Andy Bell's Reset
• Carousel: A material-tailwind component.
• Footer: A flowbite component.
• Select dropdown: Another flowbite component.
• Loading Skeleton: Yohohoho again, flowbite.
• Meta tag in HTML: A dev.to article by me