MoonTV 一个开箱即用的、跨平台的影视聚合播放器! 完全免费开源

     MoonTV 是一个开箱即用的、跨平台的影视聚合播放器。它基于 Next.js 14 + Tailwind CSS + TypeScript 构建，支持多资源搜索、在线播放、收藏同步、播放记录、本地/云端存储，让你可以随时随地畅享海量免费影视内容。


✨ 功能特性

    🔍 多源聚合搜索：内置数十个免费资源站点，一次搜索立刻返回全源结果。
    📄 丰富详情页：支持剧集列表、演员、年份、简介等完整信息展示。
    ▶️ 流畅在线播放：集成 HLS.js & ArtPlayer。
    ❤️ 收藏 + 继续观看：支持 Redis/D1 存储，多端同步进度。
    📱 PWA：离线缓存、安装到桌面/主屏，移动端原生体验。
    🌗 响应式布局：桌面侧边栏 + 移动底部导航，自适应各种屏幕尺寸。
    🚀 极简部署：一条 Docker 命令即可将完整服务跑起来，或免费部署到 Vercel 和 Cloudflare。
    👿 智能去广告：自动跳过视频中的切片广告（实验性）

部署

本项目支持 Vercel、Docker 和 Cloudflare 部署。
1、Vercel 部署

    推荐使用，零运维成本，免费额度足够个人使用。

    Fork 本仓库到你的 GitHub 账户。
    登陆 Vercel，点击 Add New → Project，选择 Fork 后的仓库。
    （强烈建议）设置 PASSWORD 环境变量。
    保持默认设置完成首次部署。
    如需自定义 config.json，请直接修改 Fork 后仓库中该文件。
    每次 Push 到 main 分支将自动触发重新构建。

部署完成后即可通过分配的域名访问，也可以绑定自定义域名。
2、Cloudflare 部署

Cloudflare Pages 的环境变量尽量设置为密钥而非文本
普通部署（localstorage）

    Fork 本仓库到你的 GitHub 账户。
    登陆 Cloudflare，点击 计算（Workers）-> Workers 和 Pages，点击创建
    选择 Pages，导入现有的 Git 存储库，选择 Fork 后的仓库,
    构建命令填写:

    pnpm install --frozen-lockfile && pnpm run pages:build

    预设框架为无，构建输出目录为 .vercel/output/static
    保持默认设置完成首次部署。进入设置，将兼容性标志设置为 nodejs_compat
    （强烈建议）首次部署完成后进入设置，新增 PASSWORD 密钥（变量和机密下），而后重试部署。
    如需自定义 config.json，请直接修改 Fork 后仓库中该文件。
    每次 Push 到 main 分支将自动触发重新构建。

D1 支持

    点击 存储和数据库 -> D1 SQL 数据库，创建一个新的数据库，名称随意
    进入刚创建的数据库，点击左上角的 Explore Data，将D1 初始化 中的内容粘贴到 Query 窗口后点击 Run All，等待运行完成
    返回你的 pages 项目，进入 设置 -> 绑定，添加绑定 D1 数据库，选择你刚创建的数据库，变量名称填 DB
    设置环境变量 NEXT_PUBLIC_STORAGE_TYPE，值为 d1；设置 USERNAME 和 PASSWORD 作为站长账号
    重试部署

3、Docker 部署

    适用于自建服务器 / NAS / 群晖等场景。

1. 直接运行（最简单）

# 拉取预构建镜像
docker pull ghcr.io/senshinya/moontv:latest
# 运行容器
# -d: 后台运行  -p: 映射端口 3000 -> 3000
docker run -d --name moontv -p 3000:3000 ghcr.io/senshinya/moontv:latest

访问 http://服务器 IP:3000 即可。（需自行到服务器控制台放通 3000 端口.

项目地址：https://github.com/LunaTechLab/MoonTV

使用 Next.js + mysql构建的博客程序fuxiaochen

一个简单的个人站，使用 Next.js 构建.

https://fuxiaochen.com/blog

简介

一个简单的个人博客网站，使用 Next.js + React 19 + TypeScript + Shadcn/ui + Tailwind CSS 开发

特性

• 使用 Next.js v15 + React 19 hooks 进行构建，完美支持 SSR

• 使用 TypeScript 编写，提供类型安全性和更好的开发体验

• 使用 Prisma 简化数据库 CRUD 操作

• 使用 Tailwind CSS + shadcn/ui 编写样式和组件

• 使用 iconify 支持各种 svg 图标

• 使用 Bytemd 实现 Markdown 的编写和预览，自己编写 Bytemd 插件优化 Markdown 的预览

• 使用 next-theme 支持明暗主题切换

• 使用 next-sitemap 生成全站 sitemap ，SEO 友好

• 使用最新的 next-auth v5 支持 Github登录后台管理

• 使用 ahooks 提升开发效率

• 图片上传后使用 sharp 压缩图片成 webp 格式，减小图片体积

• 图片上传到阿里云 OSS，加快访问图片访问速度

• 响应式设计，对部分屏幕尺寸和设备进行适配

• 集成后台管理功能，如博客、片段、标签、笔记管理等

快速开始

环境准备

确保你已安装

• Git
• Pnpm
• Node.js >= 20
• Docker、Docker Compose

获取项目代码

git clone https://github.com/aifuxi/fuxiaochen

安装依赖

在项目根目录下运行以下命令安装项目依赖：

pnpm install

准备数据库

开发环境，推荐使用 Docker Compose 启动一个 MySQL，项目已经准备好了一个 docker-compose.yaml 文件

在项目根目录下运行

# Docker Compose 只启动 MySQL
docker-compose up -d mysql8

# 或者
# Docker Compose 启动全部服务（MySQL 和 Umami）
docker-compose up -d

更多

更多信息可查看项目内的 docker-compose.yaml 和 Makefile 文件

准备 env 文件和配置

配置 .env 文件

.env 文件用来配置各种项目中需要的配置

复制一份 .env.example，重命名为 .env，根据自己实际情况修改以下字段

• DATABASE_URL

# DATABASE_URL 格式为 mysql://用户名:用户密码@数据库IP:数据库端口/需要连接的数据库名
# 根据实际情况进行修改
DATABASE_URL="mysql://root:123456@127.0.0.1:3306/fuxiaochen"

Github 登录用

• AUTH_GITHUB_ID：Github 授权应用 ID
• AUTH_GITHUB_SECRET：Github 授权应用 secret

必须配置

• NEXT_PUBLIC_ADMIN_EMAILS：ADMIN 邮箱列表，只有配置在这里的邮箱，才允许在后台管理进行新增、修改、删除操作

如何获取授权应用的 ID 和 secret，可以跟着小付哥（不是我）这篇文章来：基于Next14+Auth5实现Github、Google、Gitee平台授权登录和邮箱密码登录

启动开发服务器

1. 创建表

pnpm db:push

2. 生成 Prisma 类型文件

pnpm db:gen

做了这一步后，重启一下 VS Code（Ctrl/Cmd + Shift + P，然后选 【Developer: Reload Window】），重新加载 VS Code

3. 启动开发服务器

pnpm dev

4. 预览

• 访问前台: http://localhost:6121
• 访问后台管理: http://localhost:6121/admin

5. 查看数据库

这里推荐使用 Prisma Studio 查看数据，你也可以使用数据库连接软件连接我们的数据库查看数据

新开一个终端，在项目根目录下运行

pnpm db:studio

启动完后会自动打开浏览器，可以在线查看数据库内的数据

自定义页面的信息

你可能想修改页面中的信息，请修改 constants/info.ts 文件

反馈

遇到任何问题，欢迎给我发邮件反馈，欢迎提 Issue

from https://github.com/aifuxi/fuxiaochen

 

 

搭建基于 nextjs的静态博客程序 mdblog-public

先在windows桌面系统上安装nodejs环境。然后，

git clone https://github.com/Jihillestad/mdblog-public

cd mdblog-public

pnpm install

pnpm build （此即生成/更新静态网站的根目录的命令）

find . -name index.html

显示：

 ./.next/server/app/index.html

cd  ./.next/server/app/

~/mdblog-public/.next/server/app$ ls
_not-found/      about.rsc            favicon.ico.body  icon1.png.meta            page.js
_not-found.html  api/                 favicon.ico.meta  index.html                page.js.nft.json
_not-found.meta  apple-icon.png/      icon.png/         index.meta                page_client-reference-manifest.js
_not-found.rsc   apple-icon.png.body  icon.png.body     index.rsc                 tags/
about/           apple-icon.png.meta  icon.png.meta     opengraph-image.png/      tags.html
about.html       blog/                icon1.png/        opengraph-image.png.body  tags.meta
about.meta       favicon.ico/         icon1.png.body    opengraph-image.png.meta  tags.rsc

~/mdblog-public/.next/server/app$

(可见~/mdblog-public/.next/server/app就是静态网站的根目录）

新建源帖：

 cd ~/mdblog-public/

cd content/blog

nano pg.mdx

cat pg.mdx

显示：

---
title: 美丽的草原，我的家
description: 这是一首歌
date: 2024-11-19 09:06
published: true
tags: ["music", "life"]
--- 

此处写正文或html codes.

cd ~/mdblog-public/ 

$ pnpm build

演示网站：

https://jade-valkyrie-01404c.netlify.app/

https://mbp-kcfoqtwgz-luckypoems-projects.vercel.app/ 

(netlify.com空间比vercel.com空间更好用。

https://jade-valkyrie-01404c.netlify.app/blog/ce和https://jade-valkyrie-01404c.netlify.app/blog/ce.html都能正常显示网页. 但是,

https://mbp-kcfoqtwgz-luckypoems-projects.vercel.app/blog/ce却不能正常显示网页,一定要手工加上.html才行: https://mbp-kcfoqtwgz-luckypoems-projects.vercel.app/blog/ce.html )

项目地址：https://github.com/Jihillestad/mdblog-public

 

 

 

 

 

create-t3-app

 The best way to start a full-stack, typesafe Next.js app 

create.t3.gg

Interactive CLI to start a full-stack, typesafe Next.js app.

Get started with the T3 Stack by running npm create t3-app@latest

Watch Theo's overview on Youtube here

Table of contents

• The T3 Stack
• T3 Axioms
• Getting Started
• Community
• Contributors

The T3 Stack

The "T3 Stack" is a web development stack made by Theo focused on simplicity, modularity, and full-stack typesafety. It consists of:

• Next.js
• tRPC
• Tailwind CSS
• TypeScript
• Prisma
• Drizzle
• NextAuth.js

So... what is create-t3-app? A template?

Kind of? create-t3-app is a CLI built by seasoned T3 Stack devs to streamline the setup of a modular T3 Stack app. This means each piece is optional, and the "template" is generated based on your specific needs.

After countless projects and many years on this tech, we have lots of opinions and insights. We’ve done our best to encode them into this CLI.

This is NOT an all-inclusive template. We expect you to bring your own libraries that solve the needs of YOUR application. While we don’t want to prescribe solutions to more specific problems like state management and deployment, we do have some recommendations listed here.

T3 Axioms

We'll be frank - this is an opinionated project. We share a handful of core beliefs around building and we treat them as the basis for our decisions.

1. Solve Problems

It's easy to fall into the trap of "adding everything" - we explicitly don't want to do that. Everything added to create-t3-app should solve a specific problem that exists within the core technologies included. This means we won't add things like state libraries (zustand, redux) but we will add things like NextAuth.js and integrate Prisma and tRPC for you.

2. Bleed Responsibly

We love our bleeding edge tech. The amount of speed and, honestly, fun that comes out of new shit is really cool. We think it's important to bleed responsibly, using riskier tech in the less risky parts. This means we wouldn't ⛔️ bet on risky new database tech (SQL is great!). But we happily ✅ bet on tRPC since it's just functions that are trivial to move off.

3. Typesafety Isn't Optional

The stated goal of create-t3-app is to provide the quickest way to start a new full-stack, typesafe web application. We take typesafety seriously in these parts as it improves our productivity and helps us ship fewer bugs. Any decision that compromises the typesafe nature of create-t3-app is a decision that should be made in a different project.

Getting Started

To scaffold an app using create-t3-app, run any of the following four commands and answer the command prompt questions:

npm

npm create t3-app@latest

yarn

yarn create t3-app

pnpm

pnpm create t3-app@latest

bun

bun create t3-app@latest

For more advanced usage, check out the CLI docs.

Community

For help, discussion about best practices, or any other conversation that would benefit create-t3-app:

Join the T3 Discord Server

 

from https://github.com/t3-oss/create-t3-app

 

slug, a URL shortener

 An open-source URL shortener.

slug.vercel.app  

👨‍🚀 Introduction

Slug is a service that offers to shorten urls in a simple, fast and secure way. It's built with T3 Stack, a web development stack made by Theo focused on simplicity, modularity, and full-stack typesafety.

This project uses the following technologies:

• create-t3-app - The best way to start a full-stack, typesafe Next.js app.
• Next.js 14 App Router - The React Framework for the Web.
• Auth.js v5 - Authentication for the Web.
• Prisma - A next-generation Node.js and TypeScript ORM.
• Turso (SQLite) + libSQL - SQLite for Production.
• Next.js Server Actions - Asynchronous functions that are executed on the server.
• TailwindCSS + shadcn/ui & Radix Primitives - Design System.
• Prettier with prettier-plugin-tailwindcss - Code Formatter.
• Lucide Icons + svgl - Beautiful SVG icons & logos for the web.

⚠️ This is a community project, not associated with Vercel.

🚀 Getting Started

Requirements:

• Node.js (+v18.x) installed.
• pnpm (v8+) installed.
• Turso CLI installed (for Windows users, it's necessary to activate WSL 2).
• Visual Studio Code with the recommended extensions installed (ESLint, Prettier, Tailwind CSS IntelliSense).

Steps:

1. Fork this project:

• Click here.

2. Clone the repository:

git clone git@github.com:YOU_USER/slug.git

3. Install dependencies:

# Install pnpm globally if you don't have it:
npm install -g pnpm

# and install dependencies:
pnpm install

4. Create a .env file with the following content:

🚧 The environment variables must match the following schema.

# Database:
DATABASE_URL= # "file:./dev.db"
TURSO_DATABASE_URL=
TURSO_AUTH_TOKEN=

# Auth.js =>
AUTH_SECRET=

# Github Provider =>
GITHUB_ID=
GITHUB_CLIENT_SECRET=

# Google Provider =>
GOOGLE_CLIENT_ID=
GOOGLE_CLIENT_SECRET=

Database:

• Create a new database with Turso.
• Get Turso Auth Token.
• Get Turso Database URL.

Auth.js:

• Get Auth.js Secret.
• AUTH_URL is the URL of your Auth.js API, for example, /api/auth. You can change it in the auth.ts file.

Github Credentials:

• Create a new OAuth App.

Google Credentials:

• Create a new OAuth 2.0 App from Google API Console.

5. Generate a new migration file with Prisma:

pnpm db:migrate

6. Insert the migration data into the Turso database. To do this, go to package.json, modify the db:push command with the name of the migration folder (2024xxxxxxxxxx_init) and run it in your terminal:

pnpm db:push

7. Run:

• Development server:

pnpm dev

and open http://localhost:3000 with your browser 🚀

• Prisma Studio:

pnpm db:studio

and open http://localhost:5555 with your browser ✨

from https://github.com/pheralb/slug

 示例：https://slug.vercel.app/bmbs

Next.js 是一个基于 React 的开源前端框架,可以使用 Next.js 静态生成功能来构建博客页面

 Next.js 是一个基于 React 的开源前端框架，用于构建现代化的、高性能的 Web 应用程序。它由 Vercel（前身是 Zeit）开发，并在 React 生态系统中得到广泛应用。Next.js 提供了一套完整的开发工具和功能，使得开发者可以更快速地构建复杂的前端应用，并且具有出色的性能和用户体验。

Next.js 提供了许多功能，包括服务器端渲染（SSR）和静态网站生成（SSG）等。

对于博客网站，可以使用 Next.js 静态生成功能来构建博客页面。通过使用 Markdown 或其他格式编写博客文章，使用 Next.js 生成预渲染的静态页面，可以使博客页面更快地加载，并提高 SEO 排名。

同时，Next.js 还提供了许多插件和工具，可以帮助开发人员更快地构建和部署静态博客网站。例如，Next.js 官方提供了一个名为"next-mdx-blog"的插件，可以轻松地创建基于 Markdown 的博客网站。

总之，Next.js 是一个非常强大的框架，可以用于构建各种类型的 Web 应用程序，包括静态博客网站。

你可以查看它的官网和 GitHub 了解更多。

搭建基于 nextjs的静态博客程序：tailwind-nextjs-starter-blog

 cd ~
git clone https://github.com/timlrx/tailwind-nextjs-starter-blog
cd tailwind-nextjs-starter-blog
npm install
EXPORT=1 UNOPTIMIZED=1 npm run build （此命令就是生成/更新静态网站的根目录的命令。会在当前目录下，生成out目录,out目录里面有index.html文件，可见out目录就是静态网站的根目录）

创建新帖的方法：
cd ~/tailwind-nextjs-starter-blog/data/blog
nano happy-festival.mdx
cat happy-festival.mdx
显示：
---
title: '快乐的节日'
date: 2024-10-25T16:12:14Z
tags: ['enjoyment', 'life', 'music']
draft: false
summary: '这是一首歌'
layout: PostSimple
---

此处写正文或html codes.

$ cd ~/tailwind-nextjs-starter-blog
$ EXPORT=1 UNOPTIMIZED=1 npm run build

项目地址：https://github.com/timlrx/tailwind-nextjs-starter-blog
https://github.com/timlrx/tailwind-nextjs-starter-blog/issues/1043
我的演示网站：

https://guileless-sunflower-373c7d.netlify.app

https://tnsb-4hn.pages.dev/

代码里面的contentlayer模块跟windows系统不太兼容，对于写的源贴里的html tags的要求比较严格，所以那篇关于扬州的图文并茂的文章的html codes并没有被contentlayer模块处理成功，导致更新静态网站的根目录失败。我只好把那篇关于扬州的图文并茂的文章的所有html codes统统去掉，变成纯文字内容，才得以发表成功。见https://guileless-sunflower-373c7d.netlify.app/blog/yangzhou

而且这程序生成的链接好像有点问题，比如https://guileless-sunflower-373c7d.netlify.app/blog/china-economy。
在本地机器上，
cd ~/tailwind-nextjs-starter-blog/out/blog
$ ls
china-economy.html
china-economy.txt
code-sample.html
code-sample.txt
deriving-ols-estimator.html
deriving-ols-estimator.txt
github-markdown-guide.html
github-markdown-guide.txt
guide-to-using-images-in-nextjs.html
guide-to-using-images-in-nextjs.txt
happy-festival.html
happy-festival.txt
introducing-tailwind-nextjs-starter-blog.html
introducing-tailwind-nextjs-starter-blog.txt
my-fancy-title.html
my-fancy-title.txt
nested-route/
new-features-in-v1.html
new-features-in-v1.txt
page/
pictures-of-canada.html
pictures-of-canada.txt
release-of-tailwind-nextjs-starter-blog-v2.0.html
release-of-tailwind-nextjs-starter-blog-v2.0.txt
the-time-machine.html
the-time-machine.txt
yangzhou.html
yangzhou.txt

在~/tailwind-nextjs-starter-blog/out/里面运行
python3 -m http.server 1234

 然后在浏览器里访问http://127.0.0.1:1234/，然后点击'稀奇古怪的中国经济'这个链接，显示http://127.0.0.1:1234/blog/china-economy，是显示不了内容的，
需加上 .html才行。 

(本来文章链接是带.html的，为了去掉.html,可这样做：
 在网站的根目录下，新建.htaccess文件，加入：
RewriteEngine On
RewriteCond %{REQUEST_URI} !^.*\.html$
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ %{REQUEST_FILENAME}.html
就立马解决问题了。如果像此文http://briteming.blogspot.co.uk/2013/10/linux-vpsocaml-ussm.html那样做，还需重启apache才行：
<VirtualHost my-vps-ip:80>
ServerName harp.brite.biz
DocumentRoot /root/harp-blog-by-kennethormandy/www/
<Directory /root/harp-blog-by-kennethormandy/www/>
            Options Indexes FollowSymLinks MultiViews
            AllowOverride All
            Order allow,deny
            allow from all
        </Directory>
</VirtualHost>

需加上上述蓝色部分，重启apache即可。

from https://briteming.blogspot.com/2014/01/linux-vpsnodejs-harp.html)

 

 

React-Koa-Blog

 React full stack+koa2+Mysql implementation blog website.

技术栈

• 前端：next + typescript + antd + es6 + less + axios

• 服务端：koa2 + mysql + typeorm

单独部署

git clone git@github.com:maqi1520/react-koa-blog.git

在server/下建立.env 文件 写入

# Application Port - KOA server listens on this port(default 3000).
PORT=4000

# Environment - If development, TypeORM will use typescript entities and DB conn will be non SSL
# NODE_ENV=development

# JWT secret - JWT tokens should be signed with this value
JWT_SECRET=your-secret-whatever

# DB connection data in connection-string format.
DB_HOST=localhost
DB_USER=root
DB_PASSWORD=12345678
DB_NAME=blog

在web/下建立.env 文件

写入

API_URL=http://localhost:3000
NEXT_PUBLIC_OSS_accessKeyId=xxxx
NEXT_PUBLIC_OSS_accessKeySecret=xxx
NEXT_PUBLIC_OSS_region=oss-cn-hangzhou
NEXT_PUBLIC_OSS_bucket=aliyun-wb-bucket
NEXT_PUBLIC_OSS_endpoint=http://oss.example.cn

全局安装 pm2

yarn global add pm2

打包部署

cd react-koa-blog/web yarn
yarn build
pm2 start npm --name "blog web" -- start
cd ../server yarn
yarn build
pm2 start npm --name "blog server" -- start

安装 nginx

反向代理

拷贝覆盖nginx.conf

#  重启nginx
sudo /usr/sbin/nginx -s reload

docker 部署

修改docker-composer.yml中对于env 的值

安装 docker-compose

pip install docker-compose

启动

docker-compose up -d

-d 是后台启动

单个服务启动

docker-compose up -d web

更多docker-compose 的例子可以看 awesome-compose

功能列表

• mysql 存储
• 多人blog
• markdown渲染
• 阿里云图床
• 代码高亮
• 保存到草稿箱
• 摘要
• 标签
• 翻页功能
• 评论功能
• 回到顶部
• 适配移动端
• docker 部署
• API swagger 管理
• 收藏文章
• 自定义用户博客信息
• React Native App

from https://github.com/maqi1520/react-koa-blog

 

搭建next.js portofolio blog

 npm install -g pnpm

$ pnpm create next-app --example https://github.com/vercel/examples/tree/main/solutions/blog nab-blog

(此命令会在当前目录下，生成 nab-blog目录）
显示：
...
Success! Created blog at C:\Users\12799\nab-blog
Inside that directory, you can run several commands:

$ cd nab-blog
$ pnpm build

（$ pnpm start
    Runs the built app in production mode.）

$ find . -name index.html
./.next/server/app/index.html

（可见，~/nab-blog/.next/server/app/就是静态网站的根目录）

新建源帖：

cd  app/blog/posts 

nano happy-festival.mdx

cat  happy-festival.mdx

显示：

---
title: '快乐的节日'
publishedAt: '2024-10-31T10:00:00'
summary: '这是一首歌'

---

此处写正文或html codes.

$  cd ~/nab-blog/

$ pnpm build

演示网站：https://incomparable-hotteok-4c485d.netlify.app/

项目地址：https://github.com/vercel/next.js/tree/canary/packages/create-next-app
ref: https://vercel.com/templates/next.js/portfolio-starter-kit

https://nextjs.org/docs/app/building-your-application/deploying

(源帖-mdx文件的格式问题：

https://mdxjs.com/docs/troubleshooting-mdx/）

awesome-saas-boilerplates

 

Flutter (Dart)

• Flutter Boilerplate - https://www.flutterboilerplate.com

Jetpack Compose (Kotlin)

• Compose101 - https://compose101.com/

iOS (Swift / SwiftUI)

• Swift Maker - https://swiftmaker.dev/

Ruby on Rails

• Bullet Train https://bullettrain.co
• Jumpstart Rails https://jumpstartrails.com/
• Sjabloon https://www.getsjabloon.com/
• Rails Tabler Starter https://github.com/tarunvelli/rails-tabler-starter

Vue

• Quapp: Quasar + Appwrite Full stack Quality Application Framework https://www.quapp.dev/

Node.js (Javascript)

• TurboStarter https://turbostarter.dev
• React SaaS - Free and open source SaaS Boilerplate https://react-saas.com/
• OpenSaaS.sh - free, open-source React/NodeJS/Prisma/Stripe SaaS boilerplate https://OpenSaaS.sh/
• BoilerCode - SaaS Boilerplate https://boilercode.co/
• Scale Safe https://scalesafe.app/
• Gravity https://usegravity.app/
• MERNKIT https://mernkit.com/
• Nodewood https://nodewood.com/
• Boostack.io. open-source https://boostack.io/
• Rocket App https://rocketapp.me/
• Turbojet https://www.turbojet.co/
• SaaS Starter. Open Source. https://github.com/cedrickchee/saas-starter
• SaaStr. Open Source**. https://github.com/aloysius-tim/saas-react-starter-kit-boilerplate
• ULTIMATE BACKEND. Open Source. https://github.com/juicycleff/ultimate-backend
• SaaSgear. Open Source. https://github.com/JSLancerTeam/saasgear
• Nextless JS https://nextlessjs.com
• Divjoy https://divjoy.com
• Remixtape https://remixtape.dev
• Nextacular. Open Source. https://nextacular.co
• AWS + React SaaS Template. https://github.com/SimonHoiberg/saas-template
• Volca https://volca.io
• Enterprise-ready SaaS Starter Kit. Open Source. https://github.com/boxyhq/saas-starter-kit
• Supastarter - https://supastarter.dev/
• SAAS-Starter-Kit - https://github.com/Saas-Starter-Kit/Saas-Kit-prisma
• Saas UI Pro - https://saas-ui.dev
• Modern MERN - https://modernmern.com
• Makerkit - https://makerkit.dev
• salable - https://github.com/Salable/nextjs-with-salable
• SaaS Boilerplate by Async Labs - https://github.com/async-labs/saas
• Graphile Starter - https://github.com/graphile/starter
• ALPack by Apptension - https://github.com/apptension/ALPack
• Sequelize - https://github.com/umar0645/nodejs-sequelize-auth-boilerplate-with-swagger
• StarterSaaS Node + Go - https://www.startersaas.com/
• marblism - https://www.marblism.com/
• DirectoryKit - https://www.directorykit.xyz/
• Horizon UI Boilerplate - https://horizon-ui.com/boilerplate
• Indie Starter Kit https://indie-starter.dev
• SaaSBold - https://saasbold.com/
• StartKit.AI - https://startkit.ai
• WEBAPPBOOST Next.js turborepo boilerplate - https://webappboost.com
• shadcn/pro SaaS starter kit - https://shadcnpro.com/
• BoilerPro - https://boilerpro.co
• FastestEngineer SaaS boilerplate - https://fastest.engineer
• NextReady - https://nextready.dev

Laravel (PHP)

• Streamline https://streamlinelaravel.com
• Laravel Spark https://spark.laravel.com
• RapidSaaS Conduit - https://rapidsaas.dev
• Larafast https://larafast.com
• Electrik - Saas Starter Kit https://github.com/electrikhq/electrik
• SaaSWeb https://codecanyon.net/item/saasweb-laravel-58-vue-saas-starter-kit/24302103
• SaaSykit - https://saasykit.com/
• Larakits https://larakits.com/
• SaaS Starter Kit https://saasstarterkit.app
• Artiplate - https://artiplate.co/
• Wave https://devdojo.com/wave
• Nana https://saasstarterkit.app/
• Tenancy https://tenancyforlaravel.com/saas-boilerplate/
• saas-boilerplate. *Open Source. https://github.com/miracuthbert/saas-boilerplate
• Velocity https://pastaduck.gumroad.com/l/chbnv

NestJs (Typescript)

• Launchnow https://www.launchnow.pro/

Symfony (PHP)

• Parthenon Open Source - https://getparthenon.com

SvelteKit (Javascript)

• SaaS Starter / CMSaasStarter - https://saasstarter.work
• Just Ship - https://justship.today
• supastarter for SvelteKit - https://supastarter.dev/sveltekit
• SvelteLaunch - https://sveltelaunch.io
• CMSaasStarter - https://github.com/CriticalMoments/CMSaasStarter
• FastestEngineer - https://fastest.engineer

WordPress (PHP)

• Underscores, a starter theme - https://underscores.me/
• WPPB, plugin boilerplate generator - https://wppb.me/

Django (Python)

• Ready SaaS https://www.readysaas.app/
• SaaSitive https://saasitive.com
• SaaS Pegasus https://www.saaspegasus.com/
• Djaodjin. *Open Source. https://djaodjin.com/
• Carrot Seed https://www.cnc.io/en/seed
• The SaaS boilerplate by Apptension (+React) https://www.apptension.com/saas-boilerplate
• Vanty Starter Kit https://www.advantch.com/
• Saas Hammer https://saashammer.com/
• YaSaas https://github.com/roperi/yasaas/
• TheDevStarter https://thedevstarter.com/
• djangorocket - https://github.com/ernestofgonzalez/djangorocket
• Django SaaS (Open source): https://github.com/PaulleDemon/Django-SAAS-Boilerplate

Flask (Python)

• SaaS Forge. *Open Source. https://www.saasforge.dev/
• Ignite (SaaS Boilerplate). Commercial (source available). https://github.com/sumukh/ignite
• Flask App Builder. Open Source. https://github.com/dpgaspar/Flask-AppBuilder
• Build a SAAS App with Flask. Course / Boilerplate. https://buildasaasappwithflask.com/
• Enferno Frameowrk: Open Source . https://enferno.io/

FastAPI (Python)

• GeniePy SaaS starter codebase. https://geniepy.com/

.NET (ASP.NET Core / .NET 6+)

• ASP.NET Zero. .NET. https://aspnetzero.com/
• fullstackhero .NET 7 Web API Boilerplate. https://fullstackhero.net/dotnet-webapi-boilerplate/general/getting-started/

Java

• Openkoda (Java, Spring, Javascript, GraalVM). Open-source. Pre-built application templates. https://github.com/openkoda/openkoda

Go

• Autostrada. https://autostrada.dev/
• GoShip: HTMX, Templ, Tailwind with all the essentials for your SAAS, AI tools or web apps. https://goship.run/
• SaaS Startup Kit. Golang. Open Source. https://saasstartupkit.com/

Next.js

• TurboStarter https://turbostarter.dev
• NextJSDirectory - Boilerplate to build directories in minutes https://nextjsdirectory.com/
• Next.js Boilerplate - Free and Open Source Next.js Starter https://github.com/ixartz/Next-js-Boilerplate
• Next.js Subscription Payments Starter by Vercel - https://github.com/vercel/nextjs-subscription-payments
• Next.js Supabase Stripe Starter - https://github.com/KolbySisk/next-supabase-stripe-starter
• Bedrock. Next.js. https://bedrock.mxstbr.com/
• Next Starter AI - https://nextstarter.ai
• Next 14 FullStack SaaS Boilerplate - https://thesaasfactory.dev
• LaunchFa.st - Astro SaaS Boilerplate https://launchfa.st/
• Shipped — Next.js Startup Kit https://shipped.club/
• NextJS 14 SaaS Starter with Lucia and Stripe https://github.com/juliankoehn/nextjs-saas-starter
• Nextacular. Open Source. https://nextacular.co
• Usenextbase - https://usenextbase.com
• SaasRock - https://saasrock.com
• All-In-One Next & React Native Starter https://allinonedev.com
• supastarter for Next.js - https://supastarter.dev/nextjs
• ShipFast - https://shipfa.st/
• AI SaaS Boilerplate - https://appliful.com/
• NextSaaS - All-In-One Boilerplate with build-in CMS https://nextsaas.live
• Open Source Next.js SaaS Kit saaskit.one
• BoilerPro - https://boilerpro.co
• AI Next.js MVP Builder nextwrapper.com

React Native

• TurboStarter https://turbostarter.dev
• React Native Boilerplate - Build SaaS for iOS, Android and Web https://reactnativeboilerplate.com
• All-In-One Next & React Native Startr https://allinonedev.com
• SupaWrapper - RN Starter for AI apps https://supawrapper.com
• LaunchYourApp | React Native Boilerplate - https://launchyourapp.dev/

Plasmo (React)

• TurboStarter https://turbostarter.dev

Rare

• SupaNuxt SaaS. Nuxt3. Open Source. https://github.com/JavascriptMick/supanuxt-saas
• PySaaS. Python + Pynecone https://pysaas.io/
• Serverless SaaS. React. https://serverless.page
• GeniePy (Python & Starlette) https://geniepy.com
• Nuxt Starter AI - https://nuxtstarter.ai

Remix

• LaunchFast.pro https://launchfast.pro/
• OneMix by SaaS King - https://saask.ing

Ionic Framework

• Ionstarter - https://ionstarter.dev/

AWS

• BoilerPro - https://boilerpro.co

Firebase

• SUB - React, Typescript, Tailwind CSS, Firebase and Stripe - https://getsub.dev

from https://github.com/smirnov-am/awesome-saas-boilerplates

Fabric-Video-Editor

 A simple video editor made with nextjs, react, tailwindcss, mobx, typescript and fabric.js

fabric-video-editor.vercel.app

The app's live link to test in the browser is: https://fabric-video-editor.vercel.app/

Do you need a custom editor? Get in touch with me at Linked In Other: Website | Twitter |

This was a hobby project. I will add support for other features in the future. Looking for backend/ffmpeg developers to help me generate video from Canvas in the backend.

Fabric Video Editor is a video editor that runs in the browser. It is built with fabric.js, Next.js (a React framework), Tailwindcss, Mobx, and typescript.

Samples

3. New Updated UI

2. The editor supports Animations and Effects

Github.Fabric.Video.Editor.Video.mp4

1. Basic Working

Clip.720.-.Copy.Converted.mp4

Tech Explanation

todo

Features

• User can add
  • Text
  • Images
  • Video
  • Audio
• User can change
  • Canvas Background Color
• Timeline
• Export Video with Audio
• Animations
• Filters

Main Issues

1. There might be a problem with audio handling
2. Exported video doesn't have a time duration
3. Exported videos have flickering issue

Future Features

3. Properties Editing panel
4. Video Trimming

NextJs Default Guide (Updated)

This is a Next.js project bootstrapped with create-next-app.

Getting Started

Setup

1. Clone the repo

2. Run the development server:

npm run dev

3. Open http://localhost:3000 with your browser to see the result.

Debugging

1. Run the development server:

npm run dev

2. Then run Launch Chrome against localhost in Run and Debug tab in VSCode

Learn More

This project uses next/font to automatically optimize and load Inter, a custom Google Font.

To learn more about Next.js, take a look at the following resources:

• Next.js Documentation - learn about Next.js features and API.
• Learn Next.js - an interactive Next.js tutorial.

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!

from https://github.com/AmitDigga/fabric-video-editor