Trascrição do meu projeto (E-commerceGames), feito em PHP, para React.

Overview

E-commerceGames-React

Sumário

💬 Sobre

Este projeto é uma tradução do meu projeto (E-commerceGames), feito em PHP, para React. Ele foi criado com o intuito de melhorar meus conhecimentos com esta biblioteca e também para resolver algumas limitações encontradas anteriormente. Como esta é uma tradução, o design e alguns recursos como o cadastro e login de usuários, utilizados no projeto antigo, foram mantidos para que a experiência do usuário (UX) seja a mesma, mesmo com essa mudança de técnologias para produção do produto.

👨‍💻 Técnologias utilizadas

Front-End

  • Estutura da página: HTML, CSS, JavaScript, React, React-DOM;
  • Rotas (com animação ou não): react-router-dom, react-router-hash-link;
  • Passagem de parâmetros entre documentos: props (React).

Back-End

  • Gerenciamento de pacotes e bibliotecas: Nodejs;
  • Construção e acesso ao banco de dados (Troca de informações): MongoDB, mongoose, json e API REST;
  • Tratamento e leitura de URL: express, body-parser;
  • Atualização do servidor local em tempo-real: nodemon;
  • Encriptação de conteúdos importantes: bcrypt;
  • Tratamento dinâmico de rotas: fs, path.

Ferramentas de produção

  • Gerenciamento de API's: Insomnia;
  • Editor de texto: VisualStudioCode;
  • Banco de dados: MongoDB;
  • Comandos do sistema(cmd): PowerShell e cmder.

🧩 Pré-requisitos para rodar a aplicação

Tenha certeza de que seu dispositivo tem o Node.js instalado, senão instale-o no link:

🚀 Rodando a Aplicação

Para rodar a aplicação basta realizar o download, extrair o arquivo com alguma ferramenta de descompactação de arquivos (recomendado: WinRAR) e acessar a pasta 'www', localizada dentro da pasta raiz do projeto, através de um prompt de comando (recomendado: PowerShell):

cd -path "c:\..\downloads\E-commerceGames-React-main\www"

Em seguida, executar o comando:

npm install

Quando o download finalizar, basta rodar a aplicação com o comando:

npm start

Tudo pronto! O projeto já estará rodando na porta 3000 de seu dispositivo, agora é só aproveitar e vizualizar todos os recursos presentes nele.

🖼 Galeria Front-End

Página inicial

Galeria 1

Loja

Galeria 2

Galeria Back-End

Requisição de todos os produtos

Backend 1

Requisição para adicionar um novo produto

Backend 2

Requisição para cadastro de um usuário

Backend 3

Requisição para login de um usuário

Backend 4

Banco de Dados (Mongo DB - Interface)

Backend 5

📃 Notas

Se não for de seu interesse realizar algum download externo, basta esperar até a disponibilização do projeto completo que será feita em uma data posterior.

Projeto feito exclusivamente para estudos, ou seja, sem visar nenhuma forma de lucro.

Projeto realizado com a ajuda de Robert da Silva Gomes (GitHub: RobertSGomes).

Projeto em desenvolvimento, atualizações serão feitas com o passar do tempo.

Front-end e Back-end funcionando separadamente por enquanto.

Owner
Roger da SIlva Gomes
Desenvolvedor Front-End formado em TI pela ETEC Atibaia, visando sempre melhorar meus conhecimentos.
Roger da SIlva Gomes
Esse projeto é uma aplicação que exibe os dados climáticos da região do usuário e de cidades escolhidas. Feito com React Native, typescript e outras tecnologias.

Weather APP Esse projeto é uma aplicação que exibe os dados climáticos da região do usuário e de cidades escolhidas. Features • Pré Requisitos • Rodan

Arthur Pimentel Cordeiro 10 Nov 21, 2021
Primeiro projeto de e-commerce feito na Labenu. A proposta era criar um site de e-Commerce com os recursos React.js.

Primeiro projeto de e-commerce feito na Labenu. A proposta era criar um site de e-Commerce com os recursos React.js.

Joana 5 Nov 28, 2021
Projeto desenvolvido para consolidar os conhecimentos de React e Typescript

Gerenciador de Finanças Projeto desenvolvido para consolidar os conhecimentos de React e Typescript. ?? Descrição Gerenciador de finanças utilizando R

Claudia dos Anjos 4 Nov 26, 2021
clone da netflix feito com react js e dados vindo da api do themoviedb

bem vindo :) link do projeto passo a passo para rodar no seu dispositivo baixar o node https://nodejs.org/en/ baixar o git https://git-scm.com/ clonar

matheus souza 25 Nov 21, 2021
Clone da Netflix feito em React.js

Para esse projeto eu utilizei as linguagens de programação HTML, CSS e JavaScript, utilizando o framework React.js pela primeira vez, a IDE que eu fre

null 2 Oct 28, 2021
Clone da Netflix, feito em React.js.

Netflix Clone Clone da homepage da Netflix utilizando React JS Tecnologias Esta aplicação foi desenvolvida em React.js, onde a aplicação consome a API

Beatriz Francisconi 9 Nov 18, 2021
todo list feito com reactj⚛⚛

todo.list ?? Novidades Foi criada uma página home simples, com a animação igual ao site da vercel No componente Profile foi adicionada a função de log

Ronald Tomaz 6 Oct 3, 2021
Projeto desenvolvido junto com os alunos do curso DEVInHouse - S11A05. React, Material UI, consumo de API.

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: ya

Michael Nascimento 2 Nov 7, 2021
Projeto final do Modulo 1(Front-end - React) do curso DevInHouse - Turma Teltec e Bry

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

Adriano Sobral 1 Nov 21, 2021
Projeto #02 - Ignite ReactJS (Rocketseat)

O projeto foi baseado no 4º módulo da trilha ReactJS do Ignite. Além do que foi construído na aula, foi criado um banco de dados com o Prisma, um CRUD de usuários e um sistema de autenticação baseado na aula de autenticação e autorização.

Matheus Landuci 5 Sep 12, 2021
Aplicación para Testear la api de Stripe en React

Aplicación de Stripe Aplicación para realizar pruebas de funcionamiento de Stripe con Tarjetas de Crédito y Débito y procesar pagos de usando un backe

Carlos Santander 5 Sep 13, 2021
todoList ✔️ Lista de Tarefas feita em React para treinar alguns conhecimentos importantes.

todoList ✔️ Lista de Tarefas feita em React para treinar alguns conhecimentos importantes. ❤️ Para executar, basta clonar o repositório e digitar no t

Izabella Ribeiro de Souza Silva 4 Oct 12, 2021
Aplicativo web construído com React para consumir API do Github.

Explorador de repositórios do github ?? Tecnologias TypeScript React SASS Empiricus CSS ??️ Como executar o projeto Pré-requisitos: Node.js Git # Clon

Samuel Ramos 2 Oct 12, 2021
Desenvolvimento de uma aplicação em React Native, com um intuito de um e-commerce para venda de frutas, com geração e compartilhamento de PDF.

FRUTCOM ?? Projeto Frutcom Desenvolvimento de uma aplicação em React Native, com um intuito de um e-commerce para venda de cinco tipos de frutas: Maçã

Luis Gustavo Fin 4 Oct 31, 2021
Desenvolvendo em React js, uma Pokédex para Pokémons da COMPETI.

Criando uma Pokédex para meu teste da COMPETI! Projeto desenvolvido para processo seletivo da empresa Competi, cujo objetivo é fazer consumo da API (h

LEANDRO SIMONATO DE OLIVEIRA 0 Nov 1, 2021
Front-end em React JS para consumir a PokéApi v2

EM DESENVOLVIMENTO! ??‍?? Pokemon API Sobre Requisitos Como Rodar o Projeto? Resultados de Desenvolvimento Referências Sobre A ideia central desse pro

Eirene Fireman 2 Nov 22, 2021
Proyecto en ReactJS respaldado con Firebase de una cafetería con módulos para registro, gestión y eliminación de Productos, Ventas y Usuarios.

excelsa-merienda-front >>> Bienvenido :) Descripción Proyecto en ReactJS respaldado con Firebase de una cafetería; con módulos para registro, gestión

Andrés Roca P. 3 Oct 29, 2021
App que visa fazer requisição para a API de repositórios do GitHub

Nessa aula foi desenvolvido uma página que faz requisição para a API de repositórios do GitHub e alimenta nossa lista de repositórios na página. *Para

Mauro Gonçalves Manuel 2 Oct 31, 2021
O dt-money é um aplicativo simples para controle financeiro, desenvolvido durante o Ignite da Rocketseat.

dt-finance Sobre o projeto O dt-money é um aplicativo simples para controle financeiro, desenvolvido durante o Ignite da Rocketseat. Formulario: Trans

Bruno Mateus 1 Nov 29, 2021