kfirfitousi / arous-style

Online Catalog for Arous Elbahar's Second-Hand Store. Built with React, Next.js, TypeScript, React Query, React Hook Form, zod, TailwindCSS and Contentful CMS.

Arous Style

Online catalog for Arous Elbahar's second-hand store.

• Built with React, Next.js and TypeScript
• Managing state with React Query
• Handling forms and validation with React Hook Form and zod
• Managing content with Contentful CMS
• Styling with TailwindCSS
• Deployed with Vercel

Configuration

Contentful CMS

The products are managed in the Contentful CMS dashboard (https://app.contentful.com).

Locales

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.

Content Model

Under Content model, click on Add content type and create a new content model Product.
It should contain the following fields:

1. Title
   • Short text
   • Enable localization on this field and set as required
2. Price
   • Integer
   • Set as required
3. Pictures
   • Media, many files
   • Set as required

Product Categories

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.

Environment Variables

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.

Contact Form

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.

Development

To start the development server, run:

npm run dev

Then open http://localhost:3000 with your browser.

Deployment

The easiest way to deploy this project is with Vercel.
Click the button below to start.