eduhaag / meteora-modas Goto Github PK

A Meteora Modas é uma empresa fictícia do ramo do comércio eletrônico de roupas atemporais, casuais e sem gênero. O projeto consiste em uma página de e-commerce desenvolvida com o intuito de estudo do React.Js.

Projeto desenvolvido durante a Challenge Front-end oferecida pela Alura. A Challenge Front-end é um evento que coloca seus participantes no papel de um Dev durante três semanas, recebendo as tasks semanalmente por meio de um board no Trello, onde o participante tem autonomia e flexibilidade para criar utilizando suas ferramentas e tecnologias preferidas.

• Possuir um cabeçalho com uma barra de navegação para demais páginas do site;
• Permitir a busca de produtos que contenham o texto no titulo ou na descrição;
• Permitir a exibição de um carrosel com banners promocionais;
• Permitir a listagem dos produtos da loja;
• Permitir filtrar os produtos por categoria;
• Ao selecionar o produto, exibir detalhes e opções do mesmo em um modal;
• O projeto deve ser responsivo para ser exibido em desktop, tablet e mobile.

O layout da aplicação está disponível no figma:

Para executar o projeto, você vai precisar ter instalado em sua máquina as seguintes ferramentas: Git, Node.js. Além disto é bom ter um editor para trabalhar com o código como VSCode.

# Clone o repositório
$ git clone [email protected]:eduhaag/meteora-modas.git

# Acesse a página do projeto
$ cd meteora-modas

# Instale as dependências
$ npm install

# Rode o backend
$ npx json-server db.json

# Rode o projeto
$ npm run dev

# O servidor front-end será inicializado na porta padrão 5173). Acesso http://localhost:5173. 
# Caso a porta já esteja sendo usada, será informado a porta utilizada na saida do terminal.

• React;
• Typescript;
• Vite - Para agilizar o processo de criação e configuração do projeto;
• Axios - Realiza a comunicação com o backend por meio de requisições HTTP;
• react-router-dom - Conduz o roteamento das páginas dentro da SPA;
• react-modal - Traz uma forma fácil de trabalhar e personalizar modais;
• react-responsive-carousel - Componente de carrossel poderoso, leve e totalmente personalizável para aplicativos React;
• Stylef Components - Possibilita escrever códigos CSS dentro do JavaScript;
• Json-server - Cria um servidor back-end a partir de um arquivo JSON.

Veja o arquivo package.json

Utilitários

• Protótipo: Figma;
• Editor: Visual Studio Code;
• Fontes: Inter.

1. Faça um fork do projeto.
2. Crie uma nova branch com as suas alterações: git checkout -b my-feature
3. Salve as alterações e crie uma mensagem de commit contando o que você fez: git commit -m "feature: My new feature"
4. Envie as suas alterações: git push origin my-feature

Este projeto está sobe a licença MIT.