Home

About

Contact
2023

Esia

Esia is a project meant to be an online art gallery, where visitors can view artworks and see what exhibitions and events are happening in the gallery.

Technologies and Tools

  • Next.js

    Knowing there would be plenty of artworks to display, it was decided to use Next.js to build the project. Next.js is a framework that allows for server-side rendering, which is ideal for this project as it would allow for faster loading times and better performance.

  • tRPC

    We opted to use tRPC to handle the communication between the client and the server, ensuring typesafety and a faster, safer development. This decision was based on the fact that we expected to deal with many complex types of data, and tRPC was a good fit for this.

  • Supabase

    Supabase is a cloud-based database that provides a robust and scalable solution for storing and retrieving data. With it we stored all of the data we need and used its storage features to store the images for the many artworks and exhibitions.

  • Vercel

    Since we decided on using Next.js, deploying to Vercel seemed like the best, most efficient option. We utilized Vercel’s Analytics and Speed Insights to ensure the project was running smoothly.

Roles and Responsibilities

This project was developed single-handedly by myself in 2023. I was responsible for every facet of it, from design to development. Of note are:

  • UI/UX Designer

    Designed a minimalistic and intuitive interface that would allow for easy navigation without distracting away from the artworks. Being an art gallery, I wanted art to be the main focus when visiting the site. At the same time, I used hover and click animations to display the artworks’ data, which led to bigger, more attractive images.

  • Full-Stack Developer

    Built the project using Next.js and tRPC, connecting to a PostgreSQL database via Prisma. I developed methods to upload images to Supabase buckets, to optimize said images for display. Furthermore, I employed methods such as pagination to ensure the site was fast and responsive despite the large amount of images.

Challenges and Solutions

  • Image Optimization

    One of the biggest issues I faced during this project was optimizing the images for display. With the amount of images the project had, it was important to avoid slow loading times.

    To help with this, I used skeletons while the image was loading, pagination to avoid loading too many images at once, and lazy loading to only load the images when they are in view.