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 👀
To run our project locally, you would have to download zip file with our repository or clone it to your computer. ✨
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. 🌐
First make sure you have all the things listed in the previous section. Then clone our repository to your computer: 👌
git clone [email protected]: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! 🎉🥳
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
- 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 😉!
- 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 📬
- 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 😎
- 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 ⭐
- Figma - The Design Tool 🎨
- Project Design - The Project Design 😉
- Git Flow - The Git Flow 🌊
- Feature Sliced Design - The Architecture 🏛️
- Commercetools - The API 🦖
- GitHub Actions - The CI/CD 🕊️
- GitHub Projects - The Project Management Tool 📊
- Discord - The 3xWeek Meeting Communication Tool 🗣️
- Telegram - The Main Chatting Communication Tool 💬
- Lucidchart - The Project planing Tool 🧠
- Working with the API 🌐
- Managing the Redux store 🏪
- Animations 🦕
- UI/UX Design 🍭
- Code review 🔫
- Testing 🧪
- Deployment 🚀
- Documentation 📃
- CI/CD ✨
- Email -
[email protected]
📬 - Linkedin - Bohdan Shcherbyna ✒️
- Telegram - @Quiddle 📱
- GitHub - Quiddlee 🦉
- 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 🩺
- Email -
[email protected]
📬 - Linkedin - Oleksii Drohachov ✒️
- Telegram - @Tedzury 📱
- GutHub - Tedzury 🦉
- 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 🪄
- Email -
[email protected]
📬 - GitHub - barrydilan 🦉
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. ⏩
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. 😉
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
🫠.
-
In the
categories.csv
file you describe the categories you want to import and their hierarchy 🦁. -
Then, in
product-export-template.csv
you describe template for imported products 🏛️, exactly what info or fields must be in every product description. -
product-type.json
describes every non-standard field for product in details 🫣. -
And finally 🙂 in
products.csv
you describe each of your product, that pattern must follow theproduct-export-template pattern
.
each product occupies his own line in .csv
file(!)
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 👌.
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 🫠.
This project is licensed under the MIT License 🥷.
We want to thank RS-School community 🥰.
And especially our mentor, Andrej Podlubnyj for his help and support ❤️.