<h2>Overview</h2>
<p>Elysia Kickstart is a feature-packed boilerplate that utilizes the ElysiaJS server framework along with various other tools and libraries to provide a seamless web development experience. It offers extensive support for type safety, authentication, consistent code standards, and easy deployment through Docker and GitHub Actions.</p>
<h2>Features</h2>
<ul>
<li><strong>TypeScript:</strong> Configured to maximize type safety.</li>
<li><strong>ElysiaJS:</strong> Fast and Bun friendly server framework.</li>
<li><strong>HTMX:</strong> High power tools for HTML.</li>
<li><strong>Drizzle:</strong> ORM with maximal type safety.</li>
<li><strong>Auth.js:</strong> Flexible and secure authentication.</li>
<li><strong>ESLint:</strong> Consistent code standards.</li>
<li><strong>Prettier:</strong> Consistent code styling.</li>
<li><strong>Tailwind CSS:</strong> Utility-first CSS framework.</li>
<li><strong>VS Code configurations:</strong> Configurations for extensions.</li>
<li><strong>Docker:</strong> Local and production Docker support with Docker-compose and Dockerfiles.</li>
<li><strong>GitHub Actions:</strong> Robust CI/CD integration.</li>
</ul>
<h3>Option 1: Clone and deploy to Railway (deployed with Docker)</h3>
<ol>
<li>Clone the repository.</li>
<li>Deploy on Railway.</li>
<li>Deploy on Vercel Edge Functions (refer to Railway template for required environment variables and RUNTIME=edge).</li>
</ol>
<h3>Option 2: Clone and run locally</h3>
<ol>
<li>Fork the repository.</li>
<li>Clone your new repository.</li>
<li>Install dependencies.</li>
<li>Run the development server with "bun" or with Docker.</li>
</ol>
<h3>Configuration</h3>
<ul>
<li><strong>Docker:</strong> Configure Docker by creating a .dockerignore file, a docker/ directory with Dockerfile and docker-compose.yml for development and production.</li>
<li><strong>Drizzle:</strong> Configure Drizzle by modifying src/db/src/lib/db.ts and drizzle.config.ts.</li>
<li><strong>ESLint:</strong> Configure ESLint by modifying .eslintrc.json file.</li>
<li><strong>GitHub Actions:</strong> Configure GitHub Actions by modifying .github/workflows/ci.yml file.</li>
<li><strong>HTMX:</strong> Configure HTMX by modifying public/htmx@1.9.5.min.js and types/htmx.d.ts files.</li>
<li><strong>NextAuth:</strong> Configure NextAuth by modifying src/app/api/auth/index.ts and other related files.</li>
<li><strong>Prettier:</strong> Configure Prettier by modifying .prettierrc.json and .prettierignore files.</li>
<li><strong>Tailwind CSS:</strong> Configure Tailwind CSS by modifying src/styles/globals.css and tailwind.config.js files.</li>
<li><strong>TypeScript:</strong> Configure TypeScript by modifying tsconfig.json and types/reset.d.ts files.</li>
<li><strong>Vercel Edge Functions:</strong> Configure Vercel Edge Functions by modifying api/index.tsx and scripts/transform-paths.ts files.</li>
<li><strong>VS Code:</strong> Configure VS Code by modifying .vscode/extensions.json and other related files.</li>
</ul>
<h2>Summary</h2>
<p>Elysia Kickstart is a comprehensive boilerplate that offers a wide range of features and tools for web development. It is built on top of the ElysiaJS server framework and includes support for TypeScript, HTMX, Drizzle ORM, authentication, code standards with ESLint and Prettier, Tailwind CSS, Docker deployment, and GitHub Actions for CI/CD. The installation process is straightforward with options for deployment on Railway or running locally. Overall, Elysia Kickstart provides developers with a solid foundation and a rich set of features to kickstart their projects.</p>


<h2>Overview</h2>
<p>next-kickstart is a minimal yet feature-packed Next.js 13.4 boilerplate that provides a convenient starting point for building Next.js applications. It is designed to require zero configuration and can run on the edge. The boilerplate includes a variety of features such as TypeScript support, environment variable validation, ESLint for code consistency, Prettier for code styling, Tailwind CSS for utility-first CSS framework, components built with Radix UI and Tailwind CSS, ORM with maximal type safety using Drizzle, flexible and secure authentication using NextAuth, progressive web app (PWA) support with next-pwa, flexible testing framework with Vitest, maintainable component testing with React Testing Library, End-to-end testing with Playwright, robust CI/CD capabilities with GitHub Actions, and VS Code configurations for easy debugging.</p>
<h2>Features</h2>
<ul>
<li>TypeScript - Configured to maximize type safety</li>
<li>T3 Env - Environment variable validation</li>
<li>ESLint - Consistent code standards</li>
<li>Prettier - Consistent code styling</li>
<li>Tailwind CSS - Utility-first CSS framework</li>
<li>shadcn/ui - Components built with Radix UI and Tailwind CSS</li>
<li>Drizzle - ORM with maximal type safety (requires enabling)</li>
<li>NextAuth - Flexible and secure authentication (requires enabling)</li>
<li>next-pwa - Installable as a progressive web app (PWA)</li>
<li>Vitest - Flexible testing framework</li>
<li>React Testing Library - Maintainable component testing</li>
<li>Playwright - End-to-end testing against multiple environments</li>
<li>GitHub Actions - Robust CI/CD</li>
<li>VS Code configuration - Configurations for easy debugging</li>
</ul>
<h3>Option 1: Clone and deploy with Vercel</h3>
<ol>
<li>Clone the repository and navigate to the project directory.</li>
<li>Deploy the project with Vercel.</li>
</ol>
<h3>Option 2: Clone and run locally</h3>
<ol>
<li>Clone the repository and navigate to the project directory.</li>
<li>Install dependencies by running the following command:
<pre><code>npm install
</code></pre>
</li>
<li>Run the development server by running the following command:
<pre><code>npm run dev
</code></pre>
</li>
</ol>
<h3>Configuration</h3>
<h4>TypeScript</h4>
<ul>
<li><code>tsconfig.json</code>:
<ul>
<li>Set the <code>"noUncheckedIndexedAccess"</code> option to <code>true</code> to increase type safety.</li>
<li>Set the <code>"target"</code> option to <code>"ES6"</code> for compatibility with Drizzle Studio.</li>
</ul>
</li>
<li>Absolute imports with <code>~/*</code> (to differentiate from <code>@/*</code> namespace imports).</li>
<li><code>types/reset.d.ts</code>: Use <code>ts-reset</code> to increase type safety.</li>
</ul>
<h4>T3 Env</h4>
<ul>
<li><code>env.mjs</code>: Configure environment variables.</li>
</ul>
<h4>ESLint</h4>
<ul>
<li><code>.eslintrc.json</code>: ESLint configuration for consistent code standards.</li>
</ul>
<h4>Prettier</h4>
<ul>
<li><code>.eslintrc.json</code>, <code>.prettierignore</code>, <code>.prettierrc.json</code>: Prettier configuration for consistent code styling.</li>
</ul>
<h4>Tailwind CSS</h4>
<ul>
<li><code>src/styles/globals.css</code>, <code>tailwind.config.js</code>: Tailwind CSS configuration.</li>
</ul>
<h4>shadcn/ui</h4>
<ul>
<li><code>src/components/ui/</code>, <code>src/components/theme-provider.tsx</code>, <code>src/components/theme-toggle.tsx</code>, <code>components.json</code>: Components built with Radix UI and Tailwind CSS.</li>
</ul>
<h4>Drizzle</h4>
<ul>
<li><code>src/db/</code>, <code>src/lib/db.ts</code>, <code>drizzle.config.ts</code>: ORM with maximal type safety (requires enabling).</li>
</ul>
<h4>NextAuth</h4>
<ul>
<li><code>src/app/api/auth/[...nextauth]/route.ts</code>, <code>src/components/auth.tsx</code>, <code>src/db/schemas/auth.ts</code>: Flexible and secure authentication (requires enabling).</li>
</ul>
<h4>next-pwa</h4>
<ul>
<li><code>public/icon-512x512.png</code>, <code>public/manifest.json</code>, <code>next.config.mjs</code>: Installable as a progressive web app (PWA).</li>
</ul>
<h4>Vitest</h4>
<ul>
<li><code>testing/setup.ts</code>, <code>types/vitest.d.ts</code>, <code>vitest.config.ts</code>: Flexible testing framework.</li>
</ul>
<h4>React Testing Library</h4>
<ul>
<li><code>src/app/page.test.tsx</code>: Maintainable component testing.</li>
</ul>
<h4>Playwright</h4>
<ul>
<li><code>e2e/</code>, <code>playwright.config.ts</code>: End-to-end testing against multiple environments.</li>
</ul>
<h4>GitHub Actions</h4>
<ul>
<li><code>.github/workflows/ci.yml</code>: Robust CI/CD configuration.</li>
</ul>
<h4>VS Code</h4>
<ul>
<li><code>.vscode/launch.json</code>: Debug configurations.</li>
<li><code>.vscode/settings.json</code>: Use project TypeScript version.</li>
</ul>
<h2>Summary</h2>
<p>next-kickstart is a highly customizable Next.js boilerplate that provides an extensive set of features out of the box. It comes with TypeScript support, environment variable validation, code consistency and styling tools, utility-first CSS framework, pre-built components, ORM with maximal type safety, flexible and secure authentication, progressive web app support, flexible testing framework, maintainable component testing, end-to-end testing, robust CI/CD capabilities, and convenient debugging configurations for VS Code. With next-kickstart, developers can jumpstart their Next.js projects without needing to spend time on initial setup and configuration.</p>


<h2>Overview:</h2>
<p>The WebstackNext.js 13.4 template repository is a complete and ready-to-use template for building web applications. It includes all the necessary configurations and packages to get started quickly. The template is built using Next.js, a popular framework for building React applications, and includes batteries such as TypeScript, ESLint, Prettier, Tailwind CSS, NextAuth, and GitHub Actions for continuous integration and deployment.</p>
<h2>Features:</h2>
<ul>
<li><strong>TypeScript</strong>: The template uses TypeScript for increased type-safety and better development experience.</li>
<li><strong>Import alias</strong>: Import alias '~/' is used to differentiate from '@/' imports, improving code readability.</li>
<li><strong>ESLint and Prettier</strong>: ESLint and Prettier are included for code linting and formatting.</li>
<li><strong>Tailwind CSS</strong>: The template includes Tailwind CSS, a highly customizable CSS utility framework, for easy styling.</li>
<li><strong>Environment Variables</strong>: The template uses type-safe environment variables with the help of t3-env package.</li>
<li><strong>NextAuth</strong>: NextAuth is integrated for authentication, making it easy to implement user authentication in the web application.</li>
<li><strong>GitHub Actions</strong>: The template includes CI/CD workflows using GitHub Actions, enabling automated type-checking and linting.</li>
</ul>
<h2>Summary:</h2>
<p>The WebstackNext.js 13.4 template repository is a comprehensive template for building web applications using Next.js. It comes with all the necessary configurations and packages to improve development productivity. The template includes TypeScript, ESLint, Prettier, Tailwind CSS, NextAuth, and GitHub Actions, making it easy to build and deploy web applications with modern development practices.</p>


Syhner

Elysia Kickstart

Next Kickstart

Next Kickstart