<h2>Overview:</h2>
<p>The JAMStack E-Commerce Example is a showcase of an e-commerce website built using the JAMStack architecture. It utilizes Nuxt.js as the web application framework and Salesforce as the data storage for products, orders, and user authentication. This example demonstrates key features such as pre-generated static HTML files, pre-fetched product content, authentication via Salesforce, individual user content, client-side shopping cart, order transmission to Salesforce, and delegated logout via Salesforce. The JAMStack architecture allows for easier development and deployment of new features and content.</p>
<h2>Features:</h2>
<ul>
<li><strong>Pre-Generated Static HTML Files</strong>: All pages of the website, including product detail pages, are pre-generated at build time and can be served by any web server or CDN.</li>
<li><strong>Pre-Fetched Product Content</strong>: Product content is pre-fetched from Salesforce using a Node.js script and stored locally as JSON files, improving performance and reducing reliance on the Salesforce REST API.</li>
<li><strong>Authentication via Salesforce</strong>: Visitors can authenticate with their Salesforce customer community user using the OpenID Connect protocol.</li>
<li><strong>Individual User Content</strong>: Authenticated visitors can view their own user profile, displaying their Account data from Salesforce. The content is fetched via a dedicated API server.</li>
<li><strong>Client-Side Shopping Cart</strong>: Items added to the shopping cart are stored client-side in the browser's local storage, allowing visitors to close the browser and restore their cart content upon returning.</li>
<li><strong>Order Transmission to Salesforce</strong>: Authenticated visitors can place orders by sending their shopping cart to the API server, which converts the cart data into a proper Salesforce order and transmits the records via the Salesforce REST API.</li>
<li><strong>Delegated Logout via Salesforce</strong>: The website offers a delegated logout option, redirecting visitors to a special logout page in the Lightning Community for seamless logout from Salesforce.</li>
</ul>
<h3>Prerequisites:</h3>
<ol>
<li>Ensure you have Nuxt.js and Salesforce accounts set up.</li>
</ol>
<h3>Setting Up Salesforce:</h3>
<ol>
<li>Set up the required Salesforce metadata.</li>
<li>Configure the test user and profile in Salesforce.</li>
<li>Install the Salesforce metadata by running the provided script.</li>
</ol>
<h3>Setting Up the Integration User:</h3>
<ol>
<li>Set up the integration user in Salesforce.</li>
<li>Grant necessary permissions to the integration user.</li>
</ol>
<h3>Setting Up the Lightning Community:</h3>
<ol>
<li>Set up the Lightning Community in Salesforce.</li>
<li>Configure the Connected App in Salesforce.</li>
</ol>
<h3>Running the Content Update Script:</h3>
<ol>
<li>Execute the Node.js script to pre-fetch product content from Salesforce and store it locally as JSON files.</li>
</ol>
<h3>Running the API Server:</h3>
<ol>
<li>Run the API server to handle requests and transmit orders to Salesforce.</li>
</ol>
<h3>Running the Web Application:</h3>
<ol>
<li>Run the web application to showcase the JAMStack E-Commerce Example.</li>
</ol>
<h2>Summary:</h2>
<p>The JAMStack E-Commerce Example demonstrates the power and benefits of building an e-commerce website using the JAMStack architecture, Nuxt.js, and Salesforce. It showcases key features such as pre-generated static HTML files, pre-fetched product content, authentication, individual user content, client-side shopping cart, order transmission to Salesforce, and delegated logout. By following the installation guide, developers can set up and explore this example to understand how to leverage the JAMStack architecture for their own e-commerce projects.</p>


<h2>Overview</h2>
<p>The Next.js App Router Template offers a comprehensive solution for developers looking to create fullstack applications with the latest Next.js innovations. Leveraging the power of the App Router and Server Components, it paves the way for dynamic and efficient web applications. Ideal for both seasoned developers and newcomers, this template seamlessly integrates essential features for modern web development.</p>
<p>By prioritizing type safety and ease of use, this template addresses key challenges in building robust applications. Internationalization, user authentication, database persistence, and form validation capabilities are just a few highlights that make this template an attractive choice for developers aiming to deliver high-quality web products.</p>
<h2>Features</h2>
<ul>
<li><strong>App Router &#x26; Server Components</strong>: Built on Next.js's new App Router capabilities, enabling optimized routing and server-side rendering.</li>
<li><strong>Internationalization (i18n)</strong>: Easily support multiple languages with next-intl, including compatibility with Server Components.</li>
<li><strong>Type-safe Translation Keys</strong>: Utilize type-safe keys for translation messages, enhancing code reliability and reducing runtime errors.</li>
<li><strong>Client-side Data Fetching</strong>: Achieve end-to-end type safety with a combination of tRPC, superjson, and React Query for efficient data handling.</li>
<li><strong>Advanced Form Validation</strong>: Employ React Hook Form in conjunction with Zod schemas to implement robust client-side form validation.</li>
<li><strong>Drizzle ORM for Data Persistence</strong>: Manage database migrations seamlessly and ensure data integrity with Drizzle ORM.</li>
<li><strong>NextAuth.js Authentication</strong>: Simplify user authentication with NextAuth.js, backed by Drizzle ORM for secure session storage.</li>
<li><strong>Component Testing</strong>: Leverage Vitest and React Testing Library to conduct comprehensive testing of components, ensuring application stability.</li>
</ul>


<h2>Overview</h2>
<p>The Salesforce Community TailwindCSS Example serves as a practical guide for integrating the TailwindCSS library into Salesforce Lightning Communities. This project offers a straightforward approach for customizing the visual design of your community, allowing developers to leverage the utility-first CSS framework to enhance aesthetics and usability. In a world where user experience plays an essential role in customer engagement, this example empowers you to build a visually compelling and responsive community interface.</p>
<p>By utilizing this example project, you can explore the potential of TailwindCSS within your Salesforce ecosystem, giving your community a modern touch while maintaining the robust features Salesforce is known for. Whether you're a seasoned developer or just starting, this project provides clear instructions to implement TailwindCSS effectively.</p>
<h2>Features</h2>
<ul>
<li><strong>Custom Theme Layout</strong>: Integrate TailwindCSS globally with a custom theme layout and static resources tailored for your Salesforce community.</li>
<li><strong>Lightning Web Components</strong>: Utilize custom Lightning Web Components specifically designed to optimize basic page sections with TailwindCSS.</li>
<li><strong>Build Step Support</strong>: Implement a build step that facilitates TailwindCSS configuration and generates an optimized CSS file for improved performance.</li>
<li><strong>CSS Utility Classes</strong>: Access and use utility classes within both the theme layout and web components to achieve desirable styling effortlessly.</li>
<li><strong>Override Standard Styles</strong>: Easily override the styling of standard Salesforce components by employing relevant CSS utility classes for greater customization.</li>
<li><strong>Accessible Theme Settings</strong>: Ensure community theme settings regarding colors and fonts are readily available as utility classes, simplifying design choices.</li>
<li><strong>Utilize Experience Builder</strong>: Leverage the Experience Builder to customize layout components and integrate TailwindCSS web components for a tailored user experience.</li>
<li><strong>CSS Optimization</strong>: Build an optimized CSS file that enhances loading speed and efficiency, providing a smoother experience for community members.</li>
</ul>


<h2>Overview</h2>
<p>The T3 Commerce Template is an innovative project framework designed for headless commerce, seamlessly incorporating the T3 stack for the storefront and Medusa.js for the backend. This template is particularly suited for developers looking to create robust and dynamic e-commerce applications without the constraints of traditional frameworks. It serves as a foundation for building scalable online stores while providing the flexibility and tools necessary to customize functionality according to specific business needs.</p>
<p>With the T3 Commerce Template, developers can easily navigate the complexities of setting up both a storefront and backend. The clear setup instructions, combined with the support for internationalization and modern design elements, make it an appealing choice for anyone aiming to establish a sophisticated online presence.</p>
<h2>Features</h2>
<ul>
<li><strong>Headless Commerce Architecture</strong>: Utilizes T3 stack and Medusa.js, allowing full control over the frontend and backend integration.</li>
<li><strong>Quick Setup</strong>: Simple instructions for cloning the repository and installing dependencies streamline the development process.</li>
<li><strong>Next.js Storefront</strong>: Built on Create T3 App, ensuring a modern and responsive user experience for the storefront.</li>
<li><strong>Robust Authentication</strong>: Integrates Next-Auth with a custom provider, ensuring secure user sign-ins via the Medusa.js API.</li>
<li><strong>Internationalization Support</strong>: Supports multiple languages (English and German) through the next-i18next integration, enhancing accessibility for diverse user bases.</li>
<li><strong>Stylish Design</strong>: Uses TailwindCSS and daisyUI for attractive, customizable styling that aligns with contemporary design trends.</li>
<li><strong>Modular Code Structure</strong>: Fosters maintainability and scalability by organizing feature-specific components in designated folders.</li>
<li><strong>Vendor-agnostic Communication</strong>: Leverages service functions to create a seamless connection between the business model and backend APIs.</li>
</ul>


<h2>Overview</h2>
<p>The Vue.js 2 Component Library Template is an exceptional project template designed specifically for creating component libraries using Vue.js 2.7. It aims to streamline the development process by providing a well-structured framework that incorporates industry-standard tools and practices. Whether you are a seasoned developer or just starting, this template simplifies the setup and management of your component library, ensuring an efficient workflow from development to production.</p>
<p>By leveraging modern technologies and practices, this template offers a solid foundation for building robust and maintainable Vue.js components. With features like package management, testing frameworks, and accessibility checks integrated into the development cycle, it's a comprehensive toolkit for anyone looking to enhance their development experience and ensure high-quality outputs.</p>
<h2>Features</h2>
<ul>
<li><strong>PNPM for package management</strong>: Offers efficient handling of dependencies, ensuring faster installations and lower disk space usage.</li>
<li><strong>Vite for library build</strong>: Provides a lightning-fast build process, enhancing development speed with hot-module replacement and optimized production builds.</li>
<li><strong>Vitest and Vue Testing Library for unit testing</strong>: Facilitates robust testing practices to ensure that components work as intended, increasing reliability.</li>
<li><strong>Storybook for component presentation</strong>: Enables an interactive development environment to visualize and showcase your component library effectively.</li>
<li><strong>Rendering smoke tests for Storybook stories</strong>: Ensures that the essential functionality of your components is intact, providing confidence during development.</li>
<li><strong>Accessibility tests for Storybook stories</strong>: Helps in identifying accessibility issues early, making your components more inclusive for all users.</li>
<li><strong>TypeScript for static type checking</strong>: Enhances code quality by providing static type checking, minimizing runtime errors through better tooling.</li>
<li><strong>Prettier for code formatting</strong>: Automatically formats code to ensure consistency and improve readability across your project.</li>
</ul>


Georgwittberger

Jamstack Ecommerce Example

Next App Router Template

Salesforce Community Tailwindcss

T3 Commerce Template

Vue2 Library Template