Jede Woche werden neue Tools und Technologien veröffentlicht. Zum Beispiel wächst der Bereich der künstlichen Intelligenz (KI) rasant. Fast jeden Tag kommt ein neues Werkzeug oder ein Modell auf den Markt. Das Gleiche gilt für das JavaScript-Ökosystem, in dem häufig neue Bibliotheken und Frameworks veröffentlicht werden. Es ist, als ob man mit dem Tempo nicht mithalten kann. Und deshalb denke ich, dass es wichtig ist, einen soliden Tech-Stack zu haben, auf den man sich verlassen kann. Ein Tech-Stack, den Sie heute zum Erstellen Ihrer Web-App verwenden können.
Hier ist mein bewährter Tech-Stack, den ich heute zum Erstellen von Web-Apps verwende.
Frontend
Für mein Frontend verwende ich gerne React. Ich benutze React seit den letzten Jahren und denke, es ist ein großartiges Tool zum Erstellen von Webanwendungen. Ich möchte es mit Next.js koppeln, um das Erstellen serverseitig gerenderter React-Apps zu vereinfachen.
Ich mag es nicht, dass Next.js manchmal ein bisschen eigensinnig sein kann, daher halte ich mich nicht an viele ihrer Konventionen. Aber ich mag es, wie es einfacher ist, React-Apps zu erstellen. Ich verwende ihren App-Router und die Bildkomponente.
Ich benutze ihre Serveraktionen noch nicht, da ich denke, dass es noch neu ist und ich noch keine Gelegenheit hatte, es mehr auszuprobieren, um es zu empfehlen. Vor diesem Hintergrund ist meine Wahl für API-Integrationen React Query mit Axios gepaart. Sie arbeiten gut zusammen und mir gefällt, wie React Query das Zwischenspeichern und Verwalten von Daten erleichtert.
Für das Styling verwende ich gerne Tailwind CSS. Es ist nicht das beste, aber ich mag es, wie einfach es ist, damit ein Design zu erstellen. Ich mag es nicht, dass es ein bisschen ausführlich sein kann, aber ich denke, es ist ein guter Kompromiss für die Benutzerfreundlichkeit. Die Kombination mit shadcn/ui ist eine großartige Möglichkeit, den Aufbau von Komponenten zu erleichtern, insbesondere wenn Sie diese minimalistischen Designs mögen.
Zusammenfassend lässt sich sagen, dass mein Frontend-Stack wie folgt aussieht:
– React & Next.js
– React Query & Axios
– Tailwind CSS & shadcn/ui
Backend
Für mein Backend verwende ich gerne Node.js. Das Gleiche gilt für React , das ich in den letzten Jahren verwendet habe, und ich denke, es ist ein großartiges Tool zum Erstellen von Webanwendungen. Ich möchte Node.js mit Nest.js koppeln, um die Endpunkte zu erstellen, die ich für mein Frontend benötige.
Mir gefällt, wie organisiert Nest.js ist und wie es einfacher ist, APIs mit ihren Dekoratoren zu erstellen. Manchmal kann es diese Art von Codemagie haben, von der Sie nicht wissen, woher sie kommt, oder die zirkulären Abhängigkeitsprobleme, auf die Sie stoßen können. Aber mit einem guten Verständnis der Funktionsweise und dem Lesen der Dokumentation können Sie diese Probleme umgehen.
Da jede Web-App eine Datenbank benötigt, verwende ich gerne () mit . hat eine großartige Dokumentation und es war eines der zuverlässigsten ORMs, die ich je verwendet habe. Es ist bereits seit geraumer Zeit da und lässt sich hervorragend in .PostgreSQLSupabaseTypeORMTypeORMNest.js
Zusammenfassend lässt sich sagen, dass mein Backend-Stack wie folgt aussieht:
– Node.js & Nest.js
– PostgreSQL (Supabase) & TypeORM
Infrastruktur/Bereitstellung
Für die Bereitstellung, das Hosting oder sogar die Einrichtung von SSL verwende ich gerne Coolify. Ich habe es vor kurzem entdeckt und es hat mir sehr geholfen, meine Web-Apps einzurichten. Früher habe ich gerne VercelGCPCloud oder Run mit verwendet, aber ich habe mich von diesen serverlosen Lösungen ferngehalten, da ich denke, dass es immer noch viel besser ist, einen dedizierten bereitgestellten Server zu haben. Ich kaufe VPS auf Digital Ocean für meine Hosting-Anforderungen.
Glücklicherweise ist Coolify einfach einzurichten, es verfügt über selbst gehostete Optionen und verfügt über eine großartige Dokumentation. Mir gefällt, wie es die Bereitstellung meiner Web-Apps vereinfacht und wie es die Einrichtung von SSL erleichtert.
Ich kopple es mit Cloudflare für mein DNS und CDN. Ich kaufe auch meine Domain bei ihnen, weil ich es mag, wie einfach es ist, meine Domains mit ihnen zu verwalten.
Und schließlich verwende ich Github und verbinde es mit Coolify für mein CI/CD. Verbinden Sie es dann mit Discord für einige Bereitstellungsbenachrichtigungen.
Zusammenfassend lässt sich sagen, dass mein Bereitstellungsstack wie folgt aussieht:
– Coolify (DigitalOcean)
– Cloudflare
– Github
E-Mail ist eines der Dinge, von denen man manchmal denkt, dass man sie nicht braucht, aber man braucht sie. Es gibt viele Dienste, die Sie zum Versenden von E-Mails verwenden können. Was ich gerne benutze, ist . Es ist ein einfacher Service, der das Versenden von E-Mails erleichtert.Resend
Resend zum Versenden von E-Mails und dann @react-emails zum Erstellen der E-Mail-Vorlagen. Ich wusste vorher nicht, wie man zuverlässige E-Mail-Vorlagen erstellt, aber mit @react-emails macht es es einfacher, sie zu erstellen.
Resend kann auch mit Supabase gekoppelt werden, wenn Sie ihre Dienste gerne nutzen.
Zusammenfassend lässt sich sagen, dass mein E-Mail-Stack wie folgt aussieht:
- – resend
- – @react-E-Mails
Authentifizierung
Wann immer ich heutzutage Auth benötige, verwende ich normalerweise Supabase. Ich verwende ihren Authentifizierungsdienst im Backend, indem ich einen Endpunkt erstelle und ihre API aufrufe. Es gibt auch eine Option, um das Frontend-SDK zu verwenden, aber ich richte es gerne im Backend ein.
Da ich Postgres mit Supabase verwende, kann ich bei Bedarf meinen eigenen Authentifizierungsdienst rollen. Mit diesem Stack habe ich die Flexibilität, dies zu tun. Und am wichtigsten ist, dass sich die Daten Ihrer Benutzer in Ihrem Zuständigkeitsbereich befinden und nicht in einigen Diensten von Drittanbietern enthalten sind.
Zusammenfassend lässt sich sagen, dass mein Authentifizierungsstack wie folgt aussieht:
– Supabase
Storage
Für die Bildspeicherung verwende ich gerne ImageKit. Ich benutze es jetzt schon seit geraumer Zeit für meine Bildspeicherung sowohl in mobilen als auch in Web-Apps und es ist großartig. Mir gefällt, wie es das Speichern von Bildern erleichtert und wie es einfacher ist, sie im Handumdrehen zu bearbeiten.
Für die allgemeine Aufbewahrung habe ich meine Anlaufstelle noch nicht gefunden. Ich denke, ich kann Cloudflare, R2 AWS oder sogar S3 Supabase Storage . Aber ich hatte noch keine Gelegenheit, sie auszuprobieren. Ich habe noch keine Web-Apps, die Dateien oder allgemeinen Speicherplatz benötigen.
Zusammenfassend lässt sich sagen, dass mein Speicherstack wie folgt aussieht:
– ImageKit (für Bilder)
– Cloudflare R2, AWS S3 oder Supabase Storage (für allgemeine Speicherung)
Kosten
Mit diesem Setup schwanke ich normalerweise zwischen 20 und 30 Euros da dies die Kosten für den VPS in DigitalOcean sind, den ich gerne auswähle. Ich denke, wir können etwas billiger werden, aber ich bin gut mit dieser Option für meine Bedürfnisse. Ich denke, Sie können auch bei Hetzner kaufen, was möglicherweise billiger ist als DigitalOcean.
Insgesamt gibt es bei einer Reihe anderer Dienste auch großzügige kostenlose Stufen – wenn Sie also nur ein paar Gewässer testen möchten, werden diese hilfreich sein!
Fazit
Dieser Tech-Stack hat sich für mich bewährt und mir geholfen, Web-Apps schneller zu erstellen. Ich denke, es ist wichtig, einen soliden Stack zu haben, auf den man sich verlassen kann. Es geht nicht immer darum, die neuesten Tools oder Technologien zu verwenden. Es geht darum, die richtigen Tools für die jeweilige Aufgabe zu verwenden.
Ich kenne auch einige andere Tools, aber meistens reicht dieser Tech-Stack aus, um die Web-Apps zu erstellen, die ich brauche. Mir gefällt auch, wie diese Tools miteinander gekoppelt werden können und wie gut sie zusammenarbeiten.
Es ist nicht perfekt, aber es hat für mich funktioniert, um meine Ideen umzusetzen und Web-Apps schneller zu erstellen.
Ich hoffe, dass dieser Tech-Stack Ihnen auch dabei helfen kann, Ihre Web-Apps schneller zu erstellen. Oder noch besser, machen Sie diesen Stack zum Ausgangspunkt Ihres Stacks, auf den Sie sich verlassen können. Das wäre viel besser!
Weiterer Beitrag: Warum gibt Pythons round (6.5) 6 zurück und bei round(7.5) 8?