https://github.com/severidade/barro_store
Loja de vasos e plantas
https://github.com/severidade/barro_store
css3 html5 react typescript
Last synced: 2 months ago
JSON representation
Loja de vasos e plantas
- Host: GitHub
- URL: https://github.com/severidade/barro_store
- Owner: severidade
- Created: 2024-04-02T11:27:28.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2025-09-12T12:18:19.000Z (10 months ago)
- Last Synced: 2025-09-12T13:31:10.804Z (10 months ago)
- Topics: css3, html5, react, typescript
- Language: TypeScript
- Homepage: https://barro.severidade.com.br/
- Size: 1.86 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Criando uma Loja Usando o Sanity.io
### Confguração do Sanity CMS
Instalação e Inicialização
- [ ] Verificar o Login
Verifique se você está logado no Sanity CLI executando o comando
```bash
sanity login
```
- [ ] Instalar o Sanity CLI
Para instalar o Sanity CLI globalmente, execute o seguinte comando
```bash
sudo npm install -g @sanity/cli
```
- [ ] Inicializar o Projeto Sanity
Crie um novo projeto Sanity executando
```bash
npm create sanity@latest
```
- [ ] Acessar a pasta do Projeto e Iniciar o Servidor
Entre na pasta recém-criada do projeto Sanity e abra o terminal. Em seguida, inicie o servidor executando
```bash
npx sanity dev
```
- [ ] Acesso ao CMS:
Após iniciar o servidor, o CMS estará acessível em http://localhost:3333/.
Configuração da Conexão Local com o Banco de Dados Sanity
- [ ] Criação do Arquivo de Configuração
Dentro da pasta src, crie um arquivo chamado client.js. Este arquivo será responsável por configurar a conexão com o banco de dados Sanity.
- [ ] Configuração da Conexão Sanity:
No arquivo client.js, importe o módulo sanityClient do pacote @sanity/client e exporte uma instância do cliente Sanity com as configurações apropriadas. Isso inclui o projectId e dataset, que podem ser encontrados no arquivo sanity.cli.js. Certifique-se de definir useCdn como true se desejar buscar no cache do edge e especifique a apiVersion como a data atual (YYYY-MM-DD) para segmentar a versão mais recente da API.
```bash
import { sanityClient } from '@sanity/client';
export default sanityClient({
projectId: 'SEU_PROJECT_ID',
dataset: 'SEU_DATASET',
useCdn: true,
apiVersion: 'YYYY-MM-DD',
});
```
Substitua 'SEU_PROJECT_ID' e 'SEU_DATASET' pelos valores apropriados encontrados em sanity.cli.js.
- [ ] Instalação da Dependência
Na raiz do seu projeto, instale a dependência @sanity/client executando o seguinte comando no terminal:
```bash
npm install @sanity/client
```
Outras dependências
- [ ] Leitura do Corpo dos Posts
Instalação da Dependência ```@sanity/block-content-to-react```:
```bash
npm install @sanity/block-content-to-react
```
- [ ] Importação de Imagens
Instalação da Dependência ```@sanity/image-url```:
```bash
npm install @sanity/image-url
```
Deploy do Banco de Dados Local no Sanity Studio
- [ ] Leitura do Corpo dos Posts
Dentro da pasta do seu projeto Sanity (onde está localizado o Sanity Studio), execute o seguinte comando no terminal. Será solicitado um nome e poderá ser usado um que faça sentido pra a aplicação
```bash
sanity deploy
```
Esse comando inicia o processo de implantação, que sincroniza o banco de dados local com o projeto na nuvem, garantindo que quaisquer alterações feitas localmente sejam refletidas no ambiente de produção.
Com esta etapa, seu banco de dados local será sincronizado com o projeto na nuvem, permitindo que você faça alterações no ambiente de desenvolvimento e as publique quando estiver pronto.
### Estado Glogal com Redux
Para gerenciar a lista de produtos favoritados e os itens adicionados ao carrinho de compras optei pelo uso do Redux. O Redux proporciona uma forma previsível de atualizar e acessar o estado da aplicação, garantindo que componentes em diferentes partes da árvore de componentes possam interagir de maneira eficiente e sem a necessidade de prop drilling.
### Dependências
- mobile-detect Biblioteca javascript que permite identificar o dispositivo.
- Redux.