Wibupedia

📋 Table of Contents

🤖 Introduction
⚙️ Tech Stack
🔋 Features
🤸 Quick Start
🕸️ Snippets (Code to Copy)

An entertainment platform that provides comprehensive information on anime , featuring a responsive interface and interactive elements like clickable anime cards, comment sections, and a video player, using modern technology and intuitive design to support fans in exploring and discussing their favorite titles.

⚙️ Tech Stack

Next.js
Tailwind CSS
Prisma
Next Auth

🔋 Features

👉 Simple Authentication: Secure and reliable user login with github.

👉 Fully Functional Search: Allows users to find anime easily using anime titles.

👉 Anime Detail Page: Displays detailed information about each anime, including synopsis, rating, and anime trailer.

🤸 Quick Start

Follow these steps to set up the project locally on your machine.

Prerequisites

Make sure you have the following installed on your machine:

Git
Node.js
npm (Node Package Manager)

Cloning the Repository

git clone https://github.com/Nopalogic/wibupedia.git
cd wibupedia

Installation

Install the project dependencies using npm:

npm install

Set Up Environment Variables

Create a new file named .env in the root of your project and add the following content:

DATABASE_URL=
GITHUB_CLIENT=
GITHUB_SECRET=
NEXTAUTH_SECRET=

Running the Project

npm run dev

Open http://localhost:3000 in your browser to view the project.

🕸️ Snippets

next.config.mjs

/** @type {import('next').NextConfig} */
const nextConfig = {
  images: {
    remotePatterns: [
      {
        hostname: "cdn.myanimelist.net",
      },
      {
        hostname: "avatars.githubusercontent.com",
      },
    ],
  },
};

export default nextConfig;