Frontend

The Pictshare Book frontend is written in the Next.js framework, with pixi.js for rendering the canvas.

Stack

The frontend is built using the following technologies:

• Next.js as the web framework
• Pixi.js for rendering the canvas
• Shadcn/ui for UI components
• Tailwind CSS for styling
• Hookform for form validation and management
• Vitepress for documentation

Overview

The frontend is built on Next.js, because it is a popular and stable framework that is widely used in the industry. It allows for server-side rendering, which improves the initial load time.

The canvas is rendered using Pixi.js, which is an incredibly optimized open-source library for creating interactive 2D content. Pixi.js is very powerful but also very bare-bones, so most of the functionality needed to be implemented from scratch.

Tailwind in combination with Shadcn/ui provides a fast and flexible way to style the frontend. It allows for rapid prototyping and easy customization while not compromising on the looks.