A simple anime catalogs
Hero anime is a responsive website created to show anime information, such as name, number of episodes and trailler if available.
Go to project terminal and run the code below
yarn install
After all dependecies installed
To run
yarn dev
.
├── src/
| ├── components/ # all components of project
| | ├── Layout/
| | | ├── index.tsx # define the main structure of the project
| | | ├── styles.less # styling of components
| | ├── Nav/
| | | ├── helpers/
| | | | ├── index.ts # functions and vars used in nav
| | | ├── LeftMenu/
| | | | ├── index.ts # left nav bar components
| | | | ├── index.less # styling of component
| | | ├── RigthMenu/
| | | | ├── index.ts # right nav bar components
| | | | ├── index.less # styling of component
| | | ├── index.tsx # component that allows browse the pages
| | | ├── styles.less # styling of components
| | ├── Header/
| | | ├── index.tsx # home page header component
| | | ├── styles.less # styling of components
| | ├── ListAnimes
| | | ├── helpers/
| | | | ├── slider.ts # slider settings
| | | ├── index.tsx # component that allows the listing of animes by category
| | | ├── styles.less # styling of components
| | ├── CardAnime/
| | | ├── index.tsx # card that shows anime information
| | | ├── styles.less # styling of components
| | ├── ListTrending
| | | ├── helpers/
| | | | ├── slider.ts # slider settings
| | | ├── index.tsx # component that allows the listing of trending anime
| | | ├── styles.less # styling of components
| | ├── CardTrendig/
| | | ├── index.tsx # card that shows anime trending information
| | | ├── styles.less # styling of components
| | ├── Pagination/
| | | ├── helpers/
| | | | ├── index.ts # pagination function implementation
| | | ├── index.tsx # component that lets you page search results
| | | ├── styles.less # styling of components
| | ├── helpers/
| | | ├── interface.ts # project interfaces
| ├── pages/ # all project pages.
| | ├── anime/ # page of selected anime
| | | └── [id].tsx #
| | ├── animes/ # page of searched anim
| | | └── index.tsx #
| | ├── \_app.tsx
| | ├── \_document.tsx
| | └── index.tsx # index page
| ├── context/ # global states
| | └── search.tsx #
| ├── services/ # all project external services
| | └── api.ts # axios elements initilized to call external resources
| | └── fakeapi.ts # a specific anime to simulate a call for anime that can be put as the header of the home page
| | └── animeType.d.ts # anime json type
| ├── styles/ # all project pages.
| | ├── pages/
| | | └── Anime.less
| | | └── Animes.less
| | | └── Home.less
| | └── global.less # global style of project
| | └── theme.less # project theme
| ├── utils/ # all project pages.
| | ├── anime.ts
├── README.md
└── ...
- Trending animes
A list of 10 animes to be released soon
https://kitsu.io/api/edge//trending/anime
- This year
List of 10 animes to be released this year
https://kitsu.io/api/edge/anime?filter[seasonYear]=2021
- Midle school
List of 10 high school anime
https://kitsu.io/api/edge/anime?filter[categories]=midle-school
- Samurai
List of 10 samurai anime
https://kitsu.io/api/edge/anime?filter[categories]=samurai
- Select anime
show selected anime information
https://kitsu.io/api/edge/anime/11
- Search anime
Search for an interesting anime
https://kitsu.io/api/edge/anime?filter[text]=naruto
- Pagination on searching
Pagination for search results
https://kitsu.io/api/edge/anime?filter[text]=naruto&page[limit]=20&page[offset]=0
Author - Lutero Elavoco
programmer - Lutero Elavoco - luteroelavoco90@gmail.com
- Fork it (https://github.com/cientista1/heroanime)
- Create your feature branch (
git checkout -b feature/fooBar
) - Commit your changes (
git commit -am 'Add some fooBar'
) - Push to the branch (
git push origin feature/fooBar
) - Create a new Pull Request