This is a Next.js project bootstrapped with create-next-app.

Getting Started

First, run the development server:

npm run dev
# or
yarn dev
# or
pnpm dev

Open http://localhost:3000 with your browser to see the result.

This is a test project for a job application. It is a simple web app that displays a list of anime from anilist.co. The user can also click on an anime to see more details about it.

There are some other features such as adding a collection of anime to the user's local storage, and many more.

Technologies Used

• Next.js
• TypeScript
• CSS-in-JS (emotion)
• GraphQL
• Apollo Client
• ESLint

Project Structure

• pages/ - Contains all the pages for the app
• components/ - Contains all the components for the app
• graphql/ - Contains all the GraphQL queries and mutations
• utils/ - Contains all the utility functions
• styles/ - Contains all the global styles
• public/ - Contains all the static assets
• types/ - Contains all the TypeScript types

Features

• Anime list
• Bulk add to collection (optional)
• Anime detail info
• Add to the collection
• Collection info
• Collection list info
• Remove collection
• Add collection
• Edit collection
• Collection detail info
• Remove anime from collection
• Edit collection name