https://github.com/mathdebate09/storika
A dummy frontend shopping-cart website - made with ReactJS/TailwindCSS
https://github.com/mathdebate09/storika
design shopping-site tailwind-ui
Last synced: 7 days ago
JSON representation
A dummy frontend shopping-cart website - made with ReactJS/TailwindCSS
- Host: GitHub
- URL: https://github.com/mathdebate09/storika
- Owner: mathdebate09
- License: other
- Created: 2024-06-29T18:42:30.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2024-07-05T19:00:48.000Z (almost 2 years ago)
- Last Synced: 2024-07-06T00:25:36.261Z (almost 2 years ago)
- Topics: design, shopping-site, tailwind-ui
- Language: JavaScript
- Homepage: https://storika.vercel.app
- Size: 14.4 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# Storika
A dummy frontend shopping-cart website using - with ReactJS/TailwindCSS
> [Live website](https://storika.vercel.app/)
## 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](https://storika.vercel.app/cart) 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
[](https://react.dev/learn)
[](https://developer.mozilla.org/en-US/docs/Web/JavaScript)
[](https://developer.mozilla.org/en-US/docs/Web/HTML)
[](https://tailwindcss.com/docs/installation)
[](https://vitejs.dev/guide/)
[](https://vitest.dev/guide/)
[](https://vercel.com/docs/getting-started-with-vercel)
## Getting started
- Make sure you have [Node 20.xx.x](https://nodejs.org/en/download/package-manager) or higher and [Git](https://git-scm.com/downloads) downloaded
```bash
git clone git@github.com: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](https://lucide.dev/icons/shopping-bag)
- [Remove item](https://lucide.dev/icons/trash-2)
- [Visa](https://www.svgrepo.com/svg/328144/visa), [MasterCard](https://www.svgrepo.com/svg/508701/mastercard-full) & [Paypal](https://www.svgrepo.com/svg/508716/paypal)
- [Github](https://www.svgrepo.com/svg/512317/github-142)
- [EmptyCart Image](https://gtihub.com/amthdebta09) (yep I made that :D)
- **Google fonts**
- Logo Font: [Playwrite USA Modern](https://fonts.google.com/specimen/Playwrite+US+Modern?preview.text=storika.)
- System Font: [Libre Franklin](https://fonts.google.com/specimen/Libre+Franklin?preview.text=Hello%20Wolrd)
- 404 Page heading: [EB Garamond](https://fonts.google.com/specimen/EB+Garamond)
- **Carousel images**: [Desktop](https://www.artstation.com/artwork/kQQgaA), [Laptop](https://www.aroged.com/2024/06/25/apple-does-not-allow-the-release-of-pc-emulators-on-ios/), [Typewriter](https://unsplash.com/photos/black-typewriter-on-brown-wooden-table-rLNtIsnrp6A), [Walkman](https://medium.com/coinmonks/download-mp3-from-youtube-playlist-efa44493b47a) & [Game Console](https://quizgecko.com/learn/nintendo-trivia-rhntqm)
- Homepage Painting: [Unsplash link](https://unsplash.com/photos/horse-and-carriage-inside-cave-painting-kVXGjqRe7IY)
- Products data from [FakeStore API](https://fakestoreapi.com/).
## Code snippets
- CSS Resets: [Josh W. Comeau's Reset](https://www.joshwcomeau.com/css/custom-css-reset/) && [Andy Bell's Reset](https://piccalil.li/blog/a-more-modern-css-reset/)
- Carousel: A [material-tailwind](https://www.material-tailwind.com/docs/react/carousel) component.
- Footer: A [flowbite](https://flowbite.com/docs/components/footer/#social-media-icons) component.
- Select dropdown: Another [flowbite](https://flowbite.com/docs/forms/select/#select-input-example) component.
- Loading Skeleton: Yohohoho again, [flowbite](https://flowbite.com/docs/components/skeleton/#image-placeholder).
- Meta tag in HTML: A [dev.to article](https://dev.to/mathdebate09/add-thumbnails-to-your-project-links-for-better-seo-5gca) by me