{"id":19959963,"url":"https://github.com/quiddlee/ecommerce-application","last_synced_at":"2026-04-14T05:33:26.285Z","repository":{"id":196153372,"uuid":"673717490","full_name":"Quiddlee/eCommerce-Application","owner":"Quiddlee","description":"🌐 The Rolling Scopes School eCommerce-Application | Stage 2 Final Task","archived":false,"fork":false,"pushed_at":"2023-09-26T18:41:10.000Z","size":42147,"stargazers_count":0,"open_issues_count":5,"forks_count":2,"subscribers_count":2,"default_branch":"development","last_synced_at":"2025-11-29T05:57:13.816Z","etag":null,"topics":["ecommerce-application","feature-sliced-design","react-router","reactjs","redux","rsschool","rtk-query","tailwindcss","typescript","vite","vitest"],"latest_commit_sha":null,"homepage":"https://tedzury.github.io/eCommerce-Application","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/Quiddlee.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-08-02T09:07:39.000Z","updated_at":"2024-02-23T17:56:37.000Z","dependencies_parsed_at":"2025-03-01T16:38:09.637Z","dependency_job_id":null,"html_url":"https://github.com/Quiddlee/eCommerce-Application","commit_stats":null,"previous_names":["quiddlee/ecommerce-application"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Quiddlee/eCommerce-Application","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Quiddlee%2FeCommerce-Application","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Quiddlee%2FeCommerce-Application/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Quiddlee%2FeCommerce-Application/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Quiddlee%2FeCommerce-Application/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Quiddlee","download_url":"https://codeload.github.com/Quiddlee/eCommerce-Application/tar.gz/refs/heads/development","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Quiddlee%2FeCommerce-Application/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31784253,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-14T02:24:21.117Z","status":"ssl_error","status_checked_at":"2026-04-14T02:24:20.627Z","response_time":153,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":["ecommerce-application","feature-sliced-design","react-router","reactjs","redux","rsschool","rtk-query","tailwindcss","typescript","vite","vitest"],"created_at":"2024-11-13T01:53:18.809Z","updated_at":"2026-04-14T05:33:26.268Z","avatar_url":"https://github.com/Quiddlee.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 🍣 **SushiSushi — eCommerce-Application**\n\n*RS-School 🦥 eCommerce-Application. Stage 2 Final Task RS2023Q1* 🧙‍ \u003cbr\u003e\n️***SushiSushi** - Is not just your regular food delivery; it's a culinary journey to Japan's finest flavors, delivered to your doorstep 😉.* \n\n**🏆🥳 One of the best RS2023Q1 [graduation projects](https://discord.com/channels/516715744646660106/1072962541812191423/1156268411123408926)!**\n\n**Task description** - [Task description](https://github.com/rolling-scopes-school/tasks/tree/master/tasks/eCommerce-Application) 📝 \u003cbr\u003e\n**Deployed project preview** - [SushiSushi](https://quiddlee.github.io/eCommerce-Application/) 👀\n\n# Getting Started 🚀\n\nTo run our project locally, you would have to **download zip** file with our repository or **clone** it to your computer. ✨\n\n## Setup and Running ⚠️\n\nWhat things do you need to do in order to run our project locally? 🤔\n\n\n* Use node 18.x or higher. ⚡\n* Installed [.git](https://git-scm.com/) on your computer. ✌️\n* Code Editor of your choice. 📝\n* Installed [npm](https://www.npmjs.com/). 📦\n* Created [commercetools](https://docs.commercetools.com/) account. 🌐\n\n\n## Installation And Preparation ⬇️\n\n First make sure you have all the things listed in the previous section. Then clone our repository to your computer: 👌\n\n```\ngit clone git@github.com:Quiddlee/eCommerce-Application.git\n```\n\nor download zip file manually with our repository 😏.\n\nNavigate into project folder and run 📦:\n\n```\nnpm install\n```\n\nCreate ```.env``` file in the root of the project and add your commercetools credentials 🔥.\n\nYou can find ```.env.example``` as an example file in the project root or follow the lines below 🐺:\n\n\n```dotenv\nVITE_PROJECT_KEY=PROJECT_KEY\nVITE_CLIENT_SECRET=CLIENT_SECRET\nVITE_CLIENT_ID=CLIENT_ID\nVITE_AUTH_SERVICE_URL=AUTH_SERVICE_URL\nVITE_API_HOST_URL=API_HOST_URL\nVITE_DEFAULT_CUSTOMER_SCOPE=DEFAULT_CUSTOMER_SCOPE\n```\n\nFollow the [step by step guide](#adding-products-data-to-commerce-tools-) on how to add your own products data to commercetools 🦩.\n\nFinally run a development server: 🤩\n```\nnpm run dev\n```\nAaaaand you're done! 🎉🥳\n\n\n## Available Scripts 🥑\n\nHere you can find all the scripts that are available in our project. 🦚\n\nLinting and Prettifying happens automatically when files are staged 😎, however you can do it manually with absolutely no problems:\n\nLint the App with **ESlint**: ✔️\n\n```\nnpm run lint\n```\n\nFormat the App with **Prettier**: 🧹\n\n```\nnpm run format\n```\n\nType check the App with **TypeScript**: 📝\n\n```\nnpm run type-check\n```\n\nInstall **Husky** to enable pre-commit hooks: 🎣\n\n```\nnpm run prepare\n```\n\nRun unit-tests with  **Vitest**: 🧪\n\n```\nnpm run test\n```\n\n**Build** project for production: 🏗️\n\n```\nnpm run build\n```\n\n**Preview** the **production build** locally: 👀\n\n```\nnpm run preview\n```\n\n# Features 🚀\n\n* **Browse the world of royal asian flavour meals! 😃🍣**\n\n![gif-1](https://github.com/Quiddlee/eCommerce-Application/assets/114234698/3d3e9cfe-20cc-4f67-8890-08748e8fdc31)\n\n* **Choose the meal you like the most 😋🍴**\n\n\u003cimg src=\"https://github.com/Quiddlee/eCommerce-Application/assets/114234698/6e3ef9f9-ec15-421d-83f3-a9bdc2beeac2\" width=\"800px\"\u003e\n\n* **Fill your shopping cart 🛍️🛒**\n\n![gif-2](https://github.com/Quiddlee/eCommerce-Application/assets/114234698/df2b1cb3-ba0d-43be-9aeb-80ecd9d5a16e)\n\n* **Search for your lovely meals! 🔍**\n\n![gif-3](https://github.com/Quiddlee/eCommerce-Application/assets/114234698/fbd16e70-1095-4726-a915-758c8fb1d71d)\n\n* **Filter the results to make easier your search 😊**\n\n![gif-4](https://github.com/Quiddlee/eCommerce-Application/assets/114234698/3cec92b9-0c43-4af6-98cc-054a1739fe9f)\n\n* **Sign up your account! 🌌**\n\n![gif-6](https://github.com/Quiddlee/eCommerce-Application/assets/114234698/d5a7ccfb-8ad6-42a3-856b-3b53e6f0dc7c)\n\n* **Change your data at any time 👌**\n\n![gif-5](https://github.com/Quiddlee/eCommerce-Application/assets/114234698/6e8138e9-66ef-468e-b009-6a1d1106ebeb)\n\n* **Beautiful Mobile App, and much much more features, try by yourself 😉!**\n\n\u003cimg src=\"https://github.com/Quiddlee/eCommerce-Application/assets/114234698/42d15ba0-1594-45e8-a54b-a36f503f81e5\" height=\"500px\"\u003e\n\u003cimg src=\"https://github.com/Quiddlee/eCommerce-Application/assets/114234698/4a5838f3-7cf1-4d48-868a-a2e706ee9903\" height=\"500px\"\u003e\n\u003cimg src=\"https://github.com/Quiddlee/eCommerce-Application/assets/114234698/4077c659-9d4e-4bda-a9f8-c80b55ee6f42\" height=\"500px\"\u003e\n\n# Technology Stack ⚙️\n\n### **Developing 😍**\n* [React.js](https://react.dev/) - **The web framework used** ⚛️\n* [Redux / RTK Query](https://redux.js.org/) - **The State Management Tool and Data Fetching Library** 🧰\n* [React Router Dom](https://reactrouter.com/) - **The Router** 📍\n* [TypeScript](https://www.typescriptlang.org/) - **The Language** 💖\n* [Tailwind](https://tailwindcss.com/) - **The CSS Framework** 🍃\n* [Vite](https://vitejs.dev/) - **The Bundler 📦**\n* [Postman](https://www.postman.com/) - **The API Testing Tool** 📬\n\n### **Code Quality 🧹**\n* [Vitest](https://vitest.dev/) - **The Test Runner** 🧪\n* [Testing Library](https://testing-library.com/) - **The Testing Framework** 🫂\n* [ESLint — Air-bnb base](https://eslint.org/) - **The Linter** 🔔\n* [Prettier](https://prettier.io/) - **The Code Formatter** 👏\n* [Husky](https://typicode.github.io/husky/#/) - **The Pre-commit Hooks** 🪝\n* [Lint Staged]() - **The Pre-commit Hooks** 🦚\n* [EditorConfig](https://editorconfig.org/) - **The Code Style Enforcer** 😎\n\n\n### **External Libraries 📚**\n* [Formik](https://formik.org/) - **The Form Validation Library** 🙏\n* [Yup](https://github.com/jquense/yup) - **The Form Validation Schema Builder** 🏛️\n* [Framer Motion](https://www.framer.com/motion/) - **The Animation Library** 😍\n* [Swiper](https://swiperjs.com/) - **The Slider Library** 🛝\n* [React Infinite Scroll Component](https://github.com/ankeetmaini/react-infinite-scroll-component) - **The Infinite Scroll Library** ♾️\n* [React Zoom Pan Pinch](https://github.com/BetterTyped/react-zoom-pan-pinch) - **The Image Zoom Library** 🔍\n* [Async Mutex](https://github.com/DirtyHairy/async-mutex#readme) - **The Async Mutex Library** 🤖\n* [React Star Rating Component](https://github.com/raymon-zhang/react-star-rate) - **The Star Rating Component** ⭐\n\n### **Design 🎨**\n* [Figma](https://www.figma.com/) - **The Design Tool** 🎨\n* [Project Design](https://www.figma.com/file/rYRBs7GD0vDQDjgjU0n972/eCommerce-Application-%F0%9F%8C%90?type=design\u0026node-id=0%3A1\u0026mode=design\u0026t=asbvxijfRHlGg8Uz-1) - **The Project Design** 😉\n![img_9](https://github.com/Quiddlee/eCommerce-Application/assets/114234698/0d1edaa7-1eb5-4fb2-ad19-1589037968b9)\n\n### **Git Methodology**\n* [Git Flow](https://datasift.github.io/gitflow/IntroducingGitFlow.html) - **The Git Flow** 🌊\n\n### **Architecture 🏛️**\n* [Feature Sliced Design](https://feature-sliced.design/) - **The Architecture** 🏛️\n\n### **API 📡**\n* [Commercetools](https://docs.commercetools.com/) - **The API** 🦖\n\n![img_4](https://github.com/Quiddlee/eCommerce-Application/assets/114234698/8b582001-a67d-4d09-b8a7-2ebea68d542b)\n\n### **CI/CD 🚀**\n* [GitHub Actions](https://pages.github.com/) - **The CI/CD** 🕊️\n\n![img_5](https://github.com/Quiddlee/eCommerce-Application/assets/114234698/84db0b98-fd9d-4717-a1d3-14919ca63a46)\n\n### **Project Management 📈**\n* [GitHub Projects](https://docs.github.com/en/issues/planning-and-tracking-with-projects/learning-about-projects/about-projects) - **The Project Management Tool** 📊\n\n![img_6](https://github.com/Quiddlee/eCommerce-Application/assets/114234698/7cb7743d-2a30-4d68-8c19-2d539e0821c4)\n![img_1](https://github.com/Quiddlee/eCommerce-Application/assets/114234698/0082f31f-26fe-4458-9f6b-fcfcc5f079eb)\n![img_8](https://github.com/Quiddlee/eCommerce-Application/assets/114234698/2dca6b9b-e2b1-4df2-80ab-f53aff0ccd8a)\n\n### **Communication 📣**\n* [Discord](https://discord.com/) - **The 3xWeek Meeting Communication Tool** 🗣️\n* [Telegram](https://web.telegram.org/) - **The Main Chatting Communication Tool** 💬\n\n### **Project planing 🦍**\n* [Lucidchart](https://www.lucidchart.com/) - **The Project planing Tool** 🧠\n![eCommerce-Application](https://github.com/Quiddlee/eCommerce-Application/assets/114234698/5749689e-e893-4359-ae15-15bf3cf968dd)\n\n# Core Development Team 👨‍💻\n\n### **Bohdan Shcherbyna** - **Front-end Developer / Team Lead** 🦁\n\n\u003cimg height=\"400px\" src=\"src/assets/img/Bogdan.jpg\"\u003e\n\n### Contribution 🪄:\n* Working with the API 🌐\n* Managing the Redux store 🏪\n* Animations 🦕\n* UI/UX Design 🍭\n* Code review 🔫\n* Testing 🧪\n* Deployment 🚀\n* Documentation 📃\n* CI/CD ✨\n\n### Contact 👋:\n* Email - ```bogdanscherbinadev@gmail.com``` 📬\n* Linkedin - [Bohdan Shcherbyna](https://www.linkedin.com/in/quiddle/) ✒️\n* Telegram - [@Quiddle](https://t.me/quiddle) 📱\n* GitHub - [Quiddlee](https://github.com/Quiddlee) 🦉\n\n#\n\n### **Oleksii Drohachov** - **Front-end Developer** 🦈\n\n\u003cimg height=\"400px\" src=\"src/assets/img/Oleksii.jpg\"\u003e\n\n### Contribution 🪄:\n* Managing the app router 🛖\n* Code review 🔫\n* Documentation 📃\n* Working with CommerceTools data 💀\n* Managing app products 💎\n* Fully implement user profile page 💪\n* UI layout 🦥\n* Project setup 💫\n* Working with the API 🩺\n\n### Contact 👋:\n* Email - ```asdrogachev@gmail.com``` 📬\n* Linkedin - [Oleksii Drohachov](https://www.linkedin.com/in/oleksii-drohachov-b127a9245/) ✒️\n* Telegram - [@Tedzury](https://t.me/tedzury) 📱\n* GutHub - [Tedzury](https://github.com/Tedzury) 🦉\n\n#\n\n### **Harry Holubiev** - **Front-end Developer** 🐲\n\n\u003cimg height=\"400px\" src=\"src/assets/img/Harry.jpg\"\u003e\n\n### Contribution 🪄:\n* Designed product card 🎴\n* Product page 📄\n* Logo and animations 🍣\n* implemented some features in Cart component 🛒\n* Managing the app router 🛖\n* Code review 🔫\n* Documentation 📃\n* UI Layout 🦥\n* Working with the API 🪄\n\n### Contact 👋:\n* Email - ```queharambe@gmail.com``` 📬\n* GitHub - [barrydilan](https://github.com/barrydilan) 🦉\n\n# Adding products data to commerce tools 🦩:\nHere you can find detailed instructions on how to add products data to commercetools 🕵️. To add data with products in commercetools we prepared [fully setted up repo](https://github.com/Tedzury/commercetools-sushisushi-data) for you 🫂.\n\nIf you want exactly the same products as we have 😏:\n* You need to follow all the [Installation and Preparation](#Installation And Preparation) steps. ⛔\n* Aaand type a few 🤏 commands into the terminal to upload all the data into your commercetools account! 🤩\n\n\nDetailed instructions will be provided in further reading.\nNevertheless, feel free to modify data in any possible way you want 🤝. Main steps and cornerstones will be covered in further reading. So, let's proceed into detailed instructions. ⏩\n\n# Step-by-step guide on how to add your own products data to commercetools 😇\n\nTo add your own products data to commercetools you need to follow next steps 🦝:\n\n* Clone [example repo](https://github.com/Tedzury/commercetools-sushisushi-data) into your computer. 😶‍🌫️\n\n* Register your account at commercetools.\n\n* Go to ```Settings \u003e Developer settings \u003e Create new API client \u003e Select predefined Admin scope \u003e Create API client```\n\n* **⚠️ !important step ⚠️** Scroll to bottom of web page, there will be **select input** 👇 with suggested options for downloading environment variables.\n\n* Pick option to download in format ```.env``` file. **Don't close this window 🚨 until you download all the files needed**, info is shown only **once** 😱 till you won't close the window 🍃.\n\n\n* After downloading 📩, insert downloaded ```.env``` file into your cloned repo from first step. Remove 🧹 suggested name from this file, so there is only left ```.env``` in file name. More detailed info with pictures is available at [original sunrisedata](https://github.com/commercetools/commercetools-sunrise-data) 💨\n* **Open terminal** 🧑‍💻 inside the **root folder** of the cloned repo and type next instructions: ```npm run clean:categories \u0026\u0026 npm run import:categories \u0026\u0026 npm run clean:products \u0026\u0026 npm run import:products```.\n\nAnd that all! 😊 That simple, following this guide allows you to fully imitate our products data, that we used in our project. 😉\n\n# Remarks and additional info 📢:\n\nAnd here will be some clues to add your own products into commerce tools 🧩.\n\nIn our project we use very limited info and options for our products 🤐. Commercetools provides much more larger management for products 🍀, categories, customers, prices, taxes, supply channels and so on 🤯, but in our case we ain't needed so much options 🧟‍♂️, so we used as little of it, as possible. In fact, we use only 2 minimal options to clean and then upload categories and products into api 😅.\n\n**4 main files** from cloned repo take part in this process: ```categories.csv, product-export-template.csv, product-type.json and products.csv``` 🫠.\n\n1. In the ```categories.csv``` file you describe the categories you want to import and their hierarchy 🦁.\n\n2. Then, in ```product-export-template.csv``` you describe template for imported products 🏛️, **exactly what info or fields must be in every product description**.\n\n3. ```product-type.json``` describes every non-standard field for product in details 🫣.\n\n4. And finally 🙂 in ```products.csv``` **you describe each of your product, that pattern must follow the** ```product-export-template pattern```.\n\n# **Important thing** 🚨:\neach product occupies his own line in ```.csv``` file(!) ⚠️. In order to provide photos for products we created **separate repo** 🦥 to store the photos, and in your products data we provide only links to the photos 📸.\n\nAlso in repo you can find ```SushiSushi menu.xlsx``` file 🍣. It contains exactly the same data as ```products.csv``` file, BUT it's much easier 🥵 to edit data in ```xlsx``` file, then in ```csv``` file 💀.\n\nEverything in this file is already set upped for comfort editing of products 😊. If you want to edit products data: feel free to do it ✌️. You can change any data you want, just **make sure** it is suited for ```csv``` file 👌.\n\n# How it works 🤔:\nEach cell in product row is concatenated and separated with comma 😲. Then this concatenated rows are concatenated into one line in one cell at the bottom of the file 🤯.\n\nJust copy paste the cell content into ```products.csv``` file. Make sure, that after copying the data - you separated each product into own line in ```.csv``` file 🦉, it's **critical point** 👮.\n\nOne more **critical point** - make sure that after ```copy/paste``` you left the ```header``` row at ```products.csv``` file 🫡.\n\nThat is all you need to know about editing the product data for our project! To know more you should deep dive 🤿 into commercetools docs, be observant 🔭, lucky 🍀 and ready to struggle 🫠.\n\n# License 📜\n\nThis project is licensed under the MIT License 🥷.\n\n# Acknowledgments 🙏\n\nWe want to thank [RS-School](https://rs.school/) community 🥰. \u003cbr\u003e\nAnd especially our mentor, [Andrej Podlubnyj](https://github.com/andron13) for his help and support ❤️.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fquiddlee%2Fecommerce-application","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fquiddlee%2Fecommerce-application","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fquiddlee%2Fecommerce-application/lists"}