Rick Lowe Site

Official Artist's Website

Table of Contents

Click to expand

• Getting Started
• Project Structure
• Sanity Studio
• API Routes
• Packages
• Deploy on Vercel
• Learn More

Getting Started

This is the source code for Rick Lowe's artist website. This is a Next.js project bootstrapped with:

1. create-next-app
2. tailwindcss
3. typescript.

The project was created using pnpm.

You can use any of the various package managers out there:

• yarn
• npm.

First install the dependencies:

pnpm install

Next you'll need to clone down the .env file from the Rick Lowe Vercel Project and place it in the root of this project.

See the Vercel tutorial on cloning environment variables for more.

.
├── ...
├── .env <== HERE
├── .gitignore
├── README.md
├── next.config.js
├── package.json
├── pnpm-lock.yaml
├── public/
├── app/

Now that the environment variables are available, you run the development server and start coding:

pnpm dev

Open http://localhost:3000 with your browser to see the result.

Watch this video for a walkthrough on getting started and commiting your first change.

Project Structure

The project is structured using Next.js's recommended project structure. Particularly it makes use of the App Router.

The project directories are as follows:

1. app/ - contains the Next.js app
2. public/ - contains the static assets
3. sanity/ - contains the Sanity Studio project
4. components/ - contains the shared components and presentational components
5. lib/ - contains the shared utility functions
6. .github/ - contains the GitHub release.yml and pull_request_template.md files
7. .husky/ - contains the Husky configuration for Git hooks (pre-commit and pre-push)
8. templates/ - contains an email template for the contact form

The miscellaneous files are as follows:

Configurations

1. next.config.js - contains the Next.js configuration
2. tsconfig.json - contains the TypeScript configuration
3. tailwind.config.js - contains the Tailwind CSS configuration
4. postcss.config.js - contains the PostCSS configuration
5. sanity.config.ts - contains the Sanity Studio configuration

Package Files

1. pnpm-lock.yaml - contains the pnpm lockfile
2. package.json - contains the project dependencies and scripts

Project Files

1. .env - contains the environment variables
2. .gitignore - contains the files and directories to ignore
3. constants.ts - contains the project constants
4. typings.d.ts - contains the TypeScript type definitions (auto imported by Next.js)
5. sanity.cli.ts - contains the Sanity CLI commands

Sanity Studio

Studio Configuration

The Sanity Studio project is located in the sanity/ directory. It is a Sanity project bootstrapped with a boosted plan.

The Rick Lowe developer email has access to the studio. To access the studio locally visit http://localhost:3000/studio.

In the sanity.config.ts you will see a custom configuration that sets the about page and paintings page as singletons, this stops the user from creating multiple about and paintings documents in the studio, as these are single pages that are not meant to be duplicated in any way.

You will also find a custom <StudioNavbar /> in components/ui/Layout/StudioNavbar.tsx that is used to navigate between the studio and the website. The navbar is initialized in the sanity.config.ts file.

// sanity.config.ts
...
studio: {
  components: {
    navbar: StudioNavbar,
  }
}
...

Studio Schemas

Inside the studio/ directory you can edit the schemas for each document type as well as some content block types.

The document schemas are as follows:

1. about.ts - contains the schema for the about page
2. contact.ts - contains the schema for the contact page
3. paintings.ts - contains the schema for the painting page
4. media.ts - contains the schema for the media page
5. project.ts - contains the schema for the project page
6. timeline.ts - contains the schema for the timeline page

The content block schemas are as follows:

1. blockContent.ts - contains the schema for the block content (Rich Text Editor)
2. imageGallery.ts - contains the schema for the image gallery with options for a carousel or grid
3. videoEmbed.ts - contains the schema for a video link i.e YouTube or Vimeo

Studio lib/ Functions

Inside the lib/ directory you will find the following functions:

1. client.ts - contains the Sanity client for fetching data from the Sanity API
2. getClient.ts - contains the function for initializing the Sanity client to fetch data from the Sanity API via preview mode or normally
3. image.ts - contains the function for generating the Sanity image URL
4. queries.ts - contains the groq queries for fetching data from the Sanity API

API Routes

The in app API routes are located in the app/api/ directory. There are also some helper functions in the app/lib/ directory that are used by the API routes. They're pretty straight forward and are documented in the code.

Contact API Routes

Verifying the captcha in the contact form

/contact/verify/route.ts - contains the POST API route for verifying the captcha in the contact form

POST /api/contact/verify

Example POST request body:

{
	"token": "<captcha-token>"
}

Sending an email from the contact form

/contact/send/route.ts - contains the POST API route for sending an email from the contact form

POST /api/contact/send

Types for the request body:

type ContactForm = {
	firstName: string;
	lastName: string;
	subject: string;
	email: string;
	phoneNumber: string;
	message: string;
};

Example POST request body:

{
	"firstName": "Rick",
	"lastName": "Lowe",
	"subject": "Hello",
	"email": "[email protected]",
	"phoneNumber": "1234567890",
	"message": "Hello, I would like to get in touch with you."
}

Packages

This project uses next/font to automatically optimize and load Inter, a custom Google Font.

Below is a list of packages and links to their documentation that are used in this project.

Development

• @types/react - for TypeScript type definitions for React
• @types/react-dom - for TypeScript type definitions for React DOM
• @types/nodemailer - for TypeScript type definitions for Nodemailer
• cz-conventional-changelog - for commitizen commit messages
• husky - for git hooks

Components and UI

• @headlessui/react - for building accessible UI components
• @heroicons/react - icons from the team at Tailwind CSS
• @tailwindcss - for styling the UI
• @tailwindcss/forms - for styling form elements
• @portabletext/react - for rendering Sanity block content
• react-player - for rendering videos
• react-responsive-carousel - for rendering image galleries
• react-toastify - for displaying toast notifications

Forms/Validation

• @hookform/resolvers - for using TypeScript with React Hook Form
• react-hook-form - for building forms
• react-google-recaptcha-v3 - for using Google reCAPTCHA v3
• yup - for form validation

Deploy on Vercel

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out our Next.js deployment documentation for more details.

You should have access to the Vercel project for this website with the developer email and/or the github account. If you don't, ask the owner of the project to add you as a collaborator.

In order to deploy your changes after they have been merged to the main branch, you'll need to open a pull request from the main branch that will merge into production. After the PR is opened, you'll need to verify that the preview deployment was successfull and your changes are functioning as intended. Once you're satisfied with this, you can merge the pull request into the the production branch and Vercel will automatically deploy said changes to production and the site should be updated.

Check out this video for a tutorial on deploying to production on vercel

Learn More

To learn more about Next.js, take a look at the following resources:

• Next.js Documentation - learn about Next.js features and API.
• Learn Next.js - an interactive Next.js tutorial.

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!