Overview

A project of a landing page for a private person. The goal was to create a page where user can add and show personal projects as a form of a business portfolio.

Live:

murawska.studio

Lastest audit:

insights.murawska.studio

Tools & Technologies

Others

	Tool	Used for
	GitHub	project management and maintenance, CI/CD
	Unlighthouse	quality assurance
	Figma	design, assets, prototyping, wireframing Mobile Wireframe Mobile Prototype Tablet Prototype Tablet Wireframe Desktop Wireframe Desktop Prototype Color palette
	Jira	project management and maintenance
	Jest	code testing and quality assurance
	Testing Library	code testing and quality assurance
	ESLint	code linting
	Prettier	code formatting
	Stylelint	code formatting
	Apollo	GraphQL client
	Framer Motion	animations
	ngrok	local environment tunneling and webhook testing
	SendGrid	email service

Features

Integration with Sanity headless CMS.

To minimize the developer interference in adding and managing new content on the page, and to give the user a clear and easy way to do that on his own, Sanity CMS was used.

The user has an administration panel under the /studio path in which he can manage content on the page such as projects, assets, etc.

Sanity CMS integration

Live content drafts preview.

The user can see how content changes will look without the need to deploy those to production.

This can be done inside the studio.

Live drafts preview - studio

Or just by hitting the /api/enable-draft endpoint.

Live drafts preview - API

Pages revalidation on CMS content change.

To not have to deploy the whole application every time content changes, and to ensure site performance, there is integration with Sanity webhooks.

When content changes, webhook will send info payload to the /api/revalidate endpoint, and then the server will generate necessary, new static files with fresh data.

Setup

Clone the repository:

git clone https://github.com/842u/kor-mur.git

Install dependencies:
```
npm install
```
To run development environment:
```
npm run dev
```
To run production environment:
```
npm run build
npm run start
```

At this point running app will contain placeholders instead of real data from CMS and will not have all of its functionality.

To enable all features you will have to:

Create a Sanity account with a new project to use it as CMS and to enable On-Demand revalidation.
Create a Sendgrid account to be able to receive emails.
Complete .env file with your API keys.

Sanity CMS setup

Create "production" and "development" datasets in your Sanity project.
Complete .env with the dataset name you want to use.
Complete .env with your Sanity project ID.
Complete .env with your Sanity GraphQL endpoint for your project.

https://<yourProjectId>.api.sanity.io/v1/graphql/<dataset>/default
Deploy GraphQL API:
```
npx sanity graphql deploy
```
Add your hosts to CORS origins in Sanity project.

e.g. http://localhost:3000 for development

e.g. https://www.your.domain for production
Enter studio to add content.

e.g. http://localhost:3000/studio

On-Demand revalidation setup

To be able to revalidate routes in production on content change you will have to set up Sanity webhooks.

Create a new webhook in Sanity project.
Add the URL to the revalidation api endpoint.

e.g. https://www.your.domain/api/revalidate
Select "production" dataset.
Select webhook trigger on Create, Update, Delete.

Set Filter to:

_type in ['heroSectionSettings', 'mottoSectionSettings', 'featuredProjectsSectionSettings', 'contactSectionSettings', 'aboutSectionSettings', 'tag', 'project']

Set Projection to:

{
_type,
_id,
"operationType": delta::operation(),
"projectSlug": slug.current,
"tagsSlugsBefore": before().tags[]->slug.current,
"tagsSlugsAfter": after().tags[]->slug.current,
}

Create a secret for webhook and add it to your .env.

SendGrid setup

Authenticate your Sender Identity on SendGrid.
Complete .env with your SendGrid Sender email.
Complete .env with recipent email.

License