Skip to content

standbytheboy/reactjs

Repository files navigation

Petshop App

Este é um projeto de front-end para um petshop online, desenvolvido com React e Vite. A aplicação apresenta uma interface de usuário para navegar por produtos e categorias, com um design limpo e moderno.

📜 Funcionalidades

  • Navegação intuitiva: Uma barra de navegação com links para as seções de Início, Comprar, Sobre Nós e Contato.
  • Busca de produtos: Uma barra de pesquisa funcional na navegação para encontrar produtos facilmente.
  • Carrossel de categorias: Um carrossel interativo que exibe diferentes categorias de produtos, como "Acessórios" e "Comida".
  • Cards de categoria: Componentes visuais para cada categoria, mostrando uma imagem, o título e a contagem de produtos.
  • Cards de animais: Cards para exibir os animais.
  • Design responsivo: O layout foi construído para se adaptar a diferentes tamanhos de tela (em desenvolvimento).

🛠️ Tecnologias Utilizadas

  • React: Biblioteca para construir a interface de usuário.
  • Vite: Ferramenta de build para um desenvolvimento mais rápido e eficiente.
  • Akar Icons: Biblioteca de ícones SVG para React.
  • ESLint: Ferramenta para identificar e reportar padrões no JavaScript, garantindo a qualidade do código.

🚀 Como Executar o Projeto

Siga os passos abaixo para rodar o projeto em seu ambiente de desenvolvimento.

Pré-requisitos:

  • Node.js (versão 18.x ou superior)
  • npm ou Yarn

Instalação:

  1. Clone este repositório:
    git clone <URL_DO_REPOSITORIO>
  2. Navegue até o diretório do projeto:
    cd petshop-app
  3. Instale as dependências:
    npm install

Execução:

  1. Para iniciar o servidor de desenvolvimento, execute:
    npm run dev
  2. Abra seu navegador e acesse http://localhost:5173 para ver a aplicação.

⚙️ Scripts Disponíveis

No arquivo package.json, você encontrará os seguintes scripts:

  • npm run dev: Inicia o servidor de desenvolvimento com Vite.
  • npm run build: Gera a versão de produção da aplicação.
  • npm run lint: Executa o ESLint para analisar o código.
  • npm run preview: Inicia um servidor local para visualizar a versão de produção.

About

No description or website provided.

Topics

Resources

Stars

Watchers

Forks