Chainsaw Man Movie Theater GifChainsaw Man Movie Theater GifChainsaw Man Movie Theater Gif

About

Just like films and tv shows, anime is a medium that offers a diverse range of genres and storytelling styles, allowing for endless possibilities in creating unique and captivating narratives that can appeal to a wide range of audiences. As a fan, I would like to share some animes I have enjoyed in the past with others but in a more engaging, and personal way.

Therefore, as a programmer and someone with limited frontend development experience, I saw this as a beneficial opportunity to learn more about frontend development and expand my skillset, while also presenting my favorite animes in an interactive format.

Technologies Used

TechnologyDescription
NextJS Logo

NextJS

NextJS is an open-source React framework for web development. It is used for its component-based architecture, JSX syntax, automatic code splitting, pre-rendering capabilities, ease of routing, and typescript support.

TypeScript Logo

TypeScript

TypeScript is an open-source programming language that is a superset of JavaScript. It is used for reliability and maintainability due to its type-safe code writing, and object-oriented programming features such as interfaces.

TailwindCSS Logo

TailwindCSS

TailwindCSS is an open-source CSS framework. It is used for its easy to use utility classes which provides pre-designed CSS classes to use for styling and responsive design.

MongoDB Logo

MongoDB

MongoDB is an open-source document-oriented database. It is used for storing the data for each anime in the anime list.

Prisma Logo

Prisma

Prisma is an open-source ORM (Object-Relational Mapping) tool. It is used to define the database schema and to interact with the data from the MongoDB database with ease.

Vercel Logo

Vercel

Vercel is a cloud platform for deploying web applications. It is used to host this website because Vercel created NextJS making it very compatible.

Zustand Logo

Zustand

Zustand is an open-source state management library for React applications. It is used to create the info modal when hovering over the anime cards. Compared to Redux, Zustand has a far more simpler and intuitive API.

SWR Logo

SWR

SWR is an open-source React hooks library for data fetching and caching. It is mainly used for its built-in caching features to display cached data to the user before it revalidates it with updated data.

Axios Logo

Axios

Axios is an open-source promised-based HTTP client for Javascript. It is used to make requests to our internal API to fetch the data required for the website.

ESLint Logo

ESLint

ESLint is an open-source Javascript linting utility for identifying problematic patterns in Javascript code. It is used to maintain a standard across the whole source code to keep it consistent and less buggy.

Lodash Logo

Lodash

Lodash is an open-source JavaScript utility library. It is used for its useful utilities to simplify common programming tasks similar to Pandas and NumPy for Python.

Git Logo

Git

Git is an open-source version control system that manages and keeps track of the source code history. Git is used to keep track of all the changes in the code made throughout development of this website.

Github Logo

Github

Github is a cloud hosting service for software development and version control using Git. Github is used to store the source code and historical source code of this website.