A user-friendly and visually appealing anime website with React
Tags: anime, website
Published: 2023-10-28 15:12:51

---
title: A user-friendly and visually appealing anime website with React
published: true
date: 2023-10-12 00:22:00 UTC
tags: Anime,WebSite
canonical_url: https://reactjsexample.com/a-user-friendly-and-visually-appealing-anime-website-with-react/
---

# AnimeHub
 ![A user-friendly and visually appealing anime website with React](https://reactjsexample.com/content/images/2023/10/Code_2023-10_19-17-27.jpg)

AnimeHub is a user-friendly and visually appealing anime website. It allows users to search for animes by title, sort them by genre, view popular, ongoing, top-rated, and newest anime. Additionally, users can create and manage their watchlist.

![A user-friendly and visually appealing anime website with React](https://github.com/Peacexoom/AnimeHub/raw/main/Images/image-2.png)

![A user-friendly and visually appealing anime website with React](https://github.com/Peacexoom/AnimeHub/raw/main/Images/image-3.png)

![A user-friendly and visually appealing anime website with React](https://github.com/Peacexoom/AnimeHub/raw/main/Images/image-1.png)

## Technologies Used

1. Tailwind CSS
2. ReactJS
3. NodeJS
4. ExpressJS
5. My SQL

## Features

1. User Authentication: Authentication is integrated to provide secure user registration and login functionality.
2. Anime Search: Users can search for animes by title, making it easy to find their favorite shows.
3. Genre Sorting: Animes can be sorted by genre, enabling users to discover new shows based on their preferences.
4. Popular, Ongoing, Top-Rated, and Newest Anime: Users can explore the latest trends, ongoing series, top-rated shows, and newest releases.
5. Watchlist: Users can create and manage their watchlist, keeping track of the animes they plan to watch.

## How to Contribute to this repository

#### Before contibuting create an issue of the bug or a feature you would like to add in the project and get the task assigned for youself.

1. Star the repository.
2. Fork the repository. (Click the Fork button in the top right of this page, click your Profile Image)
3. Clone the forked repository to your local machine.

```
git clone https://github.com/your-username/AnimeHub.git
```

1. Change the present working directory.

```
cd AnimeHub
```

1. Make a new branch

```
git checkout -b branch-name
```

1. Import anime\_hub database into MySQL Workbench

```
Open MySQL Workbench

Open the Local instance

Click Server->Data Import

Select Import from Self-Contained File option

Open AnimeHub\BackEnd\anime_hub_dump.sql

Press start import

```

1. Make .env file in .\AnimeHub\BackEnd just like .env.example and add your password.
2. Install node modules in BackEnd and start backend server.

```
cd BackEnd
npm install
npm run start
```

1. Install node modules in FrontEnd and start frontend server.

```
cd FrontEnd
npm install
npm run dev
```

1. Make change in the repository with the new branch.

2. Push the changes.

```
git add .
git commit -m "Your commit Message"
git push origin branch-name
```

1. Make a pull request on Github.

### Happy anime watching! 🍿

## GitHub

[View Github](https://github.com/Peacexoom/AnimeHub?ref=reactjsexample.com)