Projeto desenvolvido para o desafio do programa Oracle Next Education. O desafio consiste em desenvolver o FrontEnd de um site E-commerce fictício. Para isso, utilizei:
- HTML, CSS e JavaScript,
- operações CRUD com fetch API,
- JSON-server para mockar uma REST API,
- validações de dados de formulários.
🟡 Página inicial (index) com ferramenta de busca para os produtos oferecidos, link para login como admin, banner com informações relevantes do momento, galeria com informações dos produtos (imagem, nome, preço, link para página do produto):
🟡 Página para iniciar sessão (login) e ser redirecionado para o menu administrador:
🟡 Menu administrador, onde pode-se adicionar, editar e remover produtos (CRUD):
🟡 Página do produto individual com todas as suas informações mais a seção de produtos similares:
🟡 Todas as páginas possuem um rodapé com um formúlario para contato e outros links úteis:
🟡 Responsividade para várias resoluções de telas:
Você pode acessar o site clicando aqui, porém por o projeto não ter a parte back-end desenvolvida, as funcionalidades do CRUD não funcionam sem utilizar o JSON Server ou outra forma de imitar uma REST API.
Para a demo do site utilizei o My JSON Server que cria um servidor online e por isso as operações CRUD feitas são falsas e não são mantidas.
Se você quiser checar o site com todas as funcionalidades, siga os passos abaixo:
- Baixe o repositório;
- Utilizando um editor de texto ou de código, altere o valor da constante
DATABASE_URLparahttp://localhost:3000/productsno arquivo product-service.js; - Instale o JSON SERVER (link do repositório e instruções aqui), após a instalação, inicie o servidor na pasta principal do projeto;
- Utilize Live Server, Http Server ou alguma outra ferramenta para hospedar as páginas HTML.