Pokégraph - .NET 7, GraphQL, HotChocolate and Vue 3 (composition API)

Pokégraph is my showcase of building a GraphQL-based API with .NET 7, front-ended by a very lightweight SPA built with Vue 3 (composition API) and Apollo. It comes with an SQLite database loaded with 151 monsters but also allows you to perform queries for listing and mutations for adding or updating the existing ones.

Pokémon is © 1995-present Nintendo, The Pokémon Company, Game Freak, Creatures Inc.
This project does not claim to own any characters, concepts or artwork.

Screenshots

Mutations

Architecture

Domain

This is where the domain models and business logic are defined. You may understand a bit more about the Pokémon domain by reading the code and understanding how the smaller pieces compose the aggregate.

Api

A .NET 7 minimal API implementing GraphQL server to perform Queries, Mutations, and Subscriptions. It's in charge of using the infrastructure to perform database operations and return mapped ViewModels to the frontend.

Infrastructure

Implements the database configuration and repositories. Also contains the PokegraphDb SQLite database with the 151 first Pokémon and their data for you to play.

Technologies used

Backend

• .NET 7 and C# 10
• .NET 7
• Entity Framework Core 7.0.11
• EntityFrameworkCore.Sqlite 7.0.11
• Automapper 12.0.1
• HotChocolate 13.5.1

Frontend

• Vue 3 and TypeScript
• Vue Apollo
• Toast for Vue

What do you need to run it

• The latest .NET Core SDK.
• NodeJs for the frontend.

Running the GraphQL Api

Navigate to Pokegraph.Api folder and run:

 $ dotnet run

Running the Vue 3 SPA

Navigate to pokegraph.spa and run for the node packages and serving the SPA on http://localhost:8080 respectively:

 $ npm install
 $ npm run serve