Visueller Lerntyp? Sieh dir diese Version im Videoformat auf YouTube an:
Dies ist eine kostenlose React Router SaaS-Vorlage. Sie enthält alles, was Sie für Ihre nächste SaaS-Idee benötigen:
Mehr dazu und vieles mehr erfahren Sie später in diesem Artikel. Doch zunächst wollen wir das größte Problem bei Vorlagen ansprechen.
Normalerweise ist der einzige Nachteil bei der Verwendung einer Vorlage, dass es viel Code gibt, den man aus Angst, etwas kaputt zu machen, nicht anfassen möchte. Aber diese Vorlage kommt mit vollständiger Testabdeckung.
Über 500 Unit-, Integrations- und Funktionstests:
Test Files 80 passed (80)
Tests 577 passed | 2 skipped | 1 todo (580)
Start at 20:45:42
Duration 139.16s (transform 2.82s, setup 6.78s, collect 76.97s, tests 16.31s, environment 10.01s, prepare 8.77s)Und fast 200 End-to-End-Tests:
6 flaky
[chromium] › playwright/e2e/landing/contact-sales.e2e.ts:74:3 › contact sales page › given: a user submitting valid data, should: show success message
[chromium] › playwright/e2e/onboarding/onboarding-organization.e2e.ts:153:5 › onboarding organization page › organization creation › given: a logged in user with name but no organization, should: allow organization creation with only name and redirect to organization page
[chromium] › playwright/e2e/organizations/general-organization-settings.e2e.ts:153:5 › general organization settings › given: a logged in user who is onboarded and an owner › given: valid organization name and logo, should: update organization name and logo
[chromium] › playwright/e2e/organizations/new-organization.e2e.ts:291:5 › new organization page › organization creation › given: a logged in onboarded user, who creates the new organization using the organization switcher: should: allow organization creation with only name and redirect to organization page
[chromium] › playwright/e2e/user-authentication/login-confirm.e2e.ts:366:3 › /login/confirm API route › given: a valid token hash for a new user with an active email invite cookie, should: create their account, add them to the organization, show a success toast, and clear the email invite cookie
[chromium] › playwright/e2e/user-authentication/register-confirm.e2e.ts:193:3 › /register/confirm API route › given: a new user with an active email invite cookie, should: create their account, add them to the organization, and show success toast
2 skipped
195 passed (3.1m)... stellen sicher, dass Sie nichts kaputt machen.
Was bietet Ihnen diese kostenlose Vorlage sonst noch?
Die Landingpage enthält einige der gängigsten Elemente, die Sie benötigen, wie ein Marquee, ein Bento-Grid und einen CTA-Bereich.
Die Authentifizierung wird von Supabase übernommen, und Sie können sich entweder per E-Mail oder mit Google anmelden.
Als Nächstes gelangen Sie zum Onboarding-Prozess, der standardmäßig aus zwei Schritten besteht.
Zuerst können Sie Ihr Profil vervollständigen.
Und dann erstellen Sie Ihre Organisation.
Wenn Sie sich den Code ansehen, werden Sie feststellen, dass es einfach ist, weitere Schritte zu Ihrem Onboarding-Prozess hinzuzufügen.
Übrigens werden alle Datenbankabfragen über Prisma und Facades abstrahiert. So können Sie problemlos zu einem anderen Datenbankanbieter oder ORM wechseln.
Innerhalb Ihrer App finden Sie eine Seitenleiste. Wie Sie wahrscheinlich bereits sehen können, ist die gesamte App mit TailwindCSS und Shadcn gestaltet. Sie ist außerdem vollständig responsiv und barrierefrei. Es gibt automatische Prüfungen in Ihren E2E-Tests, die viele grundlegende Barrierefreiheitsprobleme für Sie erkennen können.
Ihre Benutzer-Navigation ermöglicht es Ihnen, sich abzumelden und Ihr Benutzerkonto anzupassen. Dateiuploads werden ebenfalls von Supabase Storage verwaltet, und es gibt S3-kompatible Hilfsfunktionen, falls Sie einen anderen Anbieter verwenden möchten.
Sie können die Seitenleiste verwenden, um zusätzliche Organisationen zu erstellen und dann zwischen ihnen zu wechseln.
Und das sind die Organisationseinstellungen.
Im allgemeinen Bereich können Sie den Namen und das Logo Ihrer Organisation ändern.
Im Bereich Teammitglieder können Sie neue Mitglieder auf zwei Arten einladen:
Sie können einen Einladungslink generieren und diesen an Ihre Kollegen senden, die dann automatisch Ihrer Organisation beitreten.
Oder Sie senden ihnen eine E-Mail mit einem persönlichen Einladungslink, über den Sie ihnen auch eine Rolle zuweisen können. Der E-Mail-Versand wird von Resend übernommen.
Sobald sie Mitglied Ihrer Organisation sind, können Sie deren Rollen verwalten oder sie deaktivieren.
Die Abrechnung wird auch von Stripe verwaltet. Standardmäßig bietet die App eine kostenlose Testphase. Und sobald ein Benutzer einen Plan wählt, kann er sein Abonnement einfach upgraden, downgraden oder kündigen.
Zu guter Letzt verfügt die App über einen Dark-Mode-Schalter.
Sie fragen sich vielleicht: Wie funktionieren all diese Dienste, wenn Sie Tests ausführen?
Die App ist so konfiguriert, dass sie unterscheidet zwischen:
Und das Template ist mit MSW konfiguriert, das alle API-Aufrufe sowohl auf Client- als auch auf Serverseite simulieren kann, wenn Sie Ihre Integrations- oder End-to-End-Tests ausführen.
Das Template bietet noch weitere Bonus-Features, aber dafür schauen Sie sich am besten das Repository an. Wenn Sie beitragen möchten, schauen Sie sich die Issues an. Und wenn Sie Fragen haben, können Sie mich gerne auf X.
.svg){kind=small}
