Rick and Morty API

Introduction

This is a collection of projects for the course Web Development at NTNU.

The first project included a React client, an Express GraphQL server, and a MySQL database. Read more about it here.

The next project built on the first, but used a Vue client with the same backend and database. Read more about it here.

Description

This project is full-stack web application about Rick and Morty characters.

As a user, you can search and filter characters. As a logged in user, you can rate a given character. You can also see a leaderboard of all users' number of ratings, sorted in ascending or descending order.

What I learned

Setting up a GraphQL server

Before this project, I mostly had experience using Next.js and their /api folder. I had also used Apollo Client to query a GraphQL API, but never set up a GraphQL server myself.

I learned how to set up a GraphQL server with Express and express-graphql. I also learned how to use Prisma to connect to a MySQL database.

In order to improve the developer experience by ensuring type safety, GraphQL Code Generator was used to generate TypeScript types from the GraphQL schema.

Prisma

Prisma is an ORM for Node.js and TypeScript. It is used to connect to a database and generate TypeScript types from the database schema.

I found the developer experience using Prisma to be extremely good. It was easy to set up and use, and it made it easy to write queries and mutations to the database. Furthermore, I felt that I could both use GitHub Copilot and the IntelliSense in VS Code to write queries and mutations extremely fast. This was a huge improvement over writing SQL queries.

However, it is a known issue that Prisma's generated SQL queries are not optimal. This can be a problem if the database is large, as it can lead to performance issues. This was not the case for this school project, but it is something to keep in mind.

Mantine

Mantine is a React UI library with many built-in accessible components. It is a collection of React components and useful hooks that are easy to use and customize.

I used Mantine for the first time in this project. I found it to be a great library, and I would definitely use it again.

Furthermore, a big selling point of Mantine is the useful hooks that it provides. For example, the useForm hook makes it easy to create forms with validation. It also provides a useLocalStorage hook, which makes it easy to store data in the browser's local storage.

One downside of Mantine is that you run the risk of shipping a lot of unused code to the client. This is because Mantine is a monorepo with many packages. However, this is not a problem for this project, as the client is not very large. As an important factor of this school project was to learn about accessability and how to make a website accessible, I did not want to use a UI library that did not have built-in accessibility features.

Vue

In the first project, I used React. In this project, I used Vue.

In general, it was healthy to be exposed to a UI framework that is quite different to React. I learned a lot about how to structure a Vue application, and I also learned about the Vue ecosystem.

I found Vue to have a worse developer experience overall, as I often struggled auto-importing components and seldom got the expected type safety when working. This limited my productivity.