🍣 SushiSushi — eCommerce-Application

RS-School 🦥 eCommerce-Application. Stage 2 Final Task RS2023Q1 🧙‍
️SushiSushi - Is not just your regular food delivery; it's a culinary journey to Japan's finest flavors, delivered to your doorstep 😉.

🏆🥳 One of the best RS2023Q1 graduation projects!

Task description - Task description 📝
Deployed project preview - SushiSushi 👀

Getting Started 🚀

To run our project locally, you would have to download zip file with our repository or clone it to your computer. ✨

Setup and Running ⚠️

What things do you need to do in order to run our project locally? 🤔

• Use node 18.x or higher. ⚡
• Installed .git on your computer. ✌️
• Code Editor of your choice. 📝
• Installed npm. 📦
• Created commercetools account. 🌐

Installation And Preparation ⬇️

First make sure you have all the things listed in the previous section. Then clone our repository to your computer: 👌

git clone git@github.com:Quiddlee/eCommerce-Application.git

or download zip file manually with our repository 😏.

Navigate into project folder and run 📦:

npm install

Create .env file in the root of the project and add your commercetools credentials 🔥.

You can find .env.example as an example file in the project root or follow the lines below 🐺:

VITE_PROJECT_KEY=PROJECT_KEY
VITE_CLIENT_SECRET=CLIENT_SECRET
VITE_CLIENT_ID=CLIENT_ID
VITE_AUTH_SERVICE_URL=AUTH_SERVICE_URL
VITE_API_HOST_URL=API_HOST_URL
VITE_DEFAULT_CUSTOMER_SCOPE=DEFAULT_CUSTOMER_SCOPE

Follow the step by step guide on how to add your own products data to commercetools 🦩.

Finally run a development server: 🤩

npm run dev

Aaaaand you're done! 🎉🥳

Available Scripts 🥑

Here you can find all the scripts that are available in our project. 🦚

Linting and Prettifying happens automatically when files are staged 😎, however you can do it manually with absolutely no problems:

Lint the App with ESlint: ✔️

npm run lint

Format the App with Prettier: 🧹

npm run format

Type check the App with TypeScript: 📝

npm run type-check

Install Husky to enable pre-commit hooks: 🎣

npm run prepare

Run unit-tests with Vitest: 🧪

npm run test

Build project for production: 🏗️

npm run build

Preview the production build locally: 👀

npm run preview

Features 🚀

• Browse the world of royal asian flavour meals! 😃🍣

• Choose the meal you like the most 😋🍴

• Fill your shopping cart 🛍️🛒

• Search for your lovely meals! 🔍

• Filter the results to make easier your search 😊

• Sign up your account! 🌌

• Change your data at any time 👌

• Beautiful Mobile App, and much much more features, try by yourself 😉!

Technology Stack ⚙️

Developing 😍

• React.js - The web framework used ⚛️
• Redux / RTK Query - The State Management Tool and Data Fetching Library 🧰
• React Router Dom - The Router 📍
• TypeScript - The Language 💖
• Tailwind - The CSS Framework 🍃
• Vite - The Bundler 📦
• Postman - The API Testing Tool 📬

Code Quality 🧹

• Vitest - The Test Runner 🧪
• Testing Library - The Testing Framework 🫂
• ESLint — Air-bnb base - The Linter 🔔
• Prettier - The Code Formatter 👏
• Husky - The Pre-commit Hooks 🪝
• Lint Staged - The Pre-commit Hooks 🦚
• EditorConfig - The Code Style Enforcer 😎

External Libraries 📚

• Formik - The Form Validation Library 🙏
• Yup - The Form Validation Schema Builder 🏛️
• Framer Motion - The Animation Library 😍
• Swiper - The Slider Library 🛝
• React Infinite Scroll Component - The Infinite Scroll Library ♾️
• React Zoom Pan Pinch - The Image Zoom Library 🔍
• Async Mutex - The Async Mutex Library 🤖
• React Star Rating Component - The Star Rating Component ⭐

Design 🎨

• Figma - The Design Tool 🎨
• Project Design - The Project Design 😉

Git Methodology

• Git Flow - The Git Flow 🌊

Architecture 🏛️

• Feature Sliced Design - The Architecture 🏛️

API 📡

• Commercetools - The API 🦖

CI/CD 🚀

• GitHub Actions - The CI/CD 🕊️

Project Management 📈

• GitHub Projects - The Project Management Tool 📊

Communication 📣

• Discord - The 3xWeek Meeting Communication Tool 🗣️
• Telegram - The Main Chatting Communication Tool 💬

Project planing 🦍

• Lucidchart - The Project planing Tool 🧠

Core Development Team 👨‍💻

Bohdan Shcherbyna - Front-end Developer / Team Lead 🦁

Contribution 🪄:

• Working with the API 🌐
• Managing the Redux store 🏪
• Animations 🦕
• UI/UX Design 🍭
• Code review 🔫
• Testing 🧪
• Deployment 🚀
• Documentation 📃
• CI/CD ✨

Contact 👋:

• Email - bogdanscherbinadev@gmail.com 📬
• Linkedin - Bohdan Shcherbyna ✒️
• Telegram - @Quiddle 📱
• GitHub - Quiddlee 🦉

Oleksii Drohachov - Front-end Developer 🦈

Contribution 🪄:

• Managing the app router 🛖
• Code review 🔫
• Documentation 📃
• Working with CommerceTools data 💀
• Managing app products 💎
• Fully implement user profile page 💪
• UI layout 🦥
• Project setup 💫
• Working with the API 🩺

Contact 👋:

• Email - asdrogachev@gmail.com 📬
• Linkedin - Oleksii Drohachov ✒️
• Telegram - @Tedzury 📱
• GutHub - Tedzury 🦉

Harry Holubiev - Front-end Developer 🐲

Contribution 🪄:

• Designed product card 🎴
• Product page 📄
• Logo and animations 🍣
• implemented some features in Cart component 🛒
• Managing the app router 🛖
• Code review 🔫
• Documentation 📃
• UI Layout 🦥
• Working with the API 🪄

Contact 👋:

• Email - queharambe@gmail.com 📬
• GitHub - barrydilan 🦉

Adding products data to commerce tools 🦩:

Here 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 for you 🫂.

If you want exactly the same products as we have 😏:

• You need to follow all the [Installation and Preparation](#Installation And Preparation) steps. ⛔
• Aaand type a few 🤏 commands into the terminal to upload all the data into your commercetools account! 🤩

Detailed instructions will be provided in further reading. Nevertheless, 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. ⏩

Step-by-step guide on how to add your own products data to commercetools 😇

To add your own products data to commercetools you need to follow next steps 🦝:

• Clone example repo into your computer. 😶‍🌫️

• Register your account at commercetools.

• Go to Settings > Developer settings > Create new API client > Select predefined Admin scope > Create API client

• ⚠️ !important step ⚠️ Scroll to bottom of web page, there will be select input 👇 with suggested options for downloading environment variables.

• 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 🍃.

• 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 💨

• Open terminal 🧑‍💻 inside the root folder of the cloned repo and type next instructions: npm run clean:categories && npm run import:categories && npm run clean:products && npm run import:products.

And that all! 😊 That simple, following this guide allows you to fully imitate our products data, that we used in our project. 😉

Remarks and additional info 📢:

And here will be some clues to add your own products into commerce tools 🧩.

In 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 😅.

4 main files from cloned repo take part in this process: categories.csv, product-export-template.csv, product-type.json and products.csv 🫠.

1. In the categories.csv file you describe the categories you want to import and their hierarchy 🦁.

2. Then, in product-export-template.csv you describe template for imported products 🏛️, exactly what info or fields must be in every product description.

3. product-type.json describes every non-standard field for product in details 🫣.

4. And finally 🙂 in products.csv you describe each of your product, that pattern must follow the product-export-template pattern.

Important thing 🚨:

each 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 📸.

Also 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 💀.

Everything 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 👌.

How it works 🤔:

Each 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 🤯.

Just 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 👮.

One more critical point - make sure that after copy/paste you left the header row at products.csv file 🫡.

That 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 🫠.

License 📜

This project is licensed under the MIT License 🥷.

Acknowledgments 🙏

We want to thank RS-School community 🥰.
And especially our mentor, Andrej Podlubnyj for his help and support ❤️.