- Built with
React
,Next.js
andTypeScript
- Managing state with
React Query
- Handling forms and validation with
React Hook Form
andzod
- Managing content with
Contentful CMS
- Styling with
TailwindCSS
- Deployed with
Vercel
The products are managed in the Contentful CMS dashboard (https://app.contentful.com).
Under Settings
-> Locales
, set the default to Hebrew (he)
and add a new locale English (en)
.
For the English locale, tick the "Allow empty fields for this locale" checkbox and don't provide a fallback locale.
Under Content model
, click on Add content type
and create a new content model Product
.
It should contain the following fields:
- Title
- Short text
- Enable localization on this field and set as required
- Price
- Integer
- Set as required
- Pictures
- Media, many files
- Set as required
Contentful's tags are used to categorize products.
You can edit these tags under Settings
-> Tags
.
The tag name is used as a label for the category.
To apply a tag to a product, go to the product's entry under Content
and click the Tags
tab.
For a quick start, rename .env.local.example
in the project root to .env.local
and open it. This file contains all the neccessary environment variables for the project.
NEXT_PUBLIC_CONTENTFUL_SPACE_ID
Your Contentful space ID.
You can find it under Settings
-> General Settings
-> Space ID
.
NEXT_PUBLIC_CONTENTFUL_ACCESS_TOKEN
Your Contentful access token.
You can create a new access token under Settings
-> API keys
-> Add API key
.
After creating your API key, copy the "Content Delivery API - access token" value.
NEXT_PUBLIC_EMAIL_ADDRESS
This Gmail address will send itself a new mail for every contact form submission.
This google account must generate and use an App Password (see NEXT_PUBLIC_PASSWORD
).
NEXT_PUBLIC_PASSWORD
An App Password for the google account mentioned in NEXT_PUBLIC_EMAIL_ADDRESS
.
See https://support.google.com/accounts/answer/185833?hl=en for information on how to generate an App Password.
The contact form is using the nodemailer
package to send a new mail for every submission.
The mail is sent from the Gmail address mentioned in NEXT_PUBLIC_EMAIL_ADDRESS
.
The mail recipient, the subject and the body are configurable in src/config/index.ts.
To start the development server, run:
npm run dev
Then open http://localhost:3000 with your browser.
The easiest way to deploy this project is with Vercel.
Click the button below to start.