{"id":14990589,"url":"https://github.com/marijanasevo/silkenskin","last_synced_at":"2025-03-22T00:26:00.634Z","repository":{"id":157099756,"uuid":"622218467","full_name":"marijanasevo/silkenskin","owner":"marijanasevo","description":"Skincare ecommerce website with Vite — React — TypeScript — Redux — Firestore — Firebase-auth —  Stripe —  CSS Modules — PostCss","archived":false,"fork":false,"pushed_at":"2023-07-25T17:41:11.000Z","size":5172,"stargazers_count":3,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-01-26T18:44:21.385Z","etag":null,"topics":["cssmodules","firebase","firebase-auth","postcss","react","redux","stripe","typescript","vite"],"latest_commit_sha":null,"homepage":"https://silken-skin.netlify.app/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/marijanasevo.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-04-01T13:24:32.000Z","updated_at":"2024-12-30T01:02:05.000Z","dependencies_parsed_at":null,"dependency_job_id":"48ebb084-2a50-442e-a363-0c0f6a85c883","html_url":"https://github.com/marijanasevo/silkenskin","commit_stats":{"total_commits":132,"total_committers":1,"mean_commits":132.0,"dds":0.0,"last_synced_commit":"cd49551cf9bcc591f3f0249d9df94b74a6250255"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marijanasevo%2Fsilkenskin","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marijanasevo%2Fsilkenskin/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marijanasevo%2Fsilkenskin/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marijanasevo%2Fsilkenskin/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/marijanasevo","download_url":"https://codeload.github.com/marijanasevo/silkenskin/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244888451,"owners_count":20526798,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["cssmodules","firebase","firebase-auth","postcss","react","redux","stripe","typescript","vite"],"created_at":"2024-09-24T14:20:25.176Z","updated_at":"2025-03-22T00:26:00.613Z","avatar_url":"https://github.com/marijanasevo.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Silken Skin Co Store\n\nSilken Skin Co Store is an ecommerce website that specializes in selling skincare products. The main goal of the website is to provide a convenient and easy-to-use platform for customers to buy their favorite skincare products from the comfort of their own home.\n\n## Table of contents\n\n- [Silken Skin Co Store](#silken-skin-co-store)\n    - [Table of contents](#table-of-contents)\n    - [Overview](#overview)\n        - [Built with](#built-with)\n        - [Features](#features)\n        - [Screenshots](#screenshots)\n        - [Live URL](#live-url)\n    - [My process](#my-process)\n        - [What I learned](#what-i-learned)\n        - [Optimizations](#optimizations)\n    - [Installation](#installation)\n    - [Bugs or possible issues](#bugs-or-possible-issues)\n    - [Contributing](#contributing)\n    - [License](#license)\n\n## Overview\n\n### Built with\n\n- Vite\n- TypeScript\n- React\n- Redux Toolkit\n- localStorage\n- React router dom\n- Stripe\n- Firebase\n- Firebase Auth\n- CSS Modules\n- PostCSS\n- CSS custom properties\n- Material UI\n- Grid\n- Flexbox\n\n### Features\nHere are some of the key features of Silken Skin Co Store:\n\n**Browsing:** Users can browse through the home page to see different\ncategories, new products, new blog posts, Instagram posts, and learn more about the company.\n\n**Authentication:** Users can create an account or log in using their email and\npassword, or their Google account. This feature is implemented using Firebase Auth and Redux state.\n\n**Shopping Cart:** Users can add products to their shopping cart and see a \nnumber of products that is already in it.\n\n**Checkout:** From Shopping Cart a user can go to Checkout page to add more \nproducts, or remove them and\ncomplete their purchase.\n\n**Payment:** Payment is implemented using Stripe, providing a secure and easy\nway for customers to pay for their orders.\n\n**Wishlist:** Users can add products to their wishlist.\n\n**Order History:** If a user is logged in while making an order, they will be\nable to see their order history in their profile account.\n\n**Reviews:** Users can leave reviews for products they've purchased. If a user\nis logged in and has purchased the product, a verified purchase icon will appear next to their name. Otherwise, the icon won't appear. Reviews can include a rating from 0.5 to 5 stars, and a written review. After a review is submitted, the average star rating for that product is updated.\n\n**Filters:** Users can filter products based on 7 main categories, as well as\nadditional filters for targets, properties, skin types, and brand. Products can also be sorted by price.\n\n**Blog:** Users can read the Silken Skin Co Store blog to learn more about\nskincare and related topics.\n\n**Storage and states:** Products, users, orders, reviews, and blog posts are\nstored in Cloud Firestore, while the wishlist is stored in local storage.\nStates are handled with Redux.\n\n### Screenshots\n\n\u003cimg src=\"./silken-skin-ss.png\" style=\"border-radius: 15px; max-width: 700px\"\u003e\n\n### Live URL\n\n- [Live URL](https://silken-skin.netlify.app/)\n\n## My process\n\n### What I learned\n\nDuring the development of Silken Skin, I played a lot and learned a lot. \n\nI found Vite to be a game changer in terms of speed, allowing me to start and work on the project with ease.\n\n\nIn order to strengthen my skills, I spent time rewriting states and exploring different state management options, from React Context to pure Redux, and ultimately to Redux Toolkit. While I found pure Redux to be complex, I believe it is vital and interesting to understand how Redux Toolkit streamlines the process.\n\nI decided to try out Webstorm instead of using VS Code since \nSilken \nSkin was no \nsmall \nundertaking. With the \nadded benefits of TypeScript, the whole process became even more engaging.\n\nFirebase and Stripe really expanded the way I think and I took the chance to \nexperience Netlify's serverless functions.\n\nI also took a step back from the BEM methodology to lean more onto CSS modules,\nwhich provided a great level of organization. But still I found that BEMs\ndescriptive classes offer invaluable clarity.\n\nI played with my own components and also made use of various packages like \nMaterial UI and so on..\n\n\nSilken Skin has been a rewarding learning experience for me. From \nexploring new technologies and packages to experimenting with different \napproaches, this project has allowed me to grow so I'm happy to be creating \nthis \nrepository.\n\n\n## Optimizations\n\nOptimizing the performance and SEO of a website is crucial for improving its visibility and usefulness to a wider audience.\n\n## Installation\n\nTo get started with the project, simply clone the repository and install the required dependencies by running the following command:\n\n```shell\nnpm install\n```\n\nOnce the installation is complete, you can start the development server by running the following command:\n\n```\nnpm run dev\n```\n\n## Bugs or possible issues\n\n**Note**: The code in this project has gone through several iterations as I \nexperimented with different technologies, approaches and packages. As a \nresult, the code may not be entirely consistent throughout.\n\n## Contributing\n\nContributions are welcomed to Silken Skin Co Store! If you'd like to \ncontribute, please fork the repository and make a pull request explaining what you improved.\n\n## License\n\nLicensed under the MIT License.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmarijanasevo%2Fsilkenskin","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmarijanasevo%2Fsilkenskin","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmarijanasevo%2Fsilkenskin/lists"}