Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/fransilva0/projeto-e-commerce-nextjs
Projeto de construção de um e-commerce usando Next.js
https://github.com/fransilva0/projeto-e-commerce-nextjs
css css3 e-commerce-project javascript json nextjs nodejs react reactjs styled-components styled-jsx vercel website
Last synced: 1 day ago
JSON representation
Projeto de construção de um e-commerce usando Next.js
- Host: GitHub
- URL: https://github.com/fransilva0/projeto-e-commerce-nextjs
- Owner: fransilva0
- License: mit
- Created: 2022-11-22T13:05:39.000Z (about 2 years ago)
- Default Branch: master
- Last Pushed: 2024-12-24T19:35:13.000Z (21 days ago)
- Last Synced: 2024-12-24T20:24:51.335Z (21 days ago)
- Topics: css, css3, e-commerce-project, javascript, json, nextjs, nodejs, react, reactjs, styled-components, styled-jsx, vercel, website
- Language: JavaScript
- Homepage: https://projeto-e-commerce-nextjs.vercel.app/
- Size: 2.17 MB
- Stars: 4
- Watchers: 2
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
Player One - E-commerce
🚧 Player One 🚀 Em construção... 🚧
Sobre |
Funcionalidades |
Tecnologias |
Pré requisitos |
Começando |
Licença |
Autor |
## :dart: Sobre ##
O Projeto Player One veio como um desafio simples do Programa One no qual seria uma tela simples inicial em HTML, CSS e JavaScript. Contudo, decidi seguir com a ideia do projeto e desenvolver mais profundamente o e-commerce, usando tecnologias como React.js, Next.js.
Para estilizar os componentes do projeto optei por começar a aprender e desenvolver conhecimentos no styled-components no qual percebi uma certa facilidade de utilização no projeto. Já a lista de produtos eu utilizei o Json para armazenar os dados de imagem, nome do produto, preço e link para a página do produto que está planejado para ser desenvolvido posteriormente.
Os dados dos produtos no Json foram manipulados usando a função map no arquivo index.js dentro da pasta do componente ProductList, sendo esse componente renderiza todas as listas que estão na tela inicial e são iguais em estilização também. Os ícones presentes nesse projeto foram pegos do site Iconify, sendo todos com licença MIT assim como o projeto.
Para fazer a barra de pesquisa por produtos funcionar eu fiz um filter para a filtragem dos produtos no componente ProductList responsável pelos cards de produtos. Além disso, no componente SearchBar eu precisei cuidar de pegar o valor digitado pelo usuário, esse valor ficava armazenado no index.js que está dentro da pasta de pages de forma global no projeto, para que eu pudesse passar o que foi digitado pelo usuário para onde isso seria necessário, no caso do input da barra de pesquisa para o filter na lista de produtos.
Durante o processo descrito no parágrafo anterior eu utilizei o conceito de Prop drilling, que é um estágio do desenvolvimento que acontece quando precisamos obter dados que estão em várias camadas na árvore de componente react. Já que o useState() foi colocado na página de index.js e precisou descer "perfurando" o componente de Header até chegar no componente SearchBar.
Como próxima etapa realizada eu construí um arquivo de tema e usei Providers para trabalhar a mudança de tema ao clicar em um botão DarkMode. O objetivo foi conhecer o Provider e utilizar ele de forma a praticar com um projeto real sua utilização. Além disso eu utilizei a Vercel para subir o projeto na web, o link se encontra no topo deste arquivo e no menu direito no repositório deste projeto.
Durante a construção do projeto utilizei bastante o useState do React, bem como o useRouter do nextJs. Como avanço no styled-components, eu construí um componente de botão que utiliza a expansão de estilo e a utilização de props para manipulação dos estilos dos diferentes tipos de botão.
## :sparkles: Funcionalidades ##
- [X] Modo escuro na página;
- [ ] Tela de login funcional;
- [X] Barra de pesquisa de produtos funcional;
- [ ] Tela de visualização do produto;
- [ ] Carrinho de compras funcional;
- [ ] Separação de Produtos por categorias;
## :rocket: Tecnologias ##
As seguintes ferramentas foram usadas na construção do projeto:
- [Node.js](https://nodejs.org/en/)
- [React](https://pt-br.reactjs.org/)
- [Styled-Components](https://styled-components.com/)
- [Json](https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/JSON)
## :white_check_mark: Pré requisitos ##
Antes de começar :checkered_flag:, você precisa ter o [Git](https://git-scm.com) e o [Node](https://nodejs.org/en/) instalados em sua maquina.
## :checkered_flag: Começando ##
```bash
# Clone este repositório
$ git clone https://github.com/fransilva0/projeto-e-commerce-nextjs
# Entre na pasta
$ cd projeto-e-commerce-nextjs
# Instale as dependências
$ yarn
# Para iniciar o projeto
$ yarn start
# O app vai inicializar em
```
## :memo: Licença ##
Este projeto está sob licença MIT. Veja o arquivo [LICENSE](LICENSE.md) para mais detalhes.
Feito com :heart: por Francileudo Oliveira