InstallationFrontend Installation

Frontend Installation

This section guides you through setting up the frontend of ArtVault using Next.js, TailwindCSS, and Thirdweb SDK

App Structure

.env
.eslintrc.json
.gitignore
.npmrc
.prettierrc
next.config.mjs
package.json
postcss.config.js
tailwind.config.ts
tsconfig.json

Each part plays a specific role:

1. public folder

In Next.js, the public folder serves as a static file directory to store and serve files that should be publicly accessible without processing by the Next.js server. Its primary purpose is to hold static assets like logos, fonts, favicon etc.

logo.svg
logo_dark.svg

2. src folder

It typically contains the core application files, such as pages, components, styles, and other logic, instead of placing them directly in the root directory.

We'll get to some of the files from this directory in the following sections to modify it to fit your purpose.

Prerequisites for proceeding

Before starting the front-end installation, there are a few tools and configurations you need to have in place to ensure everything runs smoothly.

1. pnpm

open your command line and install pnpm globally on your machine

npm install -g pnpm

2. Code Editor

In order to be able to midified the target file, you need a code editor, we'd recommend VS Code

On this page