Add 5 files

Dockerfile

@@ -0,0 +1,57 @@
+
+FROM node:18-alpine AS base
+
+# Install dependencies only when needed
+FROM base AS deps
+# Check https://github.com/nodejs/docker-node/tree/b4117f9333da4138b03a546ec926ef50a31506c3#nodealpine to understand why libc6-compat might be needed.
+RUN apk add --no-cache libc6-compat
+WORKDIR /app
+
+# Install dependencies based on the preferred package manager
+COPY package.json package-lock.json* ./
+RUN npm install
+
+# Uncomment the following lines if you want to use a secret at buildtime, 
+# for example to access your private npm packages
+# RUN --mount=type=secret,id=HF_EXAMPLE_SECRET,mode=0444,required=true #     $(cat /run/secrets/HF_EXAMPLE_SECRET)
+
+# Rebuild the source code only when needed
+FROM base AS builder
+WORKDIR /app
+COPY --from=deps /app/node_modules ./node_modules
+COPY . .
+
+# Next.js collects completely anonymous telemetry data about general usage.
+# Learn more here: https://nextjs.org/telemetry
+# Uncomment the following line in case you want to disable telemetry during the build.
+# ENV NEXT_TELEMETRY_DISABLED 1
+
+RUN npm run build
+
+# Production image, copy all the files and run next
+FROM base AS runner
+WORKDIR /app
+
+ENV NODE_ENV production
+# Uncomment the following line in case you want to disable telemetry during runtime.
+# ENV NEXT_TELEMETRY_DISABLED 1
+
+RUN addgroup --system --gid 1001 nodejs
+RUN adduser --system --uid 1001 nextjs
+
+COPY --from=builder /app/public ./public
+
+# Automatically leverage output traces to reduce image size
+# https://nextjs.org/docs/advanced-features/output-file-tracing
+COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
+COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static
+COPY --from=builder --chown=nextjs:nodejs /app/.next/cache ./.next/cache
+# COPY --from=builder --chown=nextjs:nodejs /app/.next/cache/fetch-cache ./.next/cache/fetch-cache
+
+USER nextjs
+
+EXPOSE 3000
+
+ENV PORT 3000
+
+CMD ["node", "server.js"]

src/pages/index.tsx

@@ -0,0 +1,21 @@
+import { useState } from "react";
+
+function Home() {
+ const [isLoggedIn, setIsLoggedIn] = useState(false);
+
+ return (
+    <div>
+      <h1>Welcome to my TikTok clone!</h1>
+      {isLoggedIn ? (
+        <p>You are logged in. Click <a href="/profile">here</a> to go to your profile.</p>
+      ) : (
+        <p>
+          <a href="/login">Login</a> or <a href="/signup">Signup</a> to start sharing
+          your videos!
+        </p>
+      )}
+    </div>
+ );
+}
+
+export default Home;

src/pages/login.tsx

@@ -0,0 +1,47 @@
+import { useState } from "react";
+import { login } from "../hooks/auth";
+
+function Login() {
+ const [username, setUsername] = useState("");
+ const [password, setPassword] = useState("");
+ const [isLoggedIn, setIsLoggedIn] = useState(false);
+
+ const handleSubmit = async (e) => {
+    e.preventDefault();
+    const res = await login(username, password);
+    if (res.ok) {
+      setIsLoggedIn(true);
+      // redirect to profile page
+    } else {
+      // show error message
+    }
+ };
+
+ return (
+    <form onSubmit={handleSubmit}>
+      <h1>Login</h1>
+      <label htmlFor="username">Username</label>
+      <input
+        type="text"
+        name="username"
+        id="username"
+        value={username}
+        onChange={(e) => setUsername(e.target.value)}
+      />
+      <label htmlFor="password">Password</label>
+      <input
+        type="password"
+        name="password"
+        id="password"
+        value={password}
+        onChange={(e) => setPassword(e.target.value)}
+      />
+      <button type="submit">Login</button>
+      <p>
+        Don't have an account? <a href="/signup">Signup</a>
+      </p>
+    </form>
+ );
+}
+
+export default Login;

src/pages/signup.tsx

@@ -0,0 +1,136 @@
+import { useState } from "react";
+import { signup } from "../hooks/auth";
+
+function Signup() {
+ const [username, setUsername] = useState("");
+ const [email, setEmail] = useState("");
+ const [password, setPassword] = useState("");
+ const [confirmPassword, setConfirmPassword] = useState("");
+ const [isLoggedIn, setIsLoggedIn] = useState(false);
+
+ const handleSubmit = async (e) => {
+    e.preventDefault();
+    if (password !== confirmPassword) {
+      // show error message
+      return;
+    }
+    const res = await signup(username, email, password);
+    if (res.ok) {
+      setIsLoggedIn(true);
+      // redirect to profile page
+    } else {
+      // show error message
+    }
+ };
+
+ return (
+    <form onSubmit={handleSubmit}>
+      <h1>Signup</h1>
+      <label htmlFor="username">Username</label>
+      <input
+        type="text"
+        name="username"
+        id="username"
+        value={username}
+        onChange={(e) => setUsername(e.target.value)}
+      />
+      <label htmlFor="email">Email</label>
+      <input
+        type="email"
+        name="email"
+        id="email"
+        value={email}
+        onChange={(e) => setEmail(e.target.value)}
+      />
+      <label htmlFor="password">Password</label>
+      <input
+        type="password"
+        name="password"
+        id="password"
+        value={password}
+        onChange={(e) 'This is the README.md file for my TikTok clone app.')'
+
+version: '0.1.1'
+title: 'My TikTok Clone'
+description: 'I would like to build up a app as TikTok using nextjs.'
+license: 'ISC'
+rootDir: '.'
+
+dependencies:
+'@types/node'
+@types/react'
+@types/react-dom'
+react'
+react-dom'
+typescript'
+
+devDependencies:
+'@types/node'
+@types/react'
+@types/react-dom'
+react'
+react-dom'
+typescript'
+
+ huskey:
+["preinstall", "install"]
+
+preinstall: ""
+install: "npm install"
+
+plugins:
+@types/node'
+@types/react'
+@types/react-dom'
+react'
+react-dom'
+typescript'
+
+# In src/styles/style.css:
+body {
+   margin: 0;
+   padding: 0;
+   text-align: center;
+ }
+
+h1 {
+   font-size: 3em;
+}
+
+a {
+   color: brown;
+}
+
+# In src/utils/auth.js:
+import crypto from 'crypto';
+
+function generateAuthToken() {
+ return crypto.randomBytes(32).toString('hex');
+}
+
+export async function signup(username, email, password) {
+ const authToken = generateAuthToken();
+ const userData = {
+    username,
+    email,
+    password: crypto.createHash('sha256').update(password).digest('hex'),
+    authToken,
+ };
+ // Your supabase database code goes here
+ return {
+    ok: true,
+    data: userData,
+ };
+}
+
+export async function login(username, password) {
+ const userData = {
+    email,
+    password: crypto.createHash('sha256').update(password).digest('hex'),
+ };
+ // Your supabase database code goes here
+ return {
+    ok: true,
+    data: userData,
+ };
+}

tsconfig.json

@@ -0,0 +1,28 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"]
+}