Relivator 1.3.0-canary.7: Next.js 15 eCommerce Template

We are currently migrating the documentation from the existing Relivator README.md to the official, newly launched Relivator & Reliverse Docs website (https://reliverse.org). The content will be organized into appropriate sections on the new site. During the migration, some elements might not function properly. The current README.md will contain only minimal information. Please let us know if you encounter any issues.

🌐 Demo | 👋 Introduction | 🏗️ Installation | 🩷 Sponsors

⚙️ Scripts | 🤔 FAQ | 🔍 Details | ✅ Roadmap | 📖 Changelog

Stop jumping from one starter to the next. With Relivator, your possibilities are endless! You can create anything you want; all the tools are ready and waiting for you.

The entire Relivator project was developed by one person, Nazar Kornienko (blefnk)! Some people have already contributed, and you’re welcome to do the same—any contributions at all are appreciated! Your contributions will not be forgotten; our awesome community value them highly, and you might even receive financial gratitude from the project's creator in the future. Let's come together to create the most coolest Next.js template in the world! This will be a joint effort and a shared victory, a true win-win. Thank you all for your contributions and financial support!

Please take a moment to read through the information below. You'll find helpful details about how everything works in the project, as well as an extensive list of features.

«I couldn't find the ~~sports car~~ Next.js starter of my dreams, so I built it myself.» © ~~Ferdinand Porsche~~ @blefnk

Our goal is to create the world's most feature-rich and globally accessible Next.js starter. It offers more than just code—it's an experience. Scroll down to see the impressive list of project features, including the ability to switch between Clerk/Auth.js (next-auth@beta/NextAuth.js) and Drizzle's MySQL/PostgreSQL on the fly. Welcome to the Relivator starter and the Reliverse community!

Introduction

👉 Read the Detailed Blog Post About 1.2.6 & 1.3.0@canary Update 👈

✅ Relivator 1.2.6 uses the following dependencies (only some are listed): Next.js 15, React 19, TypeScript 5.5/5.6, Tailwind 3/4, tRPC 11, Clerk 5, Auth.js 5, ESLint 9 (with multiple plugins like typescript-eslint 8, react, unicorn, sonarjs, perfectionist, tailwindcss, readable-tailwind, import-x, jsx-a11y, security, markdown, mdx, json), Biome, Stripe, Million, Reliverse, next-intl, shadcn/ui, radix-ui, react-query, pnpm, zod, cn, turbo, Drizzle (Postgres, MySQL, SQLite, Neon, Railway, PlanetScale, Turso), GSAP, SWR, Resend, react-email, next-themes, Putout, Flowbite, Udecode, Slate, uploadthing, Radash, CSpell, TypeStat, Lucide & Radix Icons, Vercel & Loglib Analytics, Axios, Day.js, Embla Carousel, Execa, Math.js, UnJS libs (consola, fs-extra, pathe, etc), and much more

[upd. 18.08.2024] You can now try out the first published Reliverse Addon – @reliverse/fs, which is already available and used in Relivator! 🎉 The upcoming Relivator 1.3.0 will have as few dependencies as possible. Everything will work thanks to @reliverse/addons. Everything will be separated into its own libraries and will be published on npmjs and/or jsr. You will be able to install exactly what you need, including functionality and UI. You will have two options. One is to install the addons the classic way using 'package.json'. The other option is that all these addons can also be installed in a style inspired by shadcn/ui, where you keep all the content directly in your project (as it is currently in test mode in Relivator 1.2.6 (please check addons folder or run pnpm addons)), although the first option will be recommended for the most use cases. 'addons' folder already contains many cool things, especially related to codemods. It also includes the @reliverse/academy game, where you can check how good you know JavaScript/TypeScript, React/Next.js, Relivator/Reliverse, and even ESLint, ecosystems (you will even find there table of records and will can contest with other players if you share data/players.json and data/progress.json save files to them; the game has also achievement system).

🙏 Please help us reach 1,000 stars on GitHub: Once this project reaches this goal, I, @blefnk, the author of this project, will start my video course on the basics of web development (HTML, CSS, JS), React, Next.js, TypeScript, related libraries, and many other topics. This milestone will also affirm that Relivator and Reliverse truly make sense to exist, leading to more frequent updates and further dedication to these projects.

⭐ Bookmark this page in your browser: This project will only get better in the future. You can also click the star at the top of the page and add the repo to your collection to keep it easily accessible.

The Huge Relivator 1.2.6 & 1.3.0@canary are Already Available

👉 Read the Detailed Blog Post About 1.2.6 & 1.3.0@canary Update 👈

Relivator 1.2.6 was released on August 4, 2024! We are now actively working on the next major update, Relivator 1.3.0, with the goal of making the project production-ready, clean, and high-quality. We invite you to join us in actively searching for issues, contributing freely, and earning cool rewards. A canary branch was launched a few days ago (and is available to everyone in the main repo), and the dev branch is also now available (the dev branch is available for a limited time to all sponsors at any paid pledge level).

🔥 Important Note: Relivator currently requires specifying Clerk environment variable keys, as its API has changed. We are working on making Clerk optional again. However, all other environment variables are optional. If this statement is incorrect and something is broken, please let us know.

What About the Future? Any News on 1.3.0?

🎉 The upcoming Relivator 1.3.0 will have as few dependencies as possible! Finally!

I'm (blefnk) working to automate the Relivator's developer experience as much as possible, including the installation process. The upcoming version 1.3.0 will feature significant automated installation. If you wish to try the initial alpha version of one of my many automation scripts, use the pnpm deps:install (or pnpm deps:install-all) command. This script already allows you to install and remove project packages, and it also works as a linter. You can check the comprehensive number of predefined commands configured inside the 'scripts' section of the 'package.json' file. However, before running this script, you should manually install the essentials:

npx npm add typescript tsx npm @mnrendra/read-package @clack/prompts
npx npm add fs-extra pathe fast-npm-meta semver @types/semver redrun axios
bun|yarn|pnpm dlx jsr add @reliverse/core (or: npx jsr add @reliverse/core)

Thanks to @reliverse/addons, everything now works smoothly with fewer dependencies. In the future, each feature and component will be split into its own library and published on npmjs and/or jsr, so you can install only what you need. With the future Relivator 1.3.0 version, you won't have to deal with unnecessary components in web templates anymore. You get the core package and can add features and UI components as you need them.

The 'addons' folder is divided into two parts: terminal context and browser context (it's everything, excluding the 'addons/scripts' folder). The 'addons/scripts' folder contains functions used by the CLI (command line interface), while the 'src' and 'addons/*' folders (excluding 'addons/scripts') are for the browser, since the browser doesn't support certain JS features. So, while 'addons/scripts' has everything needed for the whole app, not everything can import from 'addons/scripts'.

You’ll have two installation options: the classic method using 'package.json' or a new approach inspired by shadcn/ui, where you keep all the content directly in your project (currently in test mode in Relivator 1.2.6—check the addons folder or run pnpm addons). While the classic method is recommended for most cases, feel free to explore the new approach!

The 'addons' folder is already packed with many exciting features, especially related to codemods, and includes the @reliverse/academy game. This game allows you to test your knowledge of JavaScript/TypeScript, React/Next.js, Relivator/Reliverse (make food/tea/coffee before trying this test—it has a lot of questions!), and even ESLint v9 ecosystems. It features a leaderboard, enabling you to compete with others by sharing data/players.json and data/progress.json save files. Plus, an achievement system keeps you motivated!

I can’t wait for you to experience the new and improved Relivator 1.3.0! By the way, the items in the ✅ Roadmap section will finally be checked off! But to make 1.3.0 truly stable, production-ready, and just great, let's first work together on Relivator v1.3.0-canary.0, which is coming soon! If you want to get it even faster, there is now a 'dev' branch. We recently opened the project pages on financial support platforms, and currently, any contribution grants you access to the 'dev' branch. Thank you for your attention!

🖥️ Hire Me

Hello, I'm Nazar Kornienko, a flexible web developer specializing in JavaScript/TypeScript and React/Next.js front-end development. If you’re looking for someone with my skill set, please contact me at blefnk@gmail.com or via Discord.

Please explore the current repository to learn more about my experience with the JavaScript/TypeScript and React/Next.js ecosystems. I'm available for both remote work and full-time positions. While my primary focus is frontend and CLI development, if you need help with code automation tools, small tasks related to Python or backend, or even designs in Figma, graphic design, or copywriting/marketing, feel free to reach out to me as well—I’d love to see how I can assist.

🤝 Partnerships

Starting with version 1.2.6, Relivator is now truly production-ready. However, there's still much to be accomplished, and you might be surprised when you check the ✅ Roadmap section! To reach our goals, we are seeking partners to collaborate and support each other's projects' growth. If you're interested and would like to learn more, please feel free to email me at blefnk@gmail.com.

Our Partners

Railway

🙏 Dear Audience, I Need Your Help

Currently, I’m in a challenging financial situation, so I would greatly appreciate any recommendations or mentions of my work and Relivator as part of my portfolio, such as on the pages of your own repositories. Your support would mean a lot to me! As a token of my appreciation, I’d be happy to send some interesting gifts to you. Thank you for your time and consideration!

Installation

How to Install and Get Started: You have two options for installation. You can either immediately deploy to Vercel using the button below and start working on the generated repository right away (but still read the information below), or you can follow the short or detailed manual installation instructions provided.

By The Way: Sometimes, we gift Reliverse Pro, which gives you early access to the Reliverse projects ecosystem, including Relivator, as well as upcoming plugins, to randomly selected individuals. We also give away other interesting things. Simply star this repository and let us know how to reach you. To join the discussion, hop into the project's Discord.

One-click Installation Method (find recommended method below)

🔥 Important Note: Relivator currently requires specifying Clerk environment variable keys, as its API has changed. We are working on making Clerk optional again. However, all other environment variables are optional. If this statement is incorrect and something is broken, please let us know.

By using this method, you will get only the front-end, with all the functionality disabled (learn how to enable it by reading the manual instructions below):

Please note: As of version 1.2.6 and 1.3.0 (dev and canary), it is recommended to use Clerk as the authProvider (specified in the reliverse.config.ts file) since this version has been more thoroughly tested with Clerk. We are working on fixing and improving the stability of Auth.js (next-auth@beta/NextAuth.js) as an authentication provider.

Manual Installation: Short Method (find recommended method below)

🔥 Important Note: Relivator currently requires specifying Clerk environment variable keys, as its API has changed. We are working on making Clerk optional again. However, all other environment variables are optional. If this statement is incorrect and something is broken, please let us know.

Node.js LTS: (A) classical method - Windows/macOS | Linux; (B) nvm - Windows | macOS/Linux; (C) fnm.
Tools: corepack enable pnpm ➞ VSCode ➞ Git ➞ GitHub Desktop (Windows/macOS | Linux) ➞ Stripe CLI. Windows only: PowerShell 7.4+.
Fork the repo: Download your fork using GitHub Desktop.
Setup: pnpm install && install:global && pnpm reli:setup ➞ pnpm reli:vscode ➞ cp .env.example .env ➞ fill in the values inside of .env ➞ pnpm db:push ➞ reliverse.config.ts.
Run, Build, Deploy: Use pnpm dev to run the app. Stop with Ctrl+C. Build with pnpm build. Run pnpm appts to check the code. Upload to GitHub with GitHub Desktop. Deploy on Vercel.

Manual Installation: Detailed Method (recommended)

🔥 Important Note: Relivator currently requires specifying Clerk environment variable keys, as its API has changed. We are working on making Clerk optional again. However, all other environment variables are optional. If this statement is incorrect and something is broken, please let us know.

▲ Hotline: Email | Discord | Slack | Cal.com

I'm (blefnk) working to automate the Relivator's installation process as much as possible. The upcoming version 1.3.0 will feature a significant automated installation. If you wish to try the alpha version of one of my many automation scripts, use the pnpm deps:install (or pnpm deps:install-all) command. However, before running this script, you should manually install the essentials (edit 'pnpm dlx jsr' if needed): npx nypm add typescript tsx @clack/prompts @mnrendra/read-package nypm ora fs-extra pathe fast-npm-meta semver @types/semver redrun && pnpm dlx jsr add @reliverse/core.

Please note: As of version 1.2.6 and 1.3.0 (dev and canary), it is recommended to use Clerk as the authProvider (specified in the reliverse.config.ts file) since this version has been more thoroughly tested with Clerk. We are working on fixing and improving the stability of Auth.js (next-auth@beta/NextAuth.js) as an authentication provider.

Node.js LTS: Ensure you have Node.js LTS installed using: (a) classical method - Windows/macOS | Linux; (b) nvm - Windows | macOS/Linux; (c) fnm.
Essential Tools: Then, run corepack enable pnpm to install pnpm. Also, install VSCode, Git, GitHub Desktop (Windows/macOS | Linux), and Stripe CLI. If you're a Windows user: install PowerShell 7.4+ as well.
Project Cloning: Fork the repository or click on the Use this template button. Use GitHub Desktop to download it to your device. The project size is about 12MB, but ensure you have at least 7GB of disk space for comfortable work, as the node_modules and .next folders require it.
Configuration: Open the project folder in VSCode. Install the recommended extensions from .vscode/extensions.json and/or install the advanced VSCode configurations by using pnpm reli:vscode (choose the default preset for the best experience or the ultimate preset for the best experience). You can also refer to the ⚙️ Scripts and 🤔 FAQ RQ19 below to learn more about this script and its configurations. You can press Cmd/Ctrl+F and search for "Q19/Q20" if you want to install more extensions and settings (remember, more extensions mean slower VSCode). Then click File > Exit (VSCode will save all your open windows). Open VSCode again. Press Ctrl+Shift+P (or just F1) and search for >Create New Terminal, or just press Cmd/Ctrl+Shift+~ (on Windows make sure that it uses PowerShell 7.4+, click the arrow next to + ➞ Select Default Profile ➞ PowerShell). If VSCode prompts you to allow the usage of the project's TypeScript version, allow it if you're a Windows user. On other operating systems, you may or may not encounter path issues.
Environment: Run pnpm install (or npx nypm install) and/or, optionally, install:global to install the required packages. It is also recommended to configure reliverse.config.ts file. Then, optionally, you can use pnpm deps:install-all—especially pnpm deps:install-all (this is currently an alpha script)—to unlock some additional features, like the eslint.config.ultimate.ts preset (which will have a .txt extension by default starting with Relivator v1.3.0). (NOTE: As of Relivator v1.2.6, the ultimate preset is configured by default, so no action is required). Next, configure Relivator to meet your needs using the pnpm reli:setup and/or pnpm reli:vscode commands, and relaunch VSCode. You have two options: deploy with zero values in the .env file (resulting in just the frontend without features related to auth, database, pricing, etc.), or copy the .env.example file to a new .env file and fill in the values you want (everything is optional starting with Relivator v1.2.6). It is highly recommended to fill in the DATABASE_URL field. Then, set the database provider in drizzle.config.ts and make changes in related files if needed. Finally, send the database schema to the database using pnpm db:push. You can learn more about databases below in the current README.md file.
Run, Stop, Build: Run the app with pnpm dev or pnpm turbo:dev (interactive but unstable). Visit http://localhost:3000 to check it out. Stop it by focusing on the console and pressing Ctrl+C. After making changes, build the app using pnpm build or pnpm turbo:build. Don't worry if you see warnings related to Clerk, React Compiler, Babel, next-auth, etc. when running the build; these are known issues not related to Relivator. Note that when using the pnpm turbo:build command, the VSCode terminal may not exit automatically. If this happens, press Cmd/Ctrl+C to close the process manually.
Check, Commit, Deploy: To check if the current codebase meets @reliverse/standard, run pnpm appts (or pnpm appts:noputout, or pnpm turbo:appts, or pnpm appts:nobuild). Learn more about project scripts in the next section. If everything is fine, upload the project to your GitHub profile using GitHub Desktop. Finally, deploy it by importing the project into Vercel, making the website publicly accessible on the internet. Alternatively, you can use pnpm deploy or just vercel to preview and inspect the local deployment without committing to GitHub every time.

It is recommended: From time to time, run pnpm reli:prepare. This script executes pnpm install, which checks for issues or installs/removes manually added/removed dependencies in your package.json file. It also executes pnpm latest, which installs the latest versions of project dependencies. Finally, it runs pnpm appts, which will do its best to improve your code and check for any errors. Note: Since pnpm latest updates all packages to their latest versions, be aware that something in the code might break, especially if considerable time has passed since the last version of Relivator was released. Therefore, you can use, for example, the VSCode extension Open Multiple Files to easily find and fix broken code, or reach out to the Relivator Discord server for assistance, or create a GitHub Issue. You can learn more about those scripts and the mentioned extension below in the current README.md file.

If you'd like to share your work, get/provide feedback, or ask for help, feel free to do so either in our Discord server or via GitHub discussions. Note: Currently, the instructions above may be outdated. Please contact us if something goes wrong; everything will be updated in Relivator 1.3.0.

🎶 Recommendation

Coding becomes a whole new experience with the right music, doesn't it? Enhance your workflow with Relivator and enjoy the soothing melodies from the MF Piano YouTube channel. This channel, run by my brother, offers beautiful piano covers that are perfect for background music. Your subscriptions, views, likes, and comments would mean the world to us and help his channel grow. Thank you for your support!

Scripts

The project includes various scripts designed to enhance your developer experience. You can run any script using your terminal. Please note that some CLI scripts may require you to adjust the height of your terminal window to avoid UI anomalies. The Relivator allows you to use the following:

💪 Native Scripts: These are commands configured in package.json and run by the package manager like pnpm, bun, yarn, or npm. You can run these "native" scripts using commands like pnpm [dev|build] and pnpm db:[push|studio].
⚙️ Custom-Built Scripts: These scripts are written in TypeScript and Python by Reliverse and the community and are mostly located in the addons folder. 🔥 Please be cautious when using transformation scripts, as they are all in their initial versions. Ensure you commit your changes to your version control provider (such as GitHub) before using any of them. They can be executed via the command line using [appts|addons|reli|lint|fix]:* or manually via pnpm tsx path/to/file or py path/to/file (e.g., py addons/scripts/reliverse/relimter/python/tasks/math-to-mathjs.py).
🐍 Python Script Manager: Can be executed using reli:manager or py addons/scripts/reliverse/relimter/python/index.py. Before running it, please read the 🐍 Python section below to learn how to prepare your workspace to run this manager.

package.json

Below are some scripts configured in the scripts section of the package.json file (the following text may be outdated in some places, please let us know if you find any inaccuracies):

pnpm appts / pnpm appts:putout / pnpm appts:verbose / pnpm appts:nobuild: These commands perform a comprehensive codebase check. They sequentially run pnpm knip for various codebase checks, pnpm format to format code with Biome (or Prettier, coming soon), and pnpm lint for linting with Biome and ESLint (pnpm lint:eslint). Linting may take some time, so please be patient. The pnpm appts:putout command also runs pnpm lint:putout. Using pnpm appts:verbose displays detailed ESLint progress, useful if you suspect ESLint is stuck (it may be slow, not stuck). You can manually resolve issues by pressing Ctrl+S multiple times in VSCode until there are no issues in the "Problems" tab. Usually, issues are resolved by the second or third run. If some specific issues persist, it may mean they are not automatically fixed. Please try to fix them manually, contact us, or disable the rule. Many rules in eslint.config.js are disabled by default; enable only what you need. You may also want to run pnpm reli:setup to choose the RulesDisabled preset if you want to disable all "error" and "warning" rules at once. pnpm appts then runs pnpm typecheck for remaining TypeScript errors and pnpm build, but you may try pnpm turbo:appts, which runs pnpm turbo:build to speed up builds using Turborepo v2. Note that pnpm turbo:appts is a faster, interactive version of appts but may not work well with the VSCode terminal. Alternatively, you can use pnpm appts:nobuild, which performs only checking, linting, formatting, and fixing, without building.
pnpm fix:putout-unstable: Putout is a linter and formatter. While the formatter fixes issues reported by the linter, the fix:putout-unstable command also makes changes not flagged by the linter. Ensure you commit your code before running this command, as it might cause unexpected changes. After running it, review and adjust the changes in your codebase using VSCode Source Control (Cmd/Ctrl+Shift+G) or GitHub Desktop.
pnpm db:[push|studio|generate|migrate]: push converts the TypeScript Drizzle schema to SQL and sends it to the DATABASE_URL; studio runs Drizzle Studio on https://local.drizzle.studio; migrate applies migrations generated by the generate command (you may not need this command anymore), based on the drizzle.config.ts file.
pnpm stripe:listen: Runs the Stripe webhook listener and helps set up Stripe environment variables. The Stripe CLI must be installed for this command to work.
pnpm addons: This command allows you to headlessly run some of the scripts located in the addons folder. Many scripts are still not added there, so please check the addons folder and run them manually using pnpm tsx path/to/file or py path/to/file. This also includes the game @reliverse/academy. In the future, it will have many different interesting features. Currently, it is a quiz with a leaderboard and achievements where you can test your knowledge of Relivator, JavaScript, TypeScript, React, and even ESLint.
reli:manager: Learn more in the 🐍 Python section below. This is the alias for the py addons/scripts/reliverse/relimter/python/index.py command.
pnpm latest: Updates all project packages to their latest stable versions, including some specific packages to their latest versions on rc/beta/alpha/next/canary branches.
pnpm reli:vscode [nothing|minimal|default|ultimate]: Enhances VSCode settings with presets by Reliverse. This script adjusts your settings.json, extensions.json, and launch.json files. It will prompt for confirmation before overriding current files. Use RQ20 to learn more about .vscode presets and font installation for the ultimate preset, or use the default preset (which doesn't contain custom fonts and themes). Choose default, minimal, or nothing if your PC or virtual machine is very slow.
pnpm reli:help: Displays useful information about Relivator and Reliverse.
pnpm lint:compiler: Runs the React Compiler health check. Note that React Compiler is disabled by default; see the FAQ section for more details.
pnpm tw:[v4|v3]: Switches between Tailwind CSS v3 and the alpha v4 version. Important: After using this command, adjust comments in postcss.config.cjs. Also: When using Tailwind CSS v4, remove or comment out tailwindPlugin from eslint.config.js as it doesn't support v4. Some additional changes in the codebase may be required.
pnpm reli:prepare: Learn more about this script in the previous section (Cmd/Ctrl+F "It is recommended").

# pnpm tsx reliverse.config.ts --details
ℹ ▲ Framework: Relivator v1.2.6 ▲ Engine: Reliverse v0.4.0 ▲ Hotline: https://discord.gg/Pb8uKbwpsJ
ℹ Relivator v1.2.6 Release Blog Post 👉 https://reliverse.org/relivator/v126
ℹ Help Relivator become even better! Please star the repo – https://github.com/blefnk/relivator
ℹ For experienced users: run 'pnpm reli:prepare' to update all dependencies to the latest versions and check if the code requires any adjustments.
ℹ Meet quality standards: run 'pnpm appts' and 'pnpm fix:putout-unstable' to get linting, formatting, and more.
ℹ Unstable: try 'pnpm turbo:dev' and faster build with 'pnpm turbo:build': https://turbo.build/repo
ℹ The reactCompiler is enabled in next.config.js - it uses webpack now, so builds take longer.
ℹ Clerk: make sure to connect the domain in the Clerk dashboard so services like PageSpeed will work.
ℹ Please find Q21 in the FAQ of README.md. Copy the adapted bun scripts and replace the current ones in package.json - scripts for other package managers coming soon.

Python

👋 Hello, dear friend! Nice to see you here! I (@blefnk Nazar Kornienko) have a dream of making the open-source world better and of higher quality. I aspire to leave my mark in history by ensuring people genuinely enjoy programming and create quality products. I'm particularly passionate about clean code. The book "Clean Code" by Robert Martin is a must-have!

That's why I've developed numerous tools in Relivator. Over the past few months leading up to Relivator 1.2.6, I've learned a lot. To avoid manually rewriting code, I've developed a unified script manager. The current version of the manager is still very unstable. You can visit the addons/scripts/reliverse/relimter/python/index.py file to learn more about how this script manager works.

If you want to use this Python Script Manager (refer to ⚙️ Script to read the introduction), then please ensure your workspace is properly prepared for it. Please note that most scripts are largely untested. Commit your code before running any script. Increase your VSCode terminal window size to avoid UI glitches. Need help? Visit our Discord. Follow the steps below to get started (scroll down to learn even more Python commands):

✅ After following the instructions above, you can safely run the script manager.

Install Python and Ruff. Install the following VSCode extensions: Python and Ruff.
Create a new .venv folder by pressing Cmd/Ctrl+Shift+P and running >Python: Create Environment... (VSCode will prompt you to choose the Python interpreter; choose the one installed in step 1). Then, choose requirements.txt as the package dependencies file.
Please note, VSCode's terminal automatically activates the environment after each launch. You can verify this by hovering over a [pwsh|bash|cmd] button in VSCode's terminal and looking for something like "Python: Activated environment for .\.venv\Scripts\python.exe". However, if you are using another IDE or an external terminal, you may need to activate the virtual environment manually: [Windows] .venv/Scripts/activate; [macOS/Linux] source .venv/bin/activate.
Ensure all requirement are installed correctly, just run pip install -r requirements.txt.

🐍 Everything ready? Nice! Congratulations! Try running the Python Script Manager now by executing: reli:manager or py addons/scripts/reliverse/relimter/python/index.py

Useful Python Commands

We are still working on this section. The following description may currently be slightly incorrect.

# - Install the required dependencies:
pip install -r requirements.txt

# - Make sure you have `pip-tools` installed to use `pip-compile` and `pip-sync`:
pip install pip-tools

# - You can create/update a `requirements.txt` file:
pip freeze > requirements.txt

# - Sync the dependencies:
pip-sync requirements.txt

# - Remove a specific package (e.g., torch):
pip uninstall torch
pip freeze > requirements.txt

Please note: If you have UV installed and you've used a command like uv pip install InquirerPy and it shows an error like "The wheel is invalid", the easiest solution is to just use regular pip commands like pip install InquirerPy.

FAQ

This is not only a Reliverse-specific FAQ but also a developers' FAQ for Next.js and the React ecosystem in general.

RQ1: How do I enable the brand new React 19's React Compiler? RA1: Please visit the next.config.js file, and inside the experimental section, find reactCompiler and set it to true. Additionally, it's recommended to install pnpm -D babel-plugin-react-compiler. There are great ESLint rules, but they are uninstalled by default because they enable Babel/Webpack, which may slow down the build. If you just installed this plugin, then open eslint.config.js, find, and uncomment things related to it (use Cmd/Ctrl+F and search for compiler).
RQ2: How do I ensure my code is fully auto-fixed? RA2: Please note that you may need to press Cmd/Ctrl+S a few times to have the code fully fixed by various tools.
RQ3: How can I check the project's health? RA3: Run pnpm appts or pnpm turbo:appts (unstable but interactive and faster) to check the project's health.
RQ4: How can I update all packages to the latest version? RA4: For experienced developers, run pnpm latest to update all packages to the latest version. Alternatively, use 'pnpm reli:prepare' to update all dependencies and check if the code requires any adjustments.
RQ5: Why do I sometimes see the notification Invalid JSON. JSON5: invalid character '#'? RA5: No worries, looks like you've thinker.sort-json VSCode extension installed, and it seems to be an incorrect error thrown by this extension. But it's not recommended to use external sort-json-like extensions, because we've configured eslint-plugin-jsonc, which already does sorting in the more predicted way. If you still need thinker.sort-json, looks like it can't sort JSON files in rare random cases, but it works fine on the next file save (if your file doesn't have issues, of course). If this error is causing significant problems, such as preventing you from adding a word to CSpell, you can set source.fixAll.sort-json to never in editor.codeActionsOnSave of .vscode/settings.json.
RQ6: What should I do if I notice outdated information or other issues in the README.md or other files? RA6: In an effort to be as helpful as possible, this README contains a wealth of information. Some text may be outdated and will be updated as we grow. Please let us know on the discussion page if you notice any small issues like outdated info, broken links, or grammatical/spelling errors in README.md or other files.
RQ6: What versions of React and Next.js does the project currently use? RA6: The project currently uses react@canary, react-dom@canary, and next@canary. If React 19 and/or Next.js 15 have already been fully released, please remove them from the latest script and run, for example, npx nypm add react@latest react-dom@latest next@latest in the terminal. You can do the same with any other rc-alpha-beta-next-canary-dev-experimental-etc dependencies, on your choice, if their stable version has already been released.
RQ7: Where should I store project-specific files, and how do I handle ESLint issues? RA7: You can use the src/cluster folder to store project-specific files. This makes it easy to update Relivator to new versions. Learn more by visiting the Dashboard's main page on the development environment. After doing this, be prepared to see many issues pointed out by the ESLint config. Run pnpm lint to apply auto-fixes; linting can take some time, so please be patient. You may need to run lint or lint:eslint again if some issues are not fixed automatically. You can also open those files manually and press Ctrl+S multiple times until there are no issues in the VSCode "Problems" tab. Typically, by using the CLI, the issues will be resolved by the second or third run. Next, install the Open Multiple Files extension in VSCode; right-click on the src/cluster folder, select Open Multiple Files, and press Enter. Fix all issues. If you are proceeding incrementally, you can suppress certain ESLint/Biome rules (// eslint-disable-next-line ..., // biome-ignore ..., or completely disable the rule in the relevant config) or TypeScript errors (@ts-expect-error), though this is not recommended.
RQ8: Weird things happening when formatting code? The code looks one way, and then the next second, it looks different? For example, you see the number of code lines increasing and then decreasing at the same time upon file saving? Without changing the code, does Biome notify you e.g. "Fixed 6 files" instead of "No fixes needed" when you rerun pnpm appts? RA8: Congrats! You've encountered a conflict between linters or formatters. First, we recommend opening the .vscode/settings.json file, finding the eslint.rules.customizations section, and changing the severity from "off" to "info" (if "off" is present). Setting it to "info" will help you realize that one of the conflicting parties is potentially a rule in that eslint.rules.customizations. Next, you can try to correct files like eslint.config.js (e.g., disable that conflicting rule), biome.json, .vscode/settings.json, etc. You can also try to disable Biome or ESLint formatters completely, by setting biome.enabled or eslint.enable (or eslint.format.enable) to "false" in the .vscode/settings.json file. What about that "Fixed 6 files" example? It means Biome changed code in some files in the way which is different from ESLint.
RQ9: What should I do if I get a Babel warning about code generator deoptimization? RA9: This is a known issue and can be ignored. One of the reason occurs because the React Compiler is not yet fully natively supported by Next.js, it temporarily enables Babel to make the Compiler work. Also, don't worry if you see warnings thrown by Clerk, next-auth, or others when running pnpm build (mainly on Windows and Node.js); it's okay, this is a known issue not related to Relivator. It is also okay if pnpm tells you Issues with peer dependencies found; you can hide this warning by editing pnpm.overrides in the package.json file. P.S. Ignore the Unexpected value or character. error from Biome if you see it in the globals.css file. This is a false error, which you can hide by filtering !globals.css or just !**.css in the VSCode's Problems tab (use !**.css, !**/node_modules/** there if VSCode's Biome extension parses node_modules for some unknown reason).
RQ10: Can I open multiple files in my VSCode? RA10: We recommend the Open Multiple Files extension. Just right-click on the desired folder, e.g., src, and choose "Open Multiple Files".
RQ11: I have a strange Each child in a list should have a unique "key" prop. Any tips? RA11: If you see something like at meta / at head below this error, or <locals>, but the module factory is not available. It might have been deleted in an HMR update., first try disabling experimental.instrumentationHook, if you have it, in next.config.js. You can also try deleting the .next folder. Please contact us if the problem persists.
RQ12: Million Lint reports Attempted import error: '__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED' is not exported from 'react' (imported as 'L'). during the A12#12 What should I do? RA12: The easiest solution is to copy the path to the component file that appears under this error and add it to filter.exclude in the next.config.js file. Generally, the key word is use. Click on the component path below this error. It seems Million has not listed every possible external useSomething. Many useSomething hooks work fine, but some may cause issues. This error is also triggered if you use "use client"; but no client-specific features are utilized. In this case, remove this directive. Additionally, Million.js sometimes doesn't recognize the import * as React from "react"; statement – so you need to remove it and explicitly import each React hook, type, etc. This line was removed from over 80 files in Relivator v1.2.6 for this reason.
RQ13: Why do I see a warning in the terminal containing the message terminating connection due to immediate shutdown command? RA13: This warning occurs because providers like Neon disconnect users from localhost if they are inactive for about 5 minutes. Simply refresh the page to restore the connection.
RQ14: How do I remove unused keys from JSON files? RA14: Install the i18n Ally VSCode extension, open its tab, click on refresh in the usage report, right-click on the found unused keys, and select remove.
RQ15: How can I grant admin rights to myself or another user? RA15: Run pnpm db:studio, navigate to the ${databasePrefix}_user table, and set role: admin for the desired user. In the future, if you have admin rights, you will be able to change user privileges directly from the frontend admin page.
RQ16: What does the DEMO_NOTES_ENABLED environment variable mean? RA16: Do not use it. It is only used on the official Relivator demo website to showcase certain features that are not needed in real-world applications.
RQ17: I'm using PlanetScale as my database provider. After taking a break from the project, I'm now encountering an "unable to connect to branch" error. How can I fix this? RA17: Go to the PlanetScale dashboard and click on the wake up button. Please contact us if the database is not asleep and the problem persists.
RQ18: I have build/runtime errors indicating that Node.js utilities like net, tls, perf_hooks, and fs are not found. What should I do? RA18: Do not install these utilities; it won't fix the issue. Remember, never keep code in the utils folder that can only run on the server. Otherwise, you will encounter anomalies during the project build. For example, an error like node: and file: not found, or the package fs, crypto, etc. not found. Want to see the error for yourself? Move the file src/server/react.ts to src/utils, import it in this file, run pnpm build, get scared, remove the import, and move the file back to its place. You may find on the web the solutions suggesting to add configurations like "node": { "net": "empty", "tls": "empty", "perf_hooks": "empty", "fs": "empty" } or "browser": { "net": false, "tls": false, "perf_hooks": false, "fs": false } into package.json or to the webpack config, but these may not help you. The main issue likely lies in the following: You've triggered client-side code. For example, you might have a hook file in the utils folder with a corresponding useEffect React hook. To debug, try using the global search functionality in the IDE. Note that commenting out the lines may not be the quickest solution in this case, unlike in other debugging scenarios.
RQ19: I love all kinds of interesting things! Can you recommend any cool VSCode extensions? RA19: Of course! Just replace the current code in .vscode/extensions.json with the one from addons/scripts/reliverse/presets/vscode/[default|minimal|ultimate]/extensions.json. Remember, performance issues are possible, so you can just install what you want. Alternatively, you can just run the pnpm reli:vscode command to switch easily, and use Cmd/Ctrl+Shift+P ➞ >Extensions: Show Recommended Extensions.

The best way to install this opinionated list of extensions, which are in the ultimate preset (although default is recommended by us), is to open the project folder in VSCode. Then, install them by using Ctrl+Shift+P (or just F1) and typing >Extensions: Show Recommended Extensions. Click on the cloud icon (Install Workspace Recommended Extensions). Wait for the completion. Click File > Exit (this will save all your open windows). Open VSCode again, and you are ready to go. The configuration for these extensions is already prepared for you. You can learn more about these extensions, which the ultimate preset contains, on the corresponding pages.

And, remember! If you have something broken, you always can find the default files content of .vscode folder in the .vscode/presets/default folder.
[Reveal the spoiler]

This list may be outdated, and will be updated in Relivator v1.3.x.
"TypeScript Essential Plugins" Extension Notes: You can configure extension settings by opening VSCode Settings UI and searching for @ext:zardoy.ts-essential-plugins there. The quote from VSCode Extension Repository: «Feature-complete TypeScript plugin that improves every single builtin feature such as completions, definitions, references and so on, and also adds even new TypeScript killer features, so you can work with large codebases faster! We make completions more informative. Definitions, references (and sometimes even completions) less noisy. And finally our main goal is to provide most customizable TypeScript experience for IDE features.»
RQ20: [Related to the previous question] How can I improve my visual experience with VSCode? RA20: The project already has a well-configured .vscode/settings.json, but we recommend using our very opinionated configs presets. You have choice to install default or ultimate (default is recommended). To activate the preset run pnpm reli:vscode. For ultimate preset don't forget to install the required stuff: the static, means not variable, versions of JetBrains Mono (recommended) and/or Geist Mono and/or Monaspace (small manual configuration not or may be needed if you don't want to use JetBrains Mono on ultimate preset). Next, for ultimate, install the recommended pop-icon-theme VSCode icons pack extension. Finally, make sure to install the extensions from Q19, especially, install the recommended by us GitHub Light and Houston (by Astro developers) themes. Please note that after installing the Houston theme, you will find a new corresponding tab on the sidebar (🧑‍🚀 there is your new friend, which reacts while you've code issues!), you can of course remove this tab by right-clicking, but we recommend simply dragging this panel to the bottom of the Folders tab.
- TODO: Fix 'Geist Mono' and 'Monaspace Argon Var', which looks like use Medium/Bold variation instead of Regular ("editor.fontWeight": "normal" doesn't help here). 'JetBrains Mono' works fine.*
- TODO: Do we really need to duplicate fonts for every single thing?* 🤔

RQ21: How do I switch the package manager from pnpm to bun, yarn, or npm? RA21: Here's a variant of scripts for bun, but it not tested too much by us. Scripts presets for other package managers coming with Relivator 1.3.0. Just replace it in package.json (and make sure it don't miss anything).

[Reveal the spoiler]

Just find and remove packageManager key, if present, and then replace only these specific lines by bun's alternatives:

{
  "scripts": {
    "check:compiler": "bunx react-compiler-healthcheck@latest",
    "fix:codemod-next-community": "bunx @next/codemod --dry --print",
    "fix:codemod-react": "bunx codemod react/19/replace-use-form-state --target src",
    "install:global": "bun add -g vercel@latest codemod@latest eslint_d@latest",
    "latest:all": "bun update --latest",
    "putout:dont-run-manually": "bun lint:putout . --fix",
    "reli:prepare": "bun install && bun latest && bun appts",
    "rm:other": "bun fse remove .million && bun fse remove .eslintcache && bun fse remove tsconfig.tsbuildinfo"
  }
}

After you have replaced the scripts, open the project folder and close VSCode. Delete node_modules and pnpm-lock.yaml. Open the project in a terminal and run npx nypm install. After that, you can reopen VSCode. You're done!

RQ22: I applied the default/ultimate preset settings in VSCode, and now my IDE is slow when I save a file. RA22: Go to the keybindings in VSCode, set Save without Formatting to Ctrl+S (Cmd+S), and File: Save to Ctrl+Shift+S (Cmd+Shift+S). Don't worry if the code might be messy when saving without formatting. Just run pnpm appts and everything will be improved and formatted. You're welcome! P.S. You can also read the VSCode's Performance Issues article.
[Reveal the spoiler]

keybindings.json (F1->>Preferences: Open Keyboard Shortcuts (JSON)):
```
[{
  "command": "workbench.action.files.save",
  "key": "ctrl+shift+s"
}, {
  "command": "workbench.action.files.saveWithoutFormatting",
  "key": "ctrl+s"
}, {
  "command": "workbench.action.nextEditor",
  "key": "ctrl+tab"
}, {
  "command": "workbench.action.previousEditor",
  "key": "ctrl+shift+tab"
}]
```
RQ23: What does index.ts do in the server and utils folders? RA23: These are called barrel files. You can make imports more convenient in your project by using the barrel approach. To do this, use index.ts files to re-export items from other files. Please note: keep code that can only run on the server in the server folder. Code that can run on both the server and client sides should be kept in the utils folder. Relivator 1.2.6 currently violates this description, so we should fix it in v1.3.0. Typically, server functions look like getDoSomething. Additionally, do not import code from the server folder into .tsx files that use React Hooks (useHookName), except when the component has useTransition or similar, which allows you to perform a server action from within the client component.
RQ24: Why do I see console.[log|info|warn|error|...] only in the browser console and not in the terminal from which the application was launched? RA24: If I (@blefnk) researched correctly, it is because you are calling console() in a client-side component (which has the "use client" directive at the top of the file or uses React Hooks). It looks like the terminal works as a server environment. Try calling console() in a file that does not have that directive and hooks. Or just use toasts which works nice with both on the client and the server side.
RQ25: I'm getting strange VSCode extension errors, what should I do? RA25: Don't worry, these are just editor anomalies. Just restart your VSCode, and you're done. Sometimes, due to insufficient RAM, internal extension failures, or other reasons, a particular extension might crash. Especially anomalous is the notification from TypeScript ESLint stating that it can have no more than 8 entry files (we will try to fix this in 1.3.0). Or Biome might start linting node_modules for some reason, which is also strange to us; our attempts to fix this so far have been unsuccessful, but we will try again in 13.0. Besides this, an extension crash might also happen if you just used pnpm reli:setup and didn't restart the editor. Or if you manually edited a configuration file and since autosave was enabled, the editor managed to send the configuration with syntax errors to the extension, causing everything to crash. So, restart VSCode, and everything will be fixed! If that doesn't help, check if your configuration files have any issues.
RQ26: How do I change VSCode's panel position? RA26: Just right-click on the panel, select Panel Position, and choose the desired position, e.g., Bottom.
RQ27: I have the correct data (key-value) specified in the .env file, but a certain library, for example, Clerk, does not see this data or sees outdated data. What can I do? RA27: The simplest solution is to just rename your project folder, run pnpm install, and check if the issue is resolved. Otherwise, contact the technical support and community of the respective library.
RQ28: How can I configure pnpm or bun (as package manager) for my needs? RA28: You can visit this pnpm page or this bun page in the official docs to learn more.

RQ29: Should I modify the components by shadcn/ui (as of Relivator 1.2.6, they are located in the "addons/components/ui" folder)? RA29: You may lose your changes if @shadcn or Reliverse updates any of these components in the release of Relivator 1.3.x+. Therefore, the best option currently is to use, for example, the "addons/cluster/reliverse/shadcn/ui" folder, where you can have files that you can safely overwrite the original files with, ensuring you do not lose your changes. As an example, this folder already contains a cluster-readme.tsx file, which only re-exports the original button.tsx file. So, you can create a button.tsx file here and copy and paste that line into your newly created file. Alternatively, you can duplicate the code from the original file and make any modifications you want. Use Cmd/Ctrl+Shift+H and simply replace addons/components/ui with addons/cluster/reliverse/shadcn/ui (the difference is only in the words "browser" and "cluster"). addons/cluster is your house; feel free to do anything you want here, mess it up or tidy it up as you wish. This is your own house, and no one has the right to take it away from you.

RQ30: Which command allows me to easily manage the installation of dependencies in a project? RA30: pnpm deps:install. However, before running this script, you should manually install the essentials:
- npx nypm add typescript tsx nypm @mnrendra/read-package @clack/prompts
- npx nypm add fs-extra pathe fast-npm-meta semver @types/semver redrun axios
- bun|yarn|pnpm dlx jsr add @reliverse/core (or: npx jsr add @reliverse/core)
RQ31: I noticed a Turborepo file named turbo.disabled.json. How can I reactivate turbo? RA31: Simply remove the .disabled from the filename. You can also add the "scripts" from the turbo.scripts.json file to the package.json file (if they are not already there).
RQ32: Where can I find out more details about the Relivator and Reliverse? RA32: Read the current README.md file to learn more about each specific aspect of the project. You can also find more information on the project's Discord server and on the GitHub Issues page.

Details

🌐 https://relivator.com

We've laid the groundwork—now it's time to dive in and accelerate development. And yeah, have fun! Think of Relivator and Reliverse as a sandbox! It's like Minecraft; with Relivator, you can build anything, as creativity knows no bounds! Explore all the new features of Next.js 13-15 and many other web technologies right here, right now—with Relivator.

~~Minecraft~~ Reliverse is to a large degree about having unique experiences that nobody else has had. The ~~levels~~ website templates are ~~randomly~~ elegantly ~~generated~~ bootstrapped, and you can build anything you want to build yourself. © ~~Markus Persson~~ @blefnk

For real, if you've been exploring which Next.js starter to select for your next project–the search can end here. If you want a POWERHOUSE—Relivator is suitable for every scenario—then Relivator is definitely the starter you need. Fork it right now! Relivator incorporates numerous features found in other templates and strives to push the limits of Next.js and React capabilities. With Relivator, the opportunities are boundless!

You can even think of Relivator as a Next.js framework! So grab it and enjoy! And don't forget: feedback and stars mean the world to us. Hit that star button! Fork it! Your involvement propels the project to new heights! If you have coding skills, contributions are always welcome!

If you run into issues, join our repository discussions, open an issue, or DM us on: Discord, Twitter/X, Fiverr, LinkedIn, or Facebook.

This project has big plans, and we appreciate all the help we can get! If you're eager to contribute, check out the Project Roadmap above to see potential improvements for the project. Also, use Cmd/Ctrl+Shift+F in VSCode and search for TODO: to find areas that need attention. Please visit the Issues tab for more opportunities to help out.

Project Structure

Only a few of the files are listed here. This section will be updated in the future versions.

.vscode
- presets
- extensions.json
- launch.json
- settings.json
src
- env.js
- middleware.ts
- ...
biome.json
cspell.json
eslint.config.js
knip.json
next.config.js
package.json
README.md
reliverse.config.ts
reset.d.ts
tsconfig.json
typestat.json
...

Configuration

First thing first, refer to the .env.example file as the guide. Simply copy data from it to a new .env file.

The instructions below may be outdated, so please double-check them! We will fully update this README.md with the Relivator 1.3.0 release.

🎉 Everything is optional in .env file starting from Relivator 1.2.6! You can deploy Relivator without a .env file! But ensure you verify what's necessary. Though the application will run without certain variables, missing ones may deactivate specific features.

Ensure that default values are defined for essential environment variables. Never store secrets in the .env.example file. For newcomers or repo cloners, use .env.example as a template to create the .env file, ensuring it's never committed. Update the schema in /src/env.js when adding new variables.

Further information about environment variables is available here.

A cleaner and improved version of this section is coming soon. Stay tuned!

In the 1.1.0 Relivator release, the .env.example file was greatly simplified and will be streamlined even further in upcoming versions. We aim to ensure that unspecified values will simply deactivate related functionality without halting app compilation.

Payments

Refer to the .env.example file as the guide for where and how to get all the important environment variable keys for Stripe, including webhooks for both localhost and deployment.

Locally, install the Stripe CLI and run the command pnpm stripe:listen to initiate the Stripe webhook listener. This action connects Stripe to the account and generates a webhook key, which you can then set as an environment variable in Stripe's settings.

When testing Stripe, you can use its test data: 4242424242424242 | 12/34 | 567 | Random Name | Random Country.

Please refer to the src/app/api/webhooks/stripe/route.ts file for more details on how Stripe works in the app. You can also visit the official Stripe repository, where you'll find a lot of useful information.

Database

Relivator uses Drizzle ORM for database management. By default, the project uses Neon (Serverless) with PostgreSQL as the database provider. The project has already followed Drizzle's guide on how to set up Drizzle with Neon Postgres.

August 4, 2024: Hot Update:

If you use neon as your database provider, you no longer need pnpm db:studio; simply use Drizzle Studio on Neon's website 🎉

For development databases without important data, you can use pnpm db:push. For production databases containing important data, it is recommended to use pnpm db:generate followed by pnpm db:migrate.

Drizzle Kit lets you alter you database schema and rapidly move forward with a pnpm db:push command. That’s very handy when you have remote databases like Neon, Planetscale or Turso. The 'push' command is ideal for quickly testing new schema designs or changes in a local development environment, allowing fast iterations without the overhead of managing migration files. © Drizzle Team

Drizzle Team: If you want to iterate quickly during local development or if your project doesn’t require migration files, Drizzle offers a useful command called drizzle-kit push. When do you need to use the ‘push’ command? 1. During the prototyping and experimentation phase of your schema on a local environment. 2. When you are utilizing an external provider that manages migrations and schema changes for you (e.g., PlanetScale). 3. If you are comfortable modifying the database schema before your code changes can be deployed.

Note: NEXT_PUBLIC_DB_PROVIDER was removed in Relivator v1.2.6. To switch the provider from Neon, modify drizzle.config.ts. To use MySQL or LibSQL providers, update the files inside src/db. An automatic switcher is coming in Relivator version 1.3.x.

The instructions below may be outdated, so please double-check them! We will fully update this README.md with the Relivator 1.3.0 release.

Relivator is designed to effortlessly support both MySQL and PostgreSQL databases. While PostgreSQL and Neon are the default configurations, switching to MySQL provided by Railway or PlanetScale, or to PostgreSQL provided by Railway or Vercel is straightforward. Adjust the database configuration inside drizzle.config.ts and the src/db/* files accordingly. Although Relivator is optimized for these providers, other providers compatible with Drizzle and Auth.js (next-auth@beta/NextAuth.js) might also work with some additional setup. Full SQLite support is coming soon.

To set up the DATABASE_URL in the .env file, refer to .env.example. Initiate a new database or propagate schema changes by executing the pnpm db:push command. This ensures that all changes made to the schema files in src/db/* are mirrored in the selected database provider.

For database migrations, use the pnpm db:generate command, review the drizzle folder to ensure everything is correct, and run the pnpm db:migrate command when ready. If necessary, use pnpm db:drop to manage reversals in a controlled way.

If you used Relivator before v1.2.6, you may remove the drizzle folder inside the root directory. Possible outdated information: Do not manually delete files from the drizzle directory. Instead, use the pnpm db:drop command if a migration needs to be reversed.

We ensure consistent database configuration by using the setup inside drizzle.config.ts and exporting configurations in src/db/index.ts and src/db/schema/index.ts. When selecting a database provider, comment out or remove unneeded providers in the switch-case of these files and remove related schema files as necessary. Additional adjustments in other files may also be required. An automatic switcher is coming soon in the Relivator v1.3.0 release.

Historical context: In Relivator v1.1.0, we aimed to provide simultaneous support for both MySQL and PostgreSQL for Drizzle ORM. In future releases, we plan to integrate Prisma ORM, making the project even more inclusive.

Product Categories and Subcategories

To edit product categories, please refer to the MySQL, PostgreSQL, or LibSQL corresponding schema file in the src/db/schema folder.

After editing these files, don't forget to run pnpm db:push to apply the changes. Or run pnpm generate to create a sharable SQL, which another developers may apply with pnpm migrate to edit theirs database tables easily.

Then, simply update the category names and subcategories in the products file accordingly.

Additional Notes About Stripe

The instructions below may be outdated, so please double-check them! We will fully update this README.md with the Relivator 1.3.0 release.

The Stripe webhook API route does not need to be invoked explicitly within the application, such as after a user selects a subscription plan or makes a purchase. Webhooks operate independently of user actions on the frontend and serve as a means for Stripe to relay events directly to the server.

When an event occurs on Stripe's end, such as a successful payment, Stripe generates an event object. This object is then automatically sent to the endpoint you've specified, either in the Stripe Dashboard or, for testing purposes, in the package.json via the Stripe CLI. Finally, the server's API route receives the event and processes it accordingly.

For example, when a user selects a subscription plan, you would typically first use Stripe's API to create either a Payment Intent or Setup Intent object. This action can be executed either on the client-side or the server-side. The frontend then confirms the payment using Stripe.js, thereby completing the payment or subscription setup process.

The webhook is automatically triggered based on these events. There's no need to manually "call" the webhook route; Stripe manages this for you according to the settings in the Stripe Dashboard or in the package.json for local testing.

After deploying the app, don't forget to specify the webhook URL in the Stripe Dashboard. Navigate to the Webhooks section and enter the following URL: https://thedomain.com/api/webhooks/stripe.

In summary, there's no need to specify the path to the Stripe API route where the user selects a subscription plan. The webhook mechanism operates independently and is triggered automatically by Stripe.

Internationalization

Stay tuned for further expansions to this section in the future.

The instructions below may be outdated, so please double-check them! We will fully update this README.md with the Relivator 1.3.0 release.

Multilingualism at Bleverse Reliverse vision is revered. We adore discussing it and plan to delve into the topic of Next.js 15 App Router internationalization in future writings.

Presently, all languages are machine-translated. Future revisions by native speakers are planned.

useTranslations works both on the server and client; we only need the getTranslations on async components.

Currently not available. Use pnpm lint:i18n to verify the i18n files. The tool attempts to rectify issues when possible, offering features like ascending sort. No output means everything is in order.

We are using next-intl for internationalization. Sometime we can use beta/rc versions as needed. Find more information about it here and here.

How to add a new language

The process described below will be simplified and automated in the future. Please let us know if you have any further questions regarding the current process for adding languages.

We will need an i18n code (in the format language-country; the language code alone is sufficient, but it's not optimal for SEO). For example, let's take Chinese, for which I know the codes zh-cn/zh-tw/zh-hk are used.
Open the messages folder and create a zh-cn.json file with the example content: { "metadata": { "description": "建立更高效、更吸引人且更有利可图的在线商店：使用 Relivator" } }.
Now open src/i18n.ts and add "zh-cn": zh_cn with the appropriate import at the top.
In the file src/navigation.ts, add the corresponding values to locales and labels.
Run pnpm dev and review the landing page header. If it appears correctly, you're ready to go.
Optionally, I recommend using the VSCode extension i18n Ally, which makes machine translation easy.
Also optionally, install specific CSpell language for full support of this language in VSCode (when using the "Code Spell Checker" extension). If the language is not available, try to find a word dictionary file on the web or make a new one (see CSpell docs).

By the way, if the country flag is not displayed: open src/localization-main.tsx, go to LocaleFlagIcon and add the else if. Please visit the flag-icons library website to see the code for the missing icon. The example for zh-cn will be: } else if (baseLocale === "zh") { return <span aria-hidden="true" className="fi fi-cn mr-2" />; }

Please be aware that both the "i18n Ally" VSCode extension and manual systems like "Google Translate" may incorrectly translate variables. If you encounter an error like this: Original Message: 'The intl string context variable "类别" was not provided to the string "购买最好的{类别}"'. This error occurs because we have {类别}, but it should be {category}. To verify the correct variable, refer to the en-us.json file.Certainly! So the correct version for this specific case will be:

{
  "categories": {
    "buyFromCategories": "从最好的商店购买 {category}",
    "buyProducts": "购买 ${category} 类别的产品",
    "buyTheBest": "购买最好的 {category}"
  }
}

Currently supported locales (you can add the own manually):

de, en, es, ms, fr, hi, it, pl, tr, uk, zh.
de-DE, en-US, es-ES, ms-MY, fr-FR, hi-IN, it-IT, pl-PL, tr-TR, uk-UA, zh-CN.

Principles, Design Decisions, Code Insights, Recommendations

«There are a lot of impractical things about owning a ~~Porsche~~ Relivator. But they're all offset by the driving experience. It really is unique. ~~Lamborghinis~~ create-t3-app and ~~Ferraris~~ Vercel Store come close. And they are more powerful in specific cases, but they don't handle like a ~~Porsche~~ Relivator.» © ~~Kevin O'Leary~~ @blefnk

We're continuously improving this section. Contributions are welcomed!

Our starter aims to be a rich resource for developers at all stages of their journey. Within the comment blocks and dedicated sections at the end of select files, you'll find valuable insights and clarifications on a wide array of topics. Contributions to enhancing these educational nuggets are highly encouraged!

Principles (W.I.P):

Prettier's principle over linters related to developer experience (source): "You end up with a lot of red squiggly lines in the editor, which gets annoying. Prettier is supposed to make you forget about formatting – and not be in the face about it!"
Every file and component should be built consciously, using KISS/DRY/SOLID/YAGNI principles with a certain sense of intelligence, and with performance in mind.
We need to think of the project as if it were a planet with its own continents, countries, cities, rooms, individuals, entities, etc.

Advanced Environment Variables:

The .env.example file covers all the essential variables for a fully functional website, tailored for beginners. However, if you require advanced configurations, you can modify any value in the .env file as needed.

About the Plugins Folder:

This folder contains optional plugins for Relivator. Developed by @blefnk and other contributors, these plugins extend functionality and provide additional features. If you find that certain plugins are not beneficial for the project, feel free to remove their corresponding folders.

Function Over Const for Components:

We advocate the use of the function keyword instead of const when defining React components. Using function often improves stack traces, making debugging easier. Additionally, it makes code semantics more explicit, thereby making it easier for other developers to understand the intentions.

Personal Recommendations:

We advise regularly clearing the browser cache and deleting the .next folder to ensure optimal performance and functionality.

Currently, we don’t utilize Contentlayer due to its instability with Windows. Therefore, we're exploring options for its usage in the .env configuration file. Future plans might involve developing our own solution for content writing. Integration with external providers, such as Sanity, may also be a future feature, with corresponding enable/disable options.

NOTE from the Contentlayer Issues Page: Contentlayer doesn't work well with next.config.mjs, so you need to have next.config.js. Other libraries may also require this. If you're sure you need .mjs and don't plan to use Contentlayer, rename it.

Project Configuration:

The src/app.ts file hosts main configurations to modify website contents and settings, enabling you to:

Control the content presented on the website.
Adjust various settings, such as deactivating the theme toggle.
Manage generic site-wide information.

Customize this file as per the requirements.

Authentication:

Setting up authentication is straightforward.

You can configure available sign-in providers for Clerk in the src/app.ts file.

Please remember that Clerk fully works with third-party services like "Google PageSpeed Insight" only when domain and live keys are used.

This section will be implemented soon.

TypeScript Config:

In the tsconfig.json file you can set the options for the TypeScript compiler. You can hover over on each option to get more information about. Hint: You can also press Shift+Space to get auto-completion. Learn more by checking the official TypeScript documentation: @see https://typescriptlang.org/docs/handbook/tsconfig-json @see https://totaltypescript.com/tsconfig-cheat-sheet.

Next.js has built-in support for TypeScript, using plugin below. But while you use pnpm build, it stops on the first type errors. So you can use pnpm typecheck to check all type warns/errors at once.

Config includes Atomic CSS plugin in the style attribute. Type-safe static styles with theming, responsive variant support, and no bundler integration. @see https://github.com/tokenami/tokenami#readme.

You can enable strict type checking in MDX files by setting mdx.checkMdx to true.

These options below can be dangerously set to false, while you're incrementally move to full type-safety.

{
  "alwaysStrict": true,
  "noImplicitAny": false,
  "strict": true,
  "strictNullChecks": true,
  "strictPropertyInitialization": true,
  "verbatimModuleSyntax": true
}

How to Deploy the Project:

Please check the How to Install and Get Started section before making the initial deployment.

Consult the deployment guides for Vercel, Netlify, and Docker for further details. The project has only been tested on Vercel; please inform us if you encounter issues with other deployment services.

Styling, Design System, UI Components:

TODO: Implement design system and style guide.

By default, this project includes components from various libraries, as well as unstyled shadcn/ui components. Shadcn/ui even allows you to generate new UI components using its CLI (where "button" can be any Shadcn UI element): pnpm dlx shadcn-ui@latest add button.

W.I.P. — Use pnpm css to watch for CSS tokens in accordance with the project's design system. Tokenami and Figma are anticipated to be utilized for this concept. For additional information, refer to points #33 and #90 in the Relivator's Roadmap.

Package Manager Compatibility:

Relivator can already harness some fantastic Bun features. For this starter, we currently recommend using pnpm. Full pnpm support and compatibility will be shipped as soon as Reliverse's Relivator achieves full similarity with Relivator. Section expansion coming soon.

Recommended Things to Learn:

More learning resources can be found within the files of this repository.

Contributing

This section will be enhanced soon with simpler steps to get everything ready.

Contributions are warmly welcomed! We express our gratitude to everyone who has contributed to this repository. the contributions will be recognized. If you have any questions or suggestions, please open an issue. For more information, see the contributing guide.

Please visit this special wiki page to view the full list of credits and contributors. To contribute to Relivator, follow these steps:

Begin by reading the "How to Install and Get Started" section on the top of this repository, and by reading CONTRIBUTING.md page.
Create a branch: git checkout -b <branch_name>.
Make and commit the changes: git commit -m '<commit_message>'
Push to the original branch: git push origin <branch_name>
Submit the pull request.

Alternatively, check the GitHub docs on how to create a pull request.

Roadmap

The roadmap below may be outdated. We will fully update this README.md with the Relivator 1.3.0 release.

The roadmap below outlines the key features and improvements planned for this Next.js Reliverse starter and for Reliverse CLI. Items not marked may already be configured but might not have been thoroughly tested. If you spot any issues, please open an issue.

License

This project is licensed under the MIT License and is free to use and modify for your own projects. Please visit the license file for details. Since this project is under a free license, the author reserves the right to include referral links. The author may receive compensation from these links if users follow them and, for example, pay their first bill. Thank you all for your understanding!

🌐 https://relivator.com

Changelog

a.k.a. What's Happening?!

1.2.6 - August 4, 2024 – The Resurrection Update

Below you can see a small copy of the article from Reliverse Docs, which is possibly outdated. Please refer to 1.2.6 Release Notes Page on GitHub or to this blog post to read the most recent version. Reliverse Docs also has translations of the article into other languages; and will contain even more information about Relivator than this README.md, including notes from all past and future releases.

Relivator is Back with Version 1.2.6! 🥳

We are excited to announce the release of Relivator 1.2.6! This version marks the end of the "all-in-one" approach as we prepare for a more modular future with Reliverse CLI starting from version 1.3.0. The 1.2.6 release includes significant updates, especially in the database logic. The README.md has been significantly updated. Moving forward, we will introduce Canary, Release Candidate (RC), and General Availability (GA) branches for better version management. 1.2.6 will serve as a foundation, helping us transition more smoothly to the release of those 1.3.0's branches.

Major Changes and Improvements

Database Updates: This is the last release that simultaneously supports PostgreSQL/MySQL and Auth.js (next-auth@beta/NextAuth.js)/Clerk integrations.
React 19 Preparation: Work has commenced on upgrading from React 18 to React 19.
Updated Libraries: The project now uses next-auth v5, clerk v5 and optionally supports tailwindcss v4. Refer to the updated README.md for more details.

Migration Guidance

Starting from version 1.3.1, we will provide comprehensive guides for migrating from older versions. The usual migration process involves reviewing commit changes and integrating necessary updates into your custom code. However, due to the extensive changes in versions 1.2.6 and 1.3.0, this method is not feasible. We recommend reinstalling the project and transferring your custom features from the previous version to the new version of starter. Thank you for your understanding!

To make the migration as smooth as possible, it's recommended to create a "cluster" folder in "src" and moving all your custom code there. If needed, you can adjust the paths using the Find and Replace feature in VSCode. This will make it much easier to save and transfer your custom code to Relivator 1.2.6.

Default Database Change

Neon PostgreSQL is now the default database instead of PlanetScale MySQL, as the latter no longer offers a free tier. If you require MySQL, Railway offers a more affordable alternative with a $5 credit without requiring a credit card. Note that this version has been primarily tested with Neon PostgreSQL.

Security and Code Improvements

Type Safety and Editor Autocomplete: This update enhances type safety and editor autocomplete for Drizzle ORM libraries.
Prettier Replaced by Biome: Prettier has been removed in favor of Biome. The Prettier config will be removed in the next version from the addons\scripts\reliverse\relimter\core\temp folder. You can re-add it by running the reliverse command starting from Relivator 1.3.0.

Reliverse Scripts Transition

Reliverse scripts have moved from the "unknown viability" stage to the "unstable" stage. As always, use them at your own risk and make backups. These scripts are now located in the addons/relimter/[core|python] folder. Most scripts require Python to be installed.

For more details on this update, you can read my detailed posts in the Relivator thread on Discord. Start with this message.

Thank You So Much

If anyone have any questions or issues, don't hesitate to contact me, means @blefnk, on Discord or GitHub. For more information about 1.2.6 and 1.3.0, please visit #⭐-relivator chat on the project's Discord server and the GitHub Issues page.

Thank you for your continued support and happy coding with Reliverse Website Builder v0.4.0 and Relivator Next.js Template v1.2.6!

Release Notes 1.2.5-1.0.0

This is what happened before 1.2.6 version:

v1.2.5 — 27.02.2024

Hello! I, @blefnk Nazar Kornienko, finally have the opportunity to get back to working on Relivator after a month of exams at university. Thanks to all the new starter users! The project already has over 520 stars, 110 forks, 20 repository watchers, and 45 users in Discord - that's really cool and exciting!

I also want to thank the active Discord users of the project: codingisfun, el_ade, righthill, nyquanh, spacecoder315, adelinb. Thank you to everyone who creates PR/Issues and everyone else who actively uses the starter, whose nicknames I don't know. Your feedback and contributions are incredibly valuable for the development of the project!

Since there hasn't been an update in over a month, I'm going to make the transition to the next major version smoother. Therefore, version 1.2.5 has been released to simply refresh the dependencies and other minor details and README a bit. This small update will also allow me to check if certain users continue to have the individual strange problems they reported.

If everything goes well, the next update will already be version 1.3.0. By the way, I'm working on 1.2.x and 1.3.0 in parallel, like in big studios, haha. But please note: some files and lines of code was disabled by default for this version to fix and check some things. By the way, the third digit means that this update is not mandatory, but still recommended. And Relivator 1.3.0 may or may not come with a canary version of React/Next.js to start preparing for the upcoming release of React 19.

Well, that's all for today, all the best to everyone, and may your pnpm latest and pnpm appts always be successful! As usual, I try to write a short announcement, but it turns out a few paragraphs, that's how we live! 😄

P.S. And, please, don't pay attention that so many files have been "changed" in the latest commit, looks like it's because of Prettier I think, I only updated a few files, and if it's important to someone, please let me know in Discord's DM and I'll list you these files.

The Final Words

This Next.js 15 starter — Relivator — was crafted with love by @blefnk Nazar Kornienko and the incredible Bleverse OSS community. We are deeply grateful for all your contributions and support for this project.

Happy coding! Embark on the coding adventure, learn, iterate, and most importantly – enjoy the process! Remember – this is a space of learning and experimentation. Dive in and savor the journey! 🚀🌌

Check out our other free Next.js 15 starter. This monorepo provides the tech used in the current starter and adds: Turborepo/Turbopack, Prisma, Valibot, Lucia, Clerk, and much more, as we experimentally attempt to combine all vital and widely-used tech. Think of it as: Reliverse (WordPress) + Relivator (WooCommerce) = 😍. So, start right now! Start today with Relivator!

🚀 Ready to launch? Start building your project with Relivator and Reliverse as soon as possible! With one-click deploy on Vercel:

💻 Prefer manual installation? Refer to the 🏗️ Installation section or just clone the project using the most classical way:

git clone https://github.com/blefnk/relivator.git

Name		Name	Last commit message	Last commit date
Latest commit History 38 Commits
.github		.github
.vscode		.vscode
messages		messages
public		public
src		src
.env.example		.env.example
.gitignore		.gitignore
LICENSE.md		LICENSE.md
README.md		README.md
biome.json		biome.json
bun.lockb		bun.lockb
components.json		components.json
drizzle.config.ts		drizzle.config.ts
eslint.config.js		eslint.config.js
next-env.d.ts		next-env.d.ts
next.config.js		next.config.js
package.json		package.json
postcss.config.js		postcss.config.js
reset.d.ts		reset.d.ts
tailwind.config.ts		tailwind.config.ts
tsconfig.json		tsconfig.json
unlighthouse.config.ts		unlighthouse.config.ts

License

blefnk/relivator-nextjs-saas-ecommerce-starter

Folders and files

Latest commit

History

Repository files navigation

Relivator 1.3.0-canary.7: Next.js 15 eCommerce Template

Introduction

The Huge Relivator 1.2.6 & 1.3.0@canary are Already Available

What About the Future? Any News on 1.3.0?

Sponsors

💚 GitHub Sponsors 🩵 PayPal 🧡 Patreon 💛 Buy Me a Coffee 🩷 Ko-fi

💜 Discord Server Boost

🖥️ Hire Me

🤝 Partnerships

Our Partners

🙏 Dear Audience, I Need Your Help

Installation

One-click Installation Method (find recommended method below)

Manual Installation: Short Method (find recommended method below)

Manual Installation: Detailed Method (recommended)

🎶 Recommendation

Scripts

package.json

Python

Useful Python Commands

FAQ

Details

Project Structure

Configuration

Payments

Database

Product Categories and Subcategories

Additional Notes About Stripe

Internationalization

How to add a new language

Principles, Design Decisions, Code Insights, Recommendations

Contributing

Roadmap

License

Changelog

1.2.6 - August 4, 2024 – The Resurrection Update

Major Changes and Improvements

Migration Guidance

Default Database Change

Security and Code Improvements

Reliverse Scripts Transition

Thank You So Much

Release Notes 1.2.5-1.0.0

The Final Words

About

Topics

Resources

License

Code of conduct

Security policy

Stars

Watchers

Forks

Releases 21

Sponsor this project

Languages