Qwikly Stack

Overview

Qwikly Stack is a full-stack web framework template built on top of Qwik. It aims to provide a delightful, overpowered, and beautifully handcrafted web development experience. With Qwikly Stack, developers can leverage modern tools and features to create high-quality web applications.

Features

• Awesome Qwik City framework: Qwikly Stack is built on top of Qwik City, which provides a set of tools for building a full site including directory-based routing, layouts, and more.
• Modular Forms typesafe integration: Qwikly Stack includes a typesafe integration for Modular Forms, allowing developers to easily create forms with type checking.
• Tailwind with Light/Dark mode: Qwikly Stack comes preconfigured with Tailwind CSS, including support for light and dark mode.
• Lucide icons: The framework includes Lucide icons, a collection of beautifully designed icons for use in your web applications.
• Authentication with Lucia Auth v2: Qwikly Stack provides built-in authentication using Lucia Auth v2, making it easy to implement user sign up, log in, profile management, and more.
• DrizzleORM SQL builder + SQLite + Migrations: Developers can leverage the power of DrizzleORM, a SQL builder, along with SQLite and Migrations for efficient database management.
• Full typesafe development using zod: Qwikly Stack supports full typesafe development using zod, ensuring that your code is free from type errors.
• Automagically MDX support: The framework includes built-in support for MDX, allowing developers to write Markdown with JSX syntax and have it rendered as React components.
• Stripe Payments and Subscriptions: Qwikly Stack integrates with the Stripe payment platform, making it easy to implement one-time payments and recurring subscription payments.
• Mailer with Resend: Qwikly Stack provides a mailer with resend functionality, allowing you to easily send emails to your users.
• Husky hooks: The framework includes Husky hooks, which enable you to run scripts before committing and pushing your code.
• Commit nomenclature rules with commitizen: Qwikly Stack enforces commit nomenclature rules using commitizen, ensuring consistent and descriptive commit messages.
• Release management policy with standard-version: The framework follows a release management policy using standard-version, making it easy to generate release notes and manage version numbers.
• ESLint and Prettier linter and formatter: Qwikly Stack includes ESLint and Prettier for code linting and formatting, ensuring clean and readable code.
• Outstanding Three.JS scenes: Qwikly Stack includes outstanding Three.JS scenes, providing visually stunning effects and animations for your web applications.
• CI/CD with Github Actions: The framework supports continuous integration and deployment using Github Actions.
• Fullstack deployments thanks to Fly.io with Fastify Adapter: Qwikly Stack enables fullstack deployments using Fly.io with the Fastify adapter, allowing your application to be deployed and scaled easily.

Installation

To install Qwikly Stack, please follow the steps below:

1. Install fly.io CLI:

   npm install -g flyctl
   

2. Create an app by running the following command in your root project folder (replace your-app-name with your desired app name):

   fly launch -a your-app-name
   

3. Create a volume for SQLite with 1GB of storage:

   fly volumes create qwikly_stack_volume --size 1
   

4. Update the .env.prod file with your production variables and import your secrets (replace SECRET_KEY=secret_value with your actual secret key value):

   cat .env.prod | fly secrets import
   

5. Optional: Add public build time environment variables to your Dockerfile files before the build command (e.g., PUBLIC_STRIPE_PUB="your_public_key").

6. Deploy your app using Fly.io:

   fly deploy
   

7. Visit your newly deployed app by running:

   fly open
   

8. Optional: If you want to use Github Actions for CI/CD, create a SecretToken for your app from your Fly.io dashboard and save it to your Github Repository secrets.

Summary

Qwikly Stack is a powerful full-stack web framework built on top of Qwik City. It offers a wide range of features, including authentication, payments, admin dashboard, and more. With Qwikly Stack, developers can enjoy a delightful and productive web development experience while leveraging modern tools and technologies. The installation process is straightforward, allowing developers to quickly set up and deploy their applications using Fly.io.