Greenshop 🌿

General Overview 🛍️

Welcome to Greenshop, your digital haven for all things green! 🪴

• Our Mission 🌸
• Key Features 🗝️
• Technical Stack 💻
• How to Run the Project Locally ⚙️
• Available Scripts 📑
• Contact us 📩

Our Mission 🌸

At Greenshop, we're on a mission to cultivate a greener, more vibrant world, one plant at a time. Our curated collection features a diverse array of potted plants, seeds, soil, and accessories, meticulously selected to cater to the needs and desires of both novice gardeners and seasoned green thumbs alike. Whether you're looking to transform your living space into a lush oasis or embark on a journey of cultivating your own botanical wonders, Greenshop has everything you need to bring your green dreams to life.

Our modern and minimalist website offers a sleek and intuitive shopping experience, designed to delight and inspire. From our clean and uncluttered design to our seamless navigation and user-friendly interface, we're committed to making your shopping experience as effortless and enjoyable as possible.

Key Features of Greenshop Include 🗝️

🔎 Comprehensive Product Selection: Explore our extensive catalog of potted plants, seeds, soil, and gardening essentials, handpicked to ensure the highest quality and variety.

🎨 Seamless UI/UX: Enjoy a cohesive and engaging user experience with a beautifully crafted interface that prioritizes ease of use and accessibility.

🧭 User-friendly Navigation: Our intuitive navigation system makes it easy for you to find the plants, seeds, soil, and accessories you need.

🧩 Elegance and Functionality: Our intuitive design and thoughtful features make it easy to shop for plants, seeds, soil, and accessories.

🖼️ Responsive Design: Whether you're browsing on a desktop, tablet, or smartphone, our website adapts seamlessly to provide a visually stunning and immersive experience on any device.

Technical Stack 💻

in our project we used the following technologies:

• Frontend: Utilizes Typescript, HTML, SASS, and modern-normalize to craft a dynamic and engaging user interface 🎨
• Backend: Supported by CommerceTools, a leading provider of commerce solutions, offering a robust and scalable platform for creating immersive digital commerce experiences 🌐
• CI/CD: Integrates GitHub Actions and Netlify for continuous integration and deployment 🚀
• Deployment: Hosted on Netlify, enabling efficient and hassle-free deployment of the application 🌟
• Code Quality: Ensured code quality through rigorous checks by Husky, Prettier, ESLint, Perfectionist, Stylelint, SonarLint, and EditorConfig, maintaining consistency and best practices throughout the codebase 🐶
• Testing: Thorough testing conducted with Vitest, Mock Service Worker, and Sinon.js, ensuring the reliability and robustness of the application's functionalities ⚡
• Bundling: Employs Vite as the bundler, ensuring swift development server startup time and seamless module replacement 🌳
• Additional Features and Libraries: Plop for generating components from a template, Hammer.js for touch interactions, js-cookie for cookie management, noUiSlider for range sliders, Swiper for image carousel, and postcode-validator for address validation 📦
• Project's Architecture: Carefully designed and implemented Feature-Sliced Design for efficient, scalable, and maintainable development 🌍

How to Run the Project Locally ⚙️

to run the project locally, you can follow the following steps:

• Clone the repository: git clone https://github.com/stardustmeg/greenshop.git
• Navigate to the project directory: cd greenshop
• Install dependencies: npm install
• Run the project: npm run dev

Available Scripts 📑

you can run the following scripts in the project directory:

• npm run dev: Initiates the Vite development server.
• npm run build: Transpiles TypeScript files using TypeScript compiler and builds the project using Vite.
• npm run preview: Launches a production server to preview the project built with Vite.
• npm run format: Applies code formatting using Prettier.
• npm run ci:format: Checks code formatting compliance using Prettier.
• npm run typecheck: Performs TypeScript type checking without emitting any files.
• npm run lint: Lints the codebase using ESLint.
• npm run lint:fix: Fixes linting errors automatically using ESLint for TypeScript files.
• npm run lint-styles: Lints SCSS stylesheets using Stylelint.
• npm run prepare: Sets up Husky for managing git hooks.
• npm run test: Runs tests using Vitest.
• npm run test-ui: Runs tests in the browser using Vitest.
• npm run coverage: Runs tests and generates a code coverage report using Vitest.
• npm run generate: Generates a new component using Plop.

Contact us 📩

• 🧙‍♀️ Margarita Golubeva (my GitHub: stardustmeg)
• 🧙 Maxim Zabaluev (my GitHub: Kleostro)
• 🧙‍♀️ Yuliya Kursevich (my GitHub: YulikK)