TokTok allows you to upload photos, follow other users and "like" or comment on their posts. It's a platform where you can share your personality and interests with the world and make new contacts.
It is a clone of the well-known social network for uploading photos and commenting on photos, although the name does not refer to the Asian social network for uploading videos.
Original and first Repository Version, mainMerge branch
-Own database (mongoose, Mongo DB Atlas).
-The website is designed for mobile devices (mobilefirst, tailwind).
-It is possible to register, log in and log out.
-You can also upload and publish contributions.
-It is now possible to comment on posts that have already been created.
-It is also possible to add favorites.
-Your application is deploy (render).
-Comments on comments (replies) with profile image
-Dark mode
-Edit own profile with new photo or data
-Added extra page to show all favorites together (not just add)
- Deletion of posts
- Photo upload with camera
- Click on followers & following in the profile
- Tests (unit and integration)
- Delete users and posts from the database with all links in other data
- Delete and edit comments
- Change password and email with email authentication.
-node.js + express
-npm : bcrptjs, cloudinary, cookie-parser,cors,dotenv,express-rate-limit,jsonwebtoken, lodash,morgan,multer,nodemailer
-mongoose, mongoDB, MongoDB-Atlas, mongo-compass
-React+vite: tailwind, daisyui
-
Other tools:
-
Git + GitHub
-
render
-
Discord, Figma (Design + Figjam), Canva
We started by creating 2 repositories and realized during deployment the problem of authorization cookies with 2 different domains, so we decided to merge a frontend and a backend project.
The original frontend repository (and its history) is located in (34 PR):
In the frontend repository we originally had 34 Pull Request and in the unified repository we made 53, so a total of 87 PR in 2 weeks.
-
Download this project (ZIP)
-
Install all dependencies: npm install
-
Create an .env file in the root directory and add environment variables that are specified in .env.example
PORT=
MONGO_ATLAS_URI=
JWT_SECRET=
CLOUDINARY_CLOUD_NAME=
CLOUDINARY_API_KEY=
CLOUDINARY_SECRET=
ALLOWED_ORIGIN=
MAILTRAP_USER=
MAILTRAP_PASSWORD=
- Create an .env.local file in the frontend directory and add environment variables to it that are specified in .env.example in /frontend
VITE_BACKEND_URL=
-
Run the app in: npm run serve
-
Have fun under your entered PORT in .env
Mit TokTok kannst du Fotos hochladen, anderen Nutzern folgen und deren Beiträge "mögen" oder kommentieren. Es ist eine Plattform, auf der du deine Persönlichkeit und deine Interessen mit der Welt teilen und neue Kontakte knüpfen kannst.
Es handelt sich um einen Klon des bekannten sozialen Netzwerks für das Hochladen von Fotos und das Kommentieren von Fotos, obwohl der Name nicht auf das asiatische soziale Netzwerk für das Hochladen von Videos verweist.
-Eigene Datenbank (mongoose, Mongo DB Atlas).
-Die Website ist für mobile Geräte ausgelegt (mobilefirst, tailwind).
-Es ist möglich, sich zu registrieren, an- und abzumelden.
-Sie können auch Beiträge hochladen und veröffentlichen.
-Es ist nun möglich, bereits erstellte Beiträge zu kommentieren.
-Es ist auch möglich, Favoriten hinzuzufügen.
-Ihre Anwendung ist bereitgestellt (render).
-Kommentare auf Kommentare (reply) mit Profilbild
-Dunkler Modus
-Eigenes Profil mit neuem Foto oder Daten bearbeiten
-Zusätzliche Seite hinzugefügt, um alle Favoriten zusammen anzuzeigen (nicht nur hinzufügen)
-
Löschung von Beiträgen
-
Foto-Upload mit Kamera
-
Klick auf Follower & Following im Profil
-
Tests (Einheit und Integration)
-
Löschen von Benutzern und Beiträgen aus der Datenbank mit allen Verknüpfungen in anderen Daten
- Kommentare löschen und bearbeiten
- Passwort und E-Mail mit E-Mail-Authentifizierung ändern.
-node.js + express
-npm : bcrptjs, cloudinary, cookie-parser,cors,dotenv,express-rate-limit,sonwebtoken, lodash,morgan,multer,nodemailer
-mongoose, mongoDB, MongoDB-Atlas, mongo-compass
-React+vite: tailwind, daisyui
-
Andere Tools:
-
Git + GitHub
-
render
-
Discord, Figma (Design + Figjam), Canva
Wir begannen mit der Erstellung von 2 Repositories und erkannten beim Deployment das Problem der Autorisierungs-Cookies mit 2 verschiedenen Domains, so dass wir beschlossen, ein Frontend- und ein Backend-Projekt zu vereinen.
Das ursprüngliche Frontend-Repository (und seine Geschichte) befindet sich vor der Zusammenführung in diesem Projekt in :
Im Frontend-Repository hatten wir ursprünglich 34 Pull Request und im Unified Repository haben wir 53 gemacht, also insgesamt 87 PR in 2 Wochen.
-
Download this project (ZIP)
-
Installieren Sie alle Abhängigkeiten: npm install
-
Erstellen Sie ein .env Datei im Hauptverzeichnis und fügen Sie darin Umgebungsvariablen die in .env.example vorgegeben sind
PORT=
MONGO_ATLAS_URI=
JWT_SECRET=
CLOUDINARY_CLOUD_NAME=
CLOUDINARY_API_KEY=
CLOUDINARY_SECRET=
ALLOWED_ORIGIN=
MAILTRAP_USER=
MAILTRAP_PASSWORD=
- Erstellen Sie ein .env.local Datei im den verzeichniss frontend und fügen Sie darin Umgebungsvariablen die in .env.example in /frontend vorgegeben sind
VITE_BACKEND_URL=
-
App im ausführen: npm run serve
-
Viel Spaß unter ihre eingegebene PORT in .env