Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/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.
https://github.com/kfirfitousi/arous-style
contentful nextjs react react-hook-form react-query tailwindcss typescript zod
Last synced: 22 days ago
JSON representation
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.
- Host: GitHub
- URL: https://github.com/kfirfitousi/arous-style
- Owner: kfirfitousi
- Created: 2022-08-31T09:07:32.000Z (over 2 years ago)
- Default Branch: master
- Last Pushed: 2022-09-14T16:38:48.000Z (over 2 years ago)
- Last Synced: 2024-12-10T19:52:47.736Z (about 2 months ago)
- Topics: contentful, nextjs, react, react-hook-form, react-query, tailwindcss, typescript, zod
- Language: TypeScript
- Homepage: https://arous-style.vercel.app
- Size: 1.14 MB
- Stars: 2
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 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](src/config/index.ts).
# Development
To start the development server, run:
```bash
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.
[](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fkfirfitousi%2Farous-style&env=NEXT_PUBLIC_CONTENTFUL_SPACE_ID,NEXT_PUBLIC_CONTENTFUL_ACCESS_TOKEN,NEXT_PUBLIC_EMAIL_ADDRESS,NEXT_PUBLIC_PASSWORD&envDescription=Contentful%20and%20Nodemailer%20configuration&envLink=https%3A%2F%2Fgithub.com%2Fkfirfitousi%2Farous-style%2Fblob%2Fmaster%2FREADME.md&project-name=arous-style&repo-name=arous-style)