vivy-agent/AnimeTV-Frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

♻️ refactor: all codebase

Browse Source 
Completely refactoring the entire old codebase with a new codebase. This change also altered most of the core UI from the old codebase, replacing it with Shadcn with some customizations.
This commit is contained in:
Rafi Arrafif
2026-01-07 08:44:48 +07:00
parent fbcb575a36
commit a82e7a7424
95 changed files with 1143 additions and 3303 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
app/(auth)/auth/callback/[...provider]/page.tsx
View File

@ -1,8 +0,0 @@
import OauthCallbackHandler from "@/features/oauth-callback/pages/callbackHandler";
import React from "react";
const page = () => {
return <OauthCallbackHandler />;
};
export default page;

5
app/(auth)/login/metadata.tsx
View File

@ -1,5 +0,0 @@
import { Metadata } from "next";
export const metadata: Metadata = {
title: "Login | Nounoz TV",
};

11
app/(auth)/login/page.tsx
View File

@ -1,11 +0,0 @@
import LoginPage from "@/features/auth/pages/LoginPage";
import { metadata } from "./metadata";
export { metadata };
import React from "react";
const page = () => {
return <LoginPage />;
};
export default page;

5
app/(auth)/signup/metadata.tsx
View File

@ -1,5 +0,0 @@
import { Metadata } from "next";
export const metadata: Metadata = {
title: "Sign Up | Nounoz TV",
};

11
app/(auth)/signup/page.tsx
View File

@ -1,11 +0,0 @@
import SignupPage from "@/features/auth/pages/SignupPage";
import { metadata } from "./metadata";
export { metadata };
import React from "react";
const page = () => {
return <SignupPage />;
};
export default page;

10
app/(main)/(home)/button.tsx
View File

@ -1,10 +0,0 @@
"use client";
import { Button } from "@heroui/react";
import React from "react";
const button = () => {
return <Button color="primary">Button</Button>;
};
export default button;

39
app/(main)/(home)/metadata.tsx
View File

@ -1,39 +0,0 @@
import { Metadata } from "next";
export const metadata: Metadata = {
title: "Nounoz TV - Anime Streaming Station Center",
description:
"Nounoz TV adalah tempat santai buat nonton anime kualitas tinggi tanpa ribet. Didukung komunitas yang aktif dan ramah, kamu nggak cuma nonton—tapi juga bisa ngobrol, sharing, dan seru-seruan bareng.",
keywords: [
"nonton anime",
"streaming anime",
"anime sub indo",
"anime HD",
"komunitas anime",
"Nounoz TV",
],
openGraph: {
title: "Nounoz TV - Streaming Anime HD + Komunitas Asik",
description:
"Nonton anime jadi lebih seru bareng teman-teman. Kualitas jernih, tanpa iklan ganggu, dan selalu update!",
url: "https://nounoz.tv",
siteName: "Nounoz TV",
images: [
{
url: "https://nounoz.tv/og-image.jpg",
width: 1200,
height: 630,
alt: "Nounoz TV - Nonton Anime HD Bareng Komunitas",
},
],
locale: "id_ID",
type: "website",
},
twitter: {
card: "summary_large_image",
title: "Nounoz TV - Nonton Anime HD Bareng Komunitas",
description:
"Streaming anime kualitas tinggi sambil ngobrol santai bareng komunitas yang aktif dan suportif.",
images: ["https://nounoz.tv/og-image.jpg"],
},
};

18
app/(main)/(home)/page.tsx
View File

@ -1,18 +0,0 @@
import Button from "./button";
import { metadata } from "./metadata";
export { metadata };
import React from "react";
const page = () => {
return (
<main>
<div className="text-center text-3xl mt-6">Nounoz TV</div>
<div>
<Button />
</div>
</main>
);
};
export default page;

7
app/(main)/explore/page.tsx
View File

@ -1,7 +0,0 @@
import React from "react";
const page = () => {
return <div>Explore Page</div>;
};
export default page;

7
app/(main)/genres/page.tsx
View File

@ -1,7 +0,0 @@
import React from "react";
const page = () => {
return <div>Genre Page</div>;
};
export default page;

13
app/(main)/layout.tsx
View File

@ -1,13 +0,0 @@
import NavbarUI from "@/widgets/navbar/ui/Navbar";
import React from "react";
const mainLayout = ({ children }: Readonly<{ children: React.ReactNode }>) => {
return (
<div>
<NavbarUI />
<main>{children}</main>
</div>
);
};
export default mainLayout;

7
app/(main)/schedule/page.tsx
View File

@ -1,7 +0,0 @@
import React from "react";
const page = () => {
return <div>Schedule Page</div>;
};
export default page;

7
app/(main)/trending/page.tsx
View File

@ -1,7 +0,0 @@
import React from "react";
const page = () => {
return <div>Trending Page</div>;
};
export default page;

14
app/api/sentry-example-api/route.ts
View File

@ -1,14 +0,0 @@
import { NextResponse } from "next/server";
export const dynamic = "force-dynamic";
class SentryExampleAPIError extends Error {
constructor(message: string | undefined) {
super(message);
this.name = "SentryExampleAPIError";
}
}
// A faulty API route to test Sentry's error monitoring
export function GET() {
throw new SentryExampleAPIError("This error is raised on the backend called by the example page.");
return NextResponse.json({ data: "Testing Sentry Error..." });
}

23
app/global-error.tsx
View File

@ -1,23 +0,0 @@
"use client";
import * as Sentry from "@sentry/nextjs";
import NextError from "next/error";
import { useEffect } from "react";
export default function GlobalError({ error }: { error: Error & { digest?: string } }) {
useEffect(() => {
Sentry.captureException(error);
}, [error]);
return (
<html>
<body>
{/* `NextError` is the default Next.js error page component. Its type
definition requires a `statusCode` prop. However, since the App Router
does not expose status codes for errors, we simply pass 0 to render a
generic error message. */}
<NextError statusCode={0} />
</body>
</html>
);
}

131
app/globals.css
View File

@ -1,5 +1,126 @@
@import "tailwindcss";
@plugin './hero.ts';
/* Note: You may need to change the path to fit your project structure */
@source '../node_modules/@heroui/theme/dist/**/*.{js,ts,jsx,tsx}';
@custom-variant dark (&:is(.dark *));
@import "tailwindcss";
@import "tw-animate-css";
@import "shadcn/tailwind.css";
@custom-variant dark (&:is(.dark *));
@theme inline {
--color-background: var(--background);
--color-foreground: var(--foreground);
--font-sans: var(--font-sans);
--font-mono: var(--font-geist-mono);
--color-sidebar-ring: var(--sidebar-ring);
--color-sidebar-border: var(--sidebar-border);
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
--color-sidebar-accent: var(--sidebar-accent);
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
--color-sidebar-primary: var(--sidebar-primary);
--color-sidebar-foreground: var(--sidebar-foreground);
--color-sidebar: var(--sidebar);
--color-chart-5: var(--chart-5);
--color-chart-4: var(--chart-4);
--color-chart-3: var(--chart-3);
--color-chart-2: var(--chart-2);
--color-chart-1: var(--chart-1);
--color-ring: var(--ring);
--color-input: var(--input);
--color-border: var(--border);
--color-destructive: var(--destructive);
--color-accent-foreground: var(--accent-foreground);
--color-accent: var(--accent);
--color-muted-foreground: var(--muted-foreground);
--color-muted: var(--muted);
--color-secondary-foreground: var(--secondary-foreground);
--color-secondary: var(--secondary);
--color-primary-foreground: var(--primary-foreground);
--color-primary: var(--primary);
--color-popover-foreground: var(--popover-foreground);
--color-popover: var(--popover);
--color-card-foreground: var(--card-foreground);
--color-card: var(--card);
--radius-sm: calc(var(--radius) - 4px);
--radius-md: calc(var(--radius) - 2px);
--radius-lg: var(--radius);
--radius-xl: calc(var(--radius) + 4px);
--radius-2xl: calc(var(--radius) + 8px);
--radius-3xl: calc(var(--radius) + 12px);
--radius-4xl: calc(var(--radius) + 16px);
}
:root {
--background: oklch(1 0 0);
--foreground: oklch(0.145 0 0);
--card: oklch(1 0 0);
--card-foreground: oklch(0.145 0 0);
--popover: oklch(1 0 0);
--popover-foreground: oklch(0.145 0 0);
--primary: oklch(0.67 0.16 58);
--primary-foreground: oklch(0.99 0.02 95);
--secondary: oklch(0.967 0.001 286.375);
--secondary-foreground: oklch(0.21 0.006 285.885);
--muted: oklch(0.97 0 0);
--muted-foreground: oklch(0.556 0 0);
--accent: oklch(0.97 0 0);
--accent-foreground: oklch(0.205 0 0);
--destructive: oklch(0.58 0.22 27);
--border: oklch(0.922 0 0);
--input: oklch(0.922 0 0);
--ring: oklch(0.708 0 0);
--chart-1: oklch(0.88 0.15 92);
--chart-2: oklch(0.77 0.16 70);
--chart-3: oklch(0.67 0.16 58);
--chart-4: oklch(0.56 0.15 49);
--chart-5: oklch(0.47 0.12 46);
--radius: 0.45rem;
--sidebar: oklch(0.985 0 0);
--sidebar-foreground: oklch(0.145 0 0);
--sidebar-primary: oklch(0.67 0.16 58);
--sidebar-primary-foreground: oklch(0.99 0.02 95);
--sidebar-accent: oklch(0.97 0 0);
--sidebar-accent-foreground: oklch(0.205 0 0);
--sidebar-border: oklch(0.922 0 0);
--sidebar-ring: oklch(0.708 0 0);
}
.dark {
--background: oklch(0.145 0 0);
--foreground: oklch(0.985 0 0);
--card: oklch(0.205 0 0);
--card-foreground: oklch(0.985 0 0);
--popover: oklch(0.205 0 0);
--popover-foreground: oklch(0.985 0 0);
--primary: oklch(0.77 0.16 70);
--primary-foreground: oklch(0.28 0.07 46);
--secondary: oklch(0.274 0.006 286.033);
--secondary-foreground: oklch(0.985 0 0);
--muted: oklch(0.269 0 0);
--muted-foreground: oklch(0.708 0 0);
--accent: oklch(0.371 0 0);
--accent-foreground: oklch(0.985 0 0);
--destructive: oklch(0.704 0.191 22.216);
--border: oklch(1 0 0 / 10%);
--input: oklch(1 0 0 / 15%);
--ring: oklch(0.556 0 0);
--chart-1: oklch(0.88 0.15 92);
--chart-2: oklch(0.77 0.16 70);
--chart-3: oklch(0.67 0.16 58);
--chart-4: oklch(0.56 0.15 49);
--chart-5: oklch(0.47 0.12 46);
--sidebar: oklch(0.205 0 0);
--sidebar-foreground: oklch(0.985 0 0);
--sidebar-primary: oklch(0.77 0.16 70);
--sidebar-primary-foreground: oklch(0.28 0.07 46);
--sidebar-accent: oklch(0.269 0 0);
--sidebar-accent-foreground: oklch(0.985 0 0);
--sidebar-border: oklch(1 0 0 / 10%);
--sidebar-ring: oklch(0.556 0 0);
}
@layer base {
* {
@apply border-border outline-ring/50;
}
body {
@apply bg-background text-foreground;
}
}

5
app/hero.ts
View File

@ -1,5 +0,0 @@
// hero.ts
import { heroui } from "@heroui/react";
// or import from theme package if you are using individual packages.
// import { heroui } from "@heroui/theme";
export default heroui();

7
app/home/page.tsx Normal file
View File

@ -0,0 +1,7 @@
import { redirect } from "next/navigation";
const page = () => {
redirect("/");
};
export default page;

48
app/layout.tsx
View File

@ -1,20 +1,40 @@
import type { Metadata } from "next";
import { Geist, Geist_Mono, Inter } from "next/font/google";
import Navbar from "@/shared/widgets/navbar/components/Navbar";
import "./globals.css";
import GeistFontProvider from "@/providers/fonts/GeistFontProvider";
import HeroUIWrapper from "@/providers/HeroUIWrapper";
import NextTopLoader from "nextjs-toploader";
import React from "react";
const RootLayout = ({ children }: Readonly<{ children: React.ReactNode }>) => {
const inter = Inter({ subsets: ["latin"], variable: "--font-sans" });
const geistSans = Geist({
variable: "--font-geist-sans",
subsets: ["latin"],
});
const geistMono = Geist_Mono({
variable: "--font-geist-mono",
subsets: ["latin"],
});
export const metadata: Metadata = {
title: "Create Next App",
description: "Generated by create next app",
};
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang="en" className="dark">
<body>
<NextTopLoader easing="ease" showSpinner={false} />
<GeistFontProvider>
<HeroUIWrapper>{children}</HeroUIWrapper>
</GeistFontProvider>
<html lang="en" className={`${inter.variable} dark`}>
<body
className={`${geistSans.variable} ${geistMono.variable} antialiased`}
>
<div className="max-w-400 mx-auto relative">
<Navbar />
<div className="pt-16">{children}</div>
</div>
</body>
</html>
);
};
export default RootLayout;
}

5
app/page.tsx Normal file
View File

@ -0,0 +1,5 @@
import HomeIndex from "@/features/home";
export default function Page() {
return <HomeIndex />;
}

209
app/sentry-example-page/page.tsx
View File

@ -1,209 +0,0 @@
"use client";
import Head from "next/head";
import * as Sentry from "@sentry/nextjs";
import { useState, useEffect } from "react";
class SentryExampleFrontendError extends Error {
constructor(message: string | undefined) {
super(message);
this.name = "SentryExampleFrontendError";
}
}
export default function Page() {
const [hasSentError, setHasSentError] = useState(false);
const [isConnected, setIsConnected] = useState(true);
useEffect(() => {
async function checkConnectivity() {
const result = await Sentry.diagnoseSdkConnectivity();
setIsConnected(result !== 'sentry-unreachable');
}
checkConnectivity();
}, []);
return (
<div>
<Head>
<title>sentry-example-page</title>
<meta name="description" content="Test Sentry for your Next.js app!" />
</Head>
<main>
<div className="flex-spacer" />
<svg height="40" width="40" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M21.85 2.995a3.698 3.698 0 0 1 1.353 1.354l16.303 28.278a3.703 3.703 0 0 1-1.354 5.053 3.694 3.694 0 0 1-1.848.496h-3.828a31.149 31.149 0 0 0 0-3.09h3.815a.61.61 0 0 0 .537-.917L20.523 5.893a.61.61 0 0 0-1.057 0l-3.739 6.494a28.948 28.948 0 0 1 9.63 10.453 28.988 28.988 0 0 1 3.499 13.78v1.542h-9.852v-1.544a19.106 19.106 0 0 0-2.182-8.85 19.08 19.08 0 0 0-6.032-6.829l-1.85 3.208a15.377 15.377 0 0 1 6.382 12.484v1.542H3.696A3.694 3.694 0 0 1 0 34.473c0-.648.17-1.286.494-1.849l2.33-4.074a8.562 8.562 0 0 1 2.689 1.536L3.158 34.17a.611.611 0 0 0 .538.917h8.448a12.481 12.481 0 0 0-6.037-9.09l-1.344-.772 4.908-8.545 1.344.77a22.16 22.16 0 0 1 7.705 7.444 22.193 22.193 0 0 1 3.316 10.193h3.699a25.892 25.892 0 0 0-3.811-12.033 25.856 25.856 0 0 0-9.046-8.796l-1.344-.772 5.269-9.136a3.698 3.698 0 0 1 3.2-1.849c.648 0 1.285.17 1.847.495Z" fill="currentcolor"/>
</svg>
<h1>
sentry-example-page
</h1>
<p className="description">
Click the button below, and view the sample error on the Sentry <a target="_blank" href="http://localhost:3100/organizations/syzne-tv/issues/?project=1">Issues Page</a>.
For more details about setting up Sentry, <a target="_blank"
href="https://docs.sentry.io/platforms/javascript/guides/nextjs/">read our docs</a>.
</p>
<button
type="button"
onClick={async () => {
await Sentry.startSpan({
name: 'Example Frontend/Backend Span',
op: 'test'
}, async () => {
const res = await fetch("/api/sentry-example-api");
if (!res.ok) {
setHasSentError(true);
}
});
throw new SentryExampleFrontendError("This error is raised on the frontend of the example page.");
}}
disabled={!isConnected}
>
<span>
Throw Sample Error
</span>
</button>
{hasSentError ? (
<p className="success">
Error sent to Sentry.
</p>
) : !isConnected ? (
<div className="connectivity-error">
<p>It looks like network requests to Sentry are being blocked, which will prevent errors from being captured. Try disabling your ad-blocker to complete the test.</p>
</div>
) : (
<div className="success_placeholder" />
)}
<div className="flex-spacer" />
</main>
<style>{`
main {
display: flex;
min-height: 100vh;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 16px;
padding: 16px;
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
}
h1 {
padding: 0px 4px;
border-radius: 4px;
background-color: rgba(24, 20, 35, 0.03);
font-family: monospace;
font-size: 20px;
line-height: 1.2;
}
p {
margin: 0;
font-size: 20px;
}
a {
color: #6341F0;
text-decoration: underline;
cursor: pointer;
@media (prefers-color-scheme: dark) {
color: #B3A1FF;
}
}
button {
border-radius: 8px;
color: white;
cursor: pointer;
background-color: #553DB8;
border: none;
padding: 0;
margin-top: 4px;
& > span {
display: inline-block;
padding: 12px 16px;
border-radius: inherit;
font-size: 20px;
font-weight: bold;
line-height: 1;
background-color: #7553FF;
border: 1px solid #553DB8;
transform: translateY(-4px);
}
&:hover > span {
transform: translateY(-8px);
}
&:active > span {
transform: translateY(0);
}
&:disabled {
cursor: not-allowed;
opacity: 0.6;
& > span {
transform: translateY(0);
border: none
}
}
}
.description {
text-align: center;
color: #6E6C75;
max-width: 500px;
line-height: 1.5;
font-size: 20px;
@media (prefers-color-scheme: dark) {
color: #A49FB5;
}
}
.flex-spacer {
flex: 1;
}
.success {
padding: 12px 16px;
border-radius: 8px;
font-size: 20px;
line-height: 1;
background-color: #00F261;
border: 1px solid #00BF4D;
color: #181423;
}
.success_placeholder {
height: 46px;
}
.connectivity-error {
padding: 12px 16px;
background-color: #E50045;
border-radius: 8px;
width: 500px;
color: #FFFFFF;
border: 1px solid #A80033;
text-align: center;
margin: 0;
}
.connectivity-error a {
color: #FFFFFF;
text-decoration: underline;
}
`}</style>
</div>
);
}