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 git@github.com: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.
- Faça um fork do projeto.
- Crie uma nova branch com as suas alterações:
git checkout -b my-feature - Salve as alterações e crie uma mensagem de commit contando o que você fez:
git commit -m "feature: My new feature" - Envie as suas alterações:
git push origin my-feature
Este projeto está sobe a licença MIT.