/anime-list

NextJS, Graphql, Apollo Client, Typescript, EmotionJS. Implementing simple CRUD without any database, only using localStorage. We are integrating AniList API for our dummy data (query only, no mutation)

Primary LanguageTypeScript

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