NextJs Messenger Clone Download - NextJs Messenger Clone Quellcode Download

Herunterladen

NEXTJS-MESSENGER-CLONE

Eine vollständig reaktionsschnelle Echtzeit-Chat-App mit NextJS 13 (App-Router), MongoDB, Tailwind CSS, Pusher, Next-Authary und Wolkinary.

Sehen Sie eine lebende Demo auf Vercel

Navigieren Sie zu https://www.mongodb.com/atlas/database und registrieren Sie sich
Suchen und wählen Sie Build a Database
Wählen Sie die freie Stufe aus und drücken Sie unten Create
Erstellen Sie einen Benutzer (notieren Sie das Kennwort)
Scrollen Sie nach unten, um Add entries to your IP Access List
Geben Sie 0.0.0.0/0 ein und drücken Sie Add Entry
Drücken Go to Databases
Klicken Sie auf Connect und wählen Sie MongoDB for VSCode aus
Kopieren Sie die Verbindungszeichenfolge und speichern Sie sie in einem Notizblock
Ersetzen Sie <password> durch Ihr Passwort in Schritt 3 festgelegt
Fügen Sie test am Ende der Verbindungszeichenfolge hinzu (z. B. connectionstring/test )

Navigieren Sie zu https://github.com/
Klicken Sie oben rechts auf Ihr Profil -Dropdown
Klicken Sie auf Settings
Klicken Sie auf Developer settings
Klicken Sie auf OAuth Apps
Klicken Sie auf New OAuth App
Geben Sie Ihrer App einen Namen
Geben Sie http://localhost:3020/ in der Homepage URL und Authorization callback URL -Felder ein.
Klicken Sie auf "Anwendung registrieren"
Kopieren Sie die Client Id und notieren Sie sie
Klicken Sie auf Generate a new client secret , kopieren Sie und notieren

Navigieren Sie zu https://console.cloud.google.com und erstellen Sie ein neues Projekt
Navigieren Sie zum neu erstellten Projekt und suchen Sie nach API & Services
Gehen Sie auf OAuth consent screen
Klicken Sie auf das External Feld
Klicken Sie auf CREATE
Klicken Sie auf das Feld App name und geben Sie ihm einen Namen
Wählen Sie im Feld Benutzerpost Ihre E -Mail aus
Scrollen Sie nach unten zu Developer contact information und geben Sie Ihre E -Mail ein
Klicken Sie auf SAVE AND CONTINUE , bis Sie im Summary sind
Gehen Sie zu Credentials
Klicken Sie CREATE CREDENTIALS
Wählen Sie OAuth client ID
Wählen Sie Web application als Anwendungstyp aus
Scrollen Sie nach unten zu Authorized redirect URIs und fügen Sie http://localhost:3020/api/auth/callback/google
Klicken Sie auf CREATE
Kopieren Sie die CLient ID und Client Secret und notieren Sie sie

Navigieren Sie zu https://console.cloudinary.com und melden Sie sich an
Gehen Sie zum Dashboard und notieren Sie den Cloud name
Gehen Sie zu Einstellungen
Dann gehen Sie zum Upload
Klicken Sie Add upload preset
Ändern Sie Signing Mode in Unsigned
Klicken Sie Save des neu hinzugefügten voreingestellten Namens und notieren Sie ihn nach unten

Navigieren Sie zu https://dashboard.pusher.com/channels
Klicken Sie auf Create app (oder Get Started )
Geben Sie der App einen Namen
Wählen Sie React für Frontend und Node.js für das Backend
Erstellen Sie die App
Gehen Sie zu App Keys
Beachten Sie die Werte

Klon/Download Repo
Erstellen Sie eine Datei namens .env.local Im Stammverzeichnis Ihres Projekts geben Sie Folgendes in CMD/PowerShell ein
```
 cp env.example .env.local
```
Fügen Sie in der .env.local -Datei die MongoDB-, Pusher-, Wolking-, Github- und Google -Schlüssel aus den vorherigen Schritten hinzu
yarn install So installieren Sie die Abhängigkeiten (Führen Sie npm install yarn wenn kein Garn installiert ist).
yarn prisma db push die DB -Sammlungen zu erstellen
prisma generate , um den Prisma -Kunden zu schaffen

Entwicklung

yarn dev

Produktion

yarn build yarn start

Alle Befehle

Befehl	Beschreibung
`yarn dev`	Die App kontinuierlich erstellen (HMR aktiviert)
`yarn build`	Erstellen Sie die App einmal (HMR deaktiviert) auf `/.next/`
`yarn start`	Rennenproduktion Build