Anime Information App

Overview

This project is a web application for displaying and managing information about anime. The application features a dynamic and responsive front end built with Next.js and React, along with an Express.js back end and SQLite database. It supports both dark and light modes and includes an admin side for managing the database.

Features

• Dynamic Routing: Display detailed information about different anime based on the route.
• Dark Mode / Light Mode: Switch between dark and light themes for better user experience.
• Responsive Design: Adaptable UI for various screen sizes and devices.
• Admin Panel: Access the admin side at http://localhost:5000/admin to edit the database and manage content.
• Animation Effects: Enhanced UI with animations using Framer Motion and Anime.js.
• Auto Slider: Image sliders for showcasing anime details using React Slick.

Purpose

This project demonstrates the integration of modern web technologies including Next.js for server-side rendering, Express.js for building the back end, and SQLite for database management. It is designed to provide a seamless experience for users exploring anime details while also allowing administrators to manage content easily.

Requirements & Dependencies

JavaScript Dependencies

• @heroicons/react: ^2.1.5
• animejs: ^3.2.2
• axios: ^1.7.2
• cors: ^2.8.5
• dotenv: ^16.4.5
• express: ^4.19.2
• express-rate-limit: ^7.4.0
• express-validator: ^7.1.0
• framer-motion: ^11.3.17
• mongoose: ^8.5.1
• next: 14.2.5
• react: ^18
• react-calendar: ^5.0.0
• react-dom: ^18
• react-icons: ^5.2.1
• react-responsive: ^10.0.0
• react-slick: ^0.30.2
• slick-carousel: ^1.8.1
• sqlite3: ^5.1.7

Scripts

• back: Start the Express back end server (node backend/server.js)
• front: Start the Next.js front end development server (next dev)
• build: Build the Next.js application (next build)
• start: Start the Next.js application (next start)
• lint: Lint the project using Next.js linting tools (next lint)

Installation

To run this project locally, follow these steps:

1. Clone the repository:

   git clone https://github.com/Fqih/WebStreaming.git

2. Navigate to the project directory

   cd WebStreaming

Run FrontEnd

1. Navigate to the Web directory

    cd web-directory

2. Install dependencies

   npm install

   if you using yarn

   yarn install

3. Start

   npm run front

   or

   yarn run front

Run BackEnd

1. Navigate to the Web directory

    cd web-directory

2. Install dependencies

   npm install

   if you using yarn

   yarn install

3. Start

   npm run back

   or

   yarn run back

4. Usage

• Open the application in your web browser.
• Navigate to different anime pages using the dynamic routes.
• Switch between dark and light modes using the theme toggle.
• Access the admin panel at http://localhost:5000/admin to manage database entries and other admin functionalities.

Screenshots

Mobile View

Desktop View

Desktop View

Admin Dashboard

🔗 Links

Feedback

If you have any feedback, please reach out to me at [email protected]

About me

Name : Muhammad Faqih Hakim

Email : [email protected]