next-enterprise
πΌ An enterprise-grade Next.js boilerplate for high-performance, maintainable apps. Packed with features like Tailwind CSS, TypeScript, ESLint, Prettier, testing tools, and more to accelerate your development.
Professional software vendor delivering innovative solutions on the Softono platform. Specialized in both open-source and proprietary software development.
πΌ An enterprise-grade Next.js boilerplate for high-performance, maintainable apps. Packed with features like Tailwind CSS, TypeScript, ESLint, Prettier, testing tools, and more to accelerate your development.
<br/> <p align="center"> <a href="https://github.com/Blazity/next-saas-starter" > <img src="https://i.imgur.com/jmc2Q1w.png" alt="Logo" width="49%"> </a> <a href="https://github.com/Blazity/next-saas-starter"> <img src="https://i.imgur.com/CxkjHhi.png" alt="Logo" width="49%"> </a> <h3 align="center">β¨ Free Next.js marketing website template for SaaS startups β¨</h3> <p align="center"> Everything you need to build a great landing page / marketing website for your startup. Great SEO metrics, Green WebVitals, π Performance, Clean & Pragmatic Codebase out of the box. <br/> <br/> <a href="https://next-saas-starter-ashy.vercel.app/">View Demo</a> . <a href="https://github.com/Blazity/next-saas-starter/issues">Report Bug</a> . <a href="https://github.com/Blazity/next-saas-starter/issues">Request Feature</a> </p> </p> <div align="center">    </div> <p align="center"><b>Created with :heart: at Blazity </b></p> <p align="center"><a href="https://blazity.com/">Blazity</a> is a group of Next.js/Jamstack/Headless experts. Contact us at <a href="mailto:[email protected]">[email protected]</a> if youβd like to talk about your project or just to have a chat with us</p> <a href="https://discord.gg/fyWtyNKmfX" style="width: 100%; display: flex; justify-content: center;"> <img src="https://discordapp.com/api/guilds/1111676875782234175/widget.png?style=banner2" alt="Blazity Discord Banner"/> </a> <br /> ## Table Of Contents - [Features](#-features) - [Getting Started](#-getting-started) - [One click deploy](#one-click-deploy) - [Built With](#-built-with) - [Contributing](#-contributing) - [Creating A Pull Request](#creating-a-pull-request) - [Acknowledgements](#-acknowledgements) - [Contributors](#-contributors) - [License](#-license) ## Features - β‘ **Next.js** - React framework for static rendering - **Best SEO setup** - Meta Tags, JSON-LD and Open Graph Tags - **[Tina CMS](https://tina.io/) integration** - local & (optional) production CMS - **Optimized for Web Vitals** - **Blog with MDX** - **Mailchimp Integration** - for newsletters - **Sendgrid Integration** - for sending emails - **Dark mode** - and customizable themes! - **No UI library** - just styled components, so you don't have to learn any new syntax - **One click deployment** - with Vercel or any other serverless deployment environment - **Eslint** - with Next.js's recommended settings and imports sorting rule - **Prettier** ## π€ Getting Started - Click `Use the template` or [this link](https://github.com/Blazity/next-saas-starter/generate) - Setup your [sendgrid](https://sendgrid.com/) API key and add it to environment variables (`SENDGRID_API_KEY` - `.env.local`) - Adjust the template to your needs (and checkout `env.ts` file) - Deploy the project on [Vercel](https://vercel.com/) **don't forget to add env variables** - _(optional)_ Create [Tina Cloud account](https://app.tina.io/), [a project](https://tina.io/docs/tina-cloud/) and fill these `NEXT_PUBLIC_ORGANIZATION_NAME`, `NEXT_PUBLIC_TINA_CLIENT_ID` env vars with proper values > Tina's Content API authenticates directly with GitHub removing the need for users to create GitHub accounts. Access is granted through the dashboard, allowing users to login directly through your site and begin editing! Any changes that are saved by your editors will be commited to the configured branch in your GitHub repository. - For more details [see the docs](https://tina.io/docs/tina-cloud/) ``` # run the dev mode $ yarn dev # run the prod mode yarn start # build the app yarn build ``` > Hint: To edit the blog pages go to [/admin](http://localhost:3000/admin) and navigate to a blog page to edit it. To exit editing mode navigate to [/admin/logout](http://localhost:3000/admin/logout) ## π One click deploy Clone the repository and one-click deploy to Vercel for free! [](https://vercel.com/new/git/external?repository-url=https://github.com/Blazity/next-saas-starter) Clone the repository and one-click deploy to Netlify for free! [](https://app.netlify.com/start/deploy?repository=https://github.com/Blazity/next-saas-starter) ## π§° Built With - Statically generated pages with [**Next.js** ](https://github.com/vercel/next.js) - [Styled components](https://github.com/styled-components/styled-components/) - [MDX](https://github.com/mdx-js/mdx) - [TypeScript](https://github.com/Microsoft/TypeScript) ## π€²π» Contributing Contributions are what make the open source community such an amazing place to be learn, inspire, and create. Any contributions you make are **greatly appreciated**. - If you have suggestions for adding or removing projects, feel free to [open an issue](https://github.com/Blazity/next-saas-starter/issues/new) to discuss it, or directly create a pull request after you edit the _README.md_ file with necessary changes. - Create individual PR for each suggestion. ### Creating A Pull Request 1. Fork the Project 2. Create your Feature Branch (`git checkout -b feature/AmazingFeature`) 3. Commit your Changes (`git commit -m 'Add some AmazingFeature'`) 4. Push to the Branch (`git push origin feature/AmazingFeature`) 5. Open a Pull Request ## π Acknowledgements Big thanks to authors of these libraries: - https://github.com/neg4n/next-api-og-image - generating open graph images - https://github.com/blazity/nextjs-color-mode - non-flickering dark mode - https://github.com/Brew-Brew/css-in-js-media - a convenient way of creating media queries ## Support If you're looking for help or simply want to share your thoughts about the project, we encourage you to join our Discord community. Here's the link: [https://blazity.com/discord](https://blazity.com/discord). It's a space where we exchange ideas and help one another. Everyone's input is appreciated, and we look forward to welcoming you. ## β¨ Contributors Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)): <!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section --> <!-- prettier-ignore-start --> <!-- markdownlint-disable --> <table> <tr> <td align="center"><a href="https://bstefanski.com/"><img src="https://avatars.githubusercontent.com/u/28964599?v=4?s=64" width="64px;" alt=""/><br /><sub><b>Bart Stefanski</b></sub></a><br /><a href="https://github.com/Blazity/next-saas-starter/commits?author=bmstefanski" title="Code">π»</a></td> <td align="center"><a href="https://github.com/ilasota"><img src="https://avatars.githubusercontent.com/u/34578189?v=4?s=64" width="64px;" alt=""/><br /><sub><b>Igor Lasota</b></sub></a><br /><a href="https://github.com/Blazity/next-saas-starter/commits?author=ilasota" title="Code">π»</a></td> <td align="center"><a href="https://github.com/jbryn"><img src="https://avatars.githubusercontent.com/u/52970664?v=4?s=64" width="64px;" alt=""/><br /><sub><b>Jan BryΕski</b></sub></a><br /><a href="https://github.com/Blazity/next-saas-starter/commits?author=jbryn" title="Code">π»</a></td> <td align="center"><a href="https://www.logana.dev/"><img src="https://avatars.githubusercontent.com/u/43075109?v=4?s=64" width="64px;" alt=""/><br /><sub><b>Logan Anderson</b></sub></a><br /><a href="https://github.com/Blazity/next-saas-starter/commits?author=logan-anderson" title="Code">π»</a> <a href="https://github.com/Blazity/next-saas-starter/commits?author=logan-anderson" title="Documentation">π</a> <a href="#mentoring-logan-anderson" title="Mentoring">π§βπ«</a></td> </tr> </table> <!-- markdownlint-restore --> <!-- prettier-ignore-end --> <!-- ALL-CONTRIBUTORS-LIST:END --> This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome! ## π License Distributed under the MIT License. See [LICENSE](https://github.com/Blazity/next-saas-starter/blob/main/LICENSE.md) for more information.
# shadcn-chatbot-kit A comprehensive chatbot component kit built on top of and fully compatible with the [shadcn/ui](https://ui.shadcn.com/) ecosystem. Build beautiful, customizable AI chatbots in minutes while maintaining full control over your components.  [](https://choosealicense.com/licenses/mit/) [](https://ui.shadcn.com) ## β¨ Features - π¬ **Rich Chat Interface**: Beautiful interactions and animations for a polished experience - π **Advanced Attachments**: - Smart preview for uploaded files - Auto-conversion of long text to attachments - Markdown support with syntax highlighting - π§ **Thinking Process**: Visual block showing LLM reasoning and thought process (π§ WIP) - π οΈ **Tool Integration**: - Visual tool execution states - Cancel support for running operations - Smart interrupt prompts - π¨ **Fully Themeable**: Leverages shadcn/ui's theming system for complete visual customization - π **Dark/Light Mode**: Built-in theme switching support - π― **Developer Experience**: - Works seamlessly with shadcn CLI - Easy component installation and updates - Composable API design for custom implementations - π€ **Voice Input**: Speech-to-text support for hands-free interaction (π§ WIP) - π¦ **Copy & Paste Components**: Install only what you need, own your components - π§ **Highly Customizable**: Modify any aspect of the components to match your needs - π± **Responsive Design**: Works seamlessly across all device sizes - π **Modern Code**: Built with the latest web standards and best practices ## π§© Components The kit includes everything you need to build a full-featured chatbot: - **Chat**: Pre-built chat component, with option to build a custom one with composable components - **Auto-Scroll Message Area**: Smart scrolling behavior for new messages - **Message Input**: - Auto-resize textarea - File upload support - Preview attached files - **Prompt Suggestions**: Help users with quick action buttons - **Message Actions**: Built-in copy, rate response, and other utility buttons - **Loading States**: Elegant loading indicators and transitions ## π¦ Installation 1. First, follow the [installation instructions](https://ui.shadcn.com/docs/installation) for shadcn/ui in your project. 2. Make sure you're using the modern `shadcn` CLI (not the legacy `shadcn-ui`). 3. Install components using the CLI. Visit [the documentation](https://shadcn-chatbot-kit.vercel.app/docs/components/chat) for detailed installation instructions and a full list of available components. ## π Quick Start **Note:** This example uses the Vercel AI SDK. Follow the [official Getting Started guide](https://sdk.vercel.ai/docs/getting-started/nextjs-app-router#create-your-application), before using it. ```tsx "use client" import { useChat } from "ai/react" import { Chat } from "@/components/ui/chat" export function ChatDemo() { const { messages, input, handleInputChange, handleSubmit, status, stop } = useChat() const isLoading = status === 'submitted' || status === 'streaming' return ( <Chat messages={messages} input={input} handleInputChange={handleInputChange} handleSubmit={handleSubmit} isGenerating={isLoading} stop={stop} /> ) } ``` ## π¨ Customization All components are built using shadcn/ui's styling system, making them fully customizable using CSS variables. Visit our [theme customizer](https://shadcn-chatbot-kit.vercel.app/themes) to visually design your chatbot's appearance. ## π€ Contributing Contributions are always welcome! Feel free to: - Submit bug reports and feature requests - Open pull requests to improve the codebase - Share feedback and suggestions ## π¨ββοΈ License Licensed under the [MIT license](https://github.com/Blazity/shadcn-chatbot-kit/blob/main/LICENSE.md).
# Enterprise Commerce <picture> <source media="(prefers-color-scheme: dark)" srcset="/assets/blazity-logo-dark.svg"> <source media="(prefers-color-scheme: light)" srcset="/assets/blazity-logo-light.svg"> <img alt="Logo" align="right" height="80" src="/assets/blazity-logo-light.svg"> </picture> ### Introduction Enterprise Commerce by [Blazity](https://blazity.com) is a open source enterprise-grade template of a Next.js project using Shopify as the e-commerce platform (product data, categories) and Algolia as the middle layer (data fetching, searching, faceting and recommendations). [![GitHub License][github-license-badge]][github-license-badge-link] [![Docs][check-the-docs]][check-the-docs-link] [![Blazity][made-by-blazity-badge]][made-by-blazity-badge-link] [![Blazity][made-with-v0-badge]][made-with-v0-link] [![Live Demo][view-live-demo-badge]][view-live-demo-link] ### Installation For detailed steps how to setup the whole application, please check [docs.blazity.com "Setup & Configuration"](https://docs.blazity.com/enterprise-commerce/setup). You can also deploy the project to Vercel with one click the button below [](https://vercel.com/new/clone?repository-url=https://github.com/Blazity/enterprise-commerce) ### Philosophy & motivation Building e-commerce platform is a tough topic. Creating one that has all the features that enterprise companies want is hard, way harder than implementing Headless CMS. There are bunch of templates out there that struggle with couple areas, while they may be a great choice for a small or medium-sized businesses, the huge needs for e.g. crawling budget optimization, SEO, excellent browsing journey, simplicity of the implementation are way more than can be expected from other projects. ### The browsing journey A monolithic commerce platform will never beat the speed of a fast-lookup system like Algolia, Constructor, or other enterprise search systems. What if you cache your platform's responses? Even still, the combinatorics of search terms, filters, and sort options create endless unique queries. A fast source-of-truth is table-stakes for speedy browsing UX. ### Architecture diagram Simple, winning e-commerce architecture. Take a closer look at the arrow colors as they represent the times between high-level user's browsing journey interactions and network latencies in the lower level. <img width="4763" height="3137" alt="detailed" src="https://github.com/user-attachments/assets/d1a66375-a573-43aa-98d5-efdd97c64c30" /> ## Media preview https://github.com/user-attachments/assets/ec3a3a7d-2118-4367-950c-dd31022768f1 ## Storefront features - Shopify as e-commerce backend, Algolia as the data middle-layer - Instant search, faceting and filtering experience through thousands (most likely will also work with millions) products with sophisticated filters, typo tolerance and word similarity - Enterprise-grade redirects handling through tens of thousands redirects without latency overhead (implemented on Bloom Filters) - Fast builds regardless of the e-commerce specific data volume - Platform-agnostic hierarchical categories - Analytics ([Vercel Analytics](vercel-analytics) / Google Analytics) with easy provider switch - Uncomplicated [A/B testing](https://github.com/Blazity/enterprise-commerce/blob/17726a77d22ecee81dc9268518a3d41e7c0861d3/starters/shopify-algolia/middleware.ts#L41-L43) setup - Perfect performance scores - SEO optimized, with crawling budget concept in mind - Crucial pages displaying critical contents and data without JavaScript execution needed - Follows the best practices regarding building e-commerce storefronts with simplicity in mind - Next.js App Router with implementation using all of the features (as we believe Next.js is the king for e-commerce) - [ISR MegaNav](https://github.com/vercel-solutions/meganav-demo) updates with seamless client-side hot-reload (SWR) - Browsing journey setup with mind of high conversion rates & maximizing the user's experience - Instant navigation between pages with carefully picked rendering strategies ([HP][hp], [PDP][pdp], [CLP][clp], [PLP][plp], [SRP][plp]) - Breadcrumbs on every crucial e-commerce page - Filtering helpers such as tiny vendor facet values search - Hosted on [Vercel][vercel] - Designed using [v0][v0] ## Page specific features ### HP (Home Page) - Super optimized above-the-fold category carousel with CTA buttons forwarding to CLPs/PLPs - SSG for best possible performance - A/B testing out of the box with simple implementation - Sales banner ### CLP (Category Landing Page) - Optimized Headless CMS driven CLP cover images and descriptions - Showcase of products from the particular category - "Show all products" button navigating to the actual [PLP][plp] - Tightly bound to the categories user in the e-commerce provider configured (default: Shopify) - Possibility to declare category to be viewable as [PLP][plp] or [CLP][clp], depending on the hierarchical level after clicking it in the MegaNav ### PLP (Product Listing Page) - Sub-second search experience built on Algolia, with infinite scaling capabilities - Intelligent values faceting through multiple filters, such as: - Product's copywriting content - Average rating and reviews - Vendors - Variants (e.g. Color) - Minimum/maximum price - Sorting of the [PLP][plp] output display - Efficient and battle-tested pagination without fancy infinite loading sections - Query params driven, easily shareable links - Browsing journey helpers, such as tiny vendors' list search ### PDP (Product Details Page) - Multiple variants configurations with robust variants' combinations handling - Image variants carousel with auto-changing the preview based on the selected variant - FAQ sections driven by headless CMS - Product reviews panel with "View all reviews" subpage - Recommended products at the bottom of the page - Above the fold content visible with JavaScript disabled (SEO-optimized) - Base product generated as SSG + variants SSR ### Documentation We also created a comprehensive documentation [docs.blazity.com/enterprise-commerce](docs.blazity.com) serving purpose of explaining our architectural decisions, containing in-details features descriptions and read-worthy guidelines. Everything with focus on the business values and theirs impact on the implementations. ### Frontend architecture | Term | Full Name | Rendering Strategy | Caching Strategy | A/B Testing or Personalization | | ------- | ---------------------------------------------- | ---------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------- | | **HP** | Home Page | **ISR**/**SSG**/**PPR** | **Static** | **ISR** variants above the fold and **CSR** below the fold or **PPR** | | **CLP** | Category Landing Page (products + CMS content) | **ISR**/**SSG**/**PPR** | **Static** | **ISR** variants above the fold and **CSR** below the fold or **PPR** | | **PLP** | Product Listing Page (products only) | **ISR** for main categories with pagination **PPR**/**CSR**/**SSR**/**ISR** for filtering/faceting/sorting | 1. **Static** for all SEO indexable URL<br/>2. **Dynamic** for the faceting/filtering/sorting and long tail pagination | Ideally **PPR**/**ISR** variants for SEO indexable URLs. **CSR**/**SSR** for long tail | | **SRP** | Search Results Page | **SSR**/**ISR**/**CSR** | **Dynamic** | **PPR** or **CSR** | | **PDP** | Product Details Page | Pareto rule 80/20. **SSG** for the bestsellers. **ISR** for the long tail. | 1. **Static** for above the fold line<br/>2. **Dynamic** below the fold line | **ISR** variants above the fold and **CSR** below the fold or **PPR** | [_Reference: post 'Enterprise e-commerce migration cheat-sheet: essential terms and definitions' by Dom Sipowicz on Vercel Community β©_](https://community.vercel.com/t/enterprise-e-commerce-migration-cheat-sheet-essential-terms-and-definitions/586) ## License This project is licensed under the MIT License. For more information, see the [LICENSE](./LICENSE) file. [check-workflow-badge]: https://img.shields.io/github/actions/workflow/status/blazity/enterprise-commerce/check.yml?label=check [github-license-badge]: https://img.shields.io/github/license/blazity/enterprise-commerce?link=https%3A%2F%2Fgithub.com%2FBlazity%2Fenterprise-commerce%2Fblob%2Fmain%2FLICENSE [github-contributors-badge]: https://img.shields.io/github/contributors/blazity/enterprise-commerce?link=https%3A%2F%2Fgithub.com%2FBlazity%2Fenterprise-commerce%2Fgraphs%2Fcontributors [discord-badge]: https://img.shields.io/discord/1111676875782234175?color=7b8dcd&link=https%3A%2F%2Fblazity.com%2Fdiscord [check-the-docs]: https://img.shields.io/badge/check-the_docs-blue [check-the-docs-link]: https://docs.blazity.com/enterprise-commerce [made-by-blazity-badge]: https://img.shields.io/badge/made_by-Blazity-blue?color=FF782B&link=https://blazity.com/ [made-with-v0-badge]: https://img.shields.io/badge/designed_with-v0-red?color=black&link=https://blazity.com/ [view-live-demo-badge]: https://img.shields.io/badge/view-live_demo-purple?link=https://commerce.blazity.com/ [view-live-demo-link]: https://commerce.blazity.com/ [check-workflow-badge-link]: https://github.com/Blazity/enterprise-commerce/actions/workflows/check.yml [github-license-badge-link]: https://github.com/Blazity/enterprise-commerce/blob/main/LICENSE [github-contributors-badge-link]: https://github.com/Blazity/enterprise-commerce/graphs/contributors [discord-badge-link]: https://blazity.com/discord [made-by-blazity-badge-link]: https://blazity.com/?utm_source=nextenterprise&utm_medium=github [made-with-v0-link]: https://v0.dev/ [v0]: https://v0.dev/ [vercel]: https://vercel.com/ [vercel-analytics]: https://vercel.com/analytics [plp]: https://docs.blazity.com/enterprise-commerce/browsing-journey/plp [clp]: https://docs.blazity.com/enterprise-commerce/browsing-journey/clp [pdp]: https://docs.blazity.com/enterprise-commerce/browsing-journey/pdp [hp]: https://docs.blazity.com/enterprise-commerce/browsing-journey/hp