Vc Theme B2b Vue
B2B Mercury theme is a fresh look on the field of eCommerce solutions. This is a place where common B2B and B2C scenarios are combined with the most bleeding edge technologies to deliver blazing fast and fully functional solution. It implements common business use-cases needed for a vast majority...
Overview:
The B2B Mercury theme for VirtoCommerce Storefront is a cutting-edge eCommerce solution that combines B2B and B2C scenarios with the latest technologies to deliver a fast and fully functional solution. It provides common business use-cases and is designed to be easily customizable to fit different project goals. The theme utilizes Vue3, Typescript, TailwindCSS, Husky, ESLint, Prettier, Vite, and GraphQL to ensure efficient development and high performance.
Features:
- Development Performance: Enroll starter theme in seconds and modify code with hot module reloading (HMR) for fast development.
- Client Performance: Aim to achieve and maintain green metrics provided by Google PageSpeed Insights.
- Decoupled Structure: Presentation layer is decoupled from the backend, and shared logic is decoupled from visual components, allowing developers to focus on specific tasks without massive code manipulations.
- Atomic Design Pattern: Theme UI is based on the Atomic Design Pattern, with reusability in mind, organized into atoms, molecules, organisms, pages, and shared components.
- Simple Styling and Theme Customization: Utilizes TailwindCSS for easy and convenient CSS usage, requiring minimal code and providing highly customizable framework features.
- Alignment with VirtoCommerce Storefront: Fully aligned with the VirtoCommerce Storefront to support common B2B and B2C scenarios processed by the VirtoCommerce Platform.
- Fully Responsive: Designed to work seamlessly on various devices, from desktops to mobile phones, focusing on both UI and UX.
Installation:
To install the B2B Mercury theme, follow these steps:
- Install the latest version of vc-platform 3.x.
- Deploy vc-platform on either Windows or Linux.
- Install the vc-module-experience-api module.
- Install the vc-module-profile-experience-api module.
- Install Node v.16.X.
- Install the yarn package manager.
- Clone the vc-storefront repository from https://github.com/VirtoCommerce/vc-storefront to a local folder.
- Open the appsettings.json file in a text editor.
- Modify the Endpoint section cha...
Summary:
The B2B Mercury theme for VirtoCommerce Storefront is a powerful eCommerce solution that combines B2B and B2C scenarios with cutting-edge technologies. It offers fast development, high client performance, and a decoupled structure that enhances code reusability. With the use of the Atomic Design Pattern and TailwindCSS, styling and theme customization become simple and convenient. The theme is fully aligned with VirtoCommerce Storefront and is fully responsive across various devices. By following the installation guide, users can easily set up the theme and customize it to fit their project goals.
- React
React is a widely used JavaScript library for building user interfaces and single-page applications. It follows a component-based architecture and uses a virtual DOM to efficiently update and render UI components
- Vite
Vite is a build tool that aims to provide a faster and leaner development experience for modern web projects
- Vue
Vue.js is a lightweight and flexible JavaScript framework that allows developers to easily build dynamic and reactive user interfaces. Its intuitive syntax, modular architecture, and focus on performance make it a popular choice for modern web development.
- SCSS
SCSS is a preprocessor scripting language that extends the capabilities of CSS by adding features such as variables, nesting, and mixins. It allows developers to write more efficient and maintainable CSS code, and helps to streamline the development process by reducing repetition and increasing reusability.
- Tailwind
Tailwind CSS is a utility-first CSS framework that provides pre-defined classes for building responsive and customizable user interfaces.
- Ecommerce
Ecommerce websites sell products or services to customers through an online storefront. These websites typically include features such as product listings, shopping carts, payment processing, and order management tools.
- Apollo
Apollo is an open-source platform for building GraphQL APIs that connects with any data source. It provides a powerful set of tools and features for developers, including client and server-side caching, real-time data synchronization, and a seamless integration with popular frontend frameworks.
- Eslint
ESLint is a linter for JavaScript that analyzes code to detect and report on potential problems and errors, as well as enforce consistent code style and best practices, helping developers to write cleaner, more maintainable code.
- Graphql
A website that uses GraphQL as a query language to manage data fetching and state management. This includes features such as a strongly typed schema, client-side caching, and declarative data fetching to streamline data management and optimize website performance.
- Postcss
PostCSS is a popular open-source tool that enables web developers to transform CSS styles with JavaScript plugins. It allows for efficient processing of CSS styles, from applying vendor prefixes to improving browser compatibility, ultimately resulting in cleaner, faster, and more maintainable code.
- Storybook
Storybook is a tool for developing and testing UI components in isolation. It provides a sandbox environment where you can experiment with different props and states to see how your component responds.
- Typescript
TypeScript is a superset of JavaScript, providing optional static typing, classes, interfaces, and other features that help developers write more maintainable and scalable code. TypeScript's static typing system can catch errors at compile-time, making it easier to build and maintain large applications.