Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/richardsanvie/analysisofcork-basednetworking

api axios cors css express html javascript material-ui mysql nodemon react vite

Last synced: 5 days ago
JSON representation

Host: GitHub
URL: https://github.com/richardsanvie/analysisofcork-basednetworking
Owner: richardsanvie
Created: 2023-10-21T13:15:39.000Z (over 1 year ago)
Default Branch: richardBranch
Last Pushed: 2023-11-16T16:23:10.000Z (about 1 year ago)
Last Synced: 2024-12-11T04:09:15.594Z (2 months ago)
Topics: api, axios, cors, css, express, html, javascript, material-ui, mysql, nodemon, react, vite
Language: JavaScript
Homepage: https://analysisofcork-basednetworking.vercel.app
Size: 377 KB
Stars: 1
Watchers: 1
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md

Awesome Lists containing this project

README

# AnalysisofCork-BasedNetworking

![Minha Imagem](https://github.com/richardsanvie/AnalysisofCork-BasedNetworking/blob/richardBranch/client/src/components/ImageProject.png)

## Por quê?
Este projeto faz parte do meu portfólio pessoal, então ficarei feliz se você puder me fornecer qualquer feedback sobre o projeto, código, estrutura ou qualquer coisa que você possa relatar que possa me tornar um desenvolvedor melhor!

- **Email:** [[email protected]](mailto:[email protected])
- **LinkedIn:** [Richard Sanvie](https://www.linkedin.com/in/richardsanvie/)

Além disso, você pode usar este Projeto como quiser, seja para estudar, seja para fazer melhorias ou ganhar dinheiro com ele!

É grátis!

## Instalação
**1. Clonando o Repositório**

```html
git clone https://github.com/richardSanvie/AnalysisofCork-BasedNetworking
```
```html
cd AnalysisofCork-BasedNetworking
```

**2. Configurando o Front-end com React e Vite**

```html
cd client
```
```html
npm install
```
```html
npm run dev
```

Certifique-se de estar na pasta client antes de executar os comandos acima. Isso instalará todas as dependências necessárias e iniciará o servidor de desenvolvimento do React com Vite, que oferece Hot Module Replacement (HMR) para atualizações rápidas de código. Dois plugins oficiais do Vite estão disponíveis para React:
```html
@vitejs/plugin-react usa Babel para Fast Refresh.
```
```html
@vitejs/plugin-react-swc usa SWC para Fast Refresh.
```
**3. Configurando o Back-end**

Em um novo terminal, vá para a pasta server e configure o banco de dados MySQL em server/index.js.

```html
cd ../server
```
```html
npm install
```
```html
npm run dev
```
Certifique-se de estar na pasta server antes de executar os comandos acima. Isso instalará as dependências do servidor e iniciará o servidor Node.js usando nodemon para reinicialização automática durante o desenvolvimento.

**4. Funcionalidades**

O seu projeto deve estar funcionando agora com as seguintes funcionalidades:

Criar, ler, atualizar e excluir jogos no banco de dados.
Clicar em cartões para editar e excluir.

**5. Bibliotecas, frameworks e ferramentas**

Front-end:

- @material-ui: Componentes React com estilo Material Design.
- Axios: Cliente HTTP para fazer requisições AJAX.

Back-end:

- Express.js: Framework web para Node.js.
- MySQL: Sistema de gerenciamento de banco de dados relacional.
- Nodemon: Ferramenta que ajuda a desenvolver aplicativos baseados em node.js, reiniciando automaticamente a aplicação quando mudanças de arquivo no diretório são detectadas.
- CORS: Middleware para habilitar a política de mesma origem em um aplicativo web.
- Lembre-se de configurar corretamente as variáveis de ambiente e as permissões no seu banco de dados MySQL para que o servidor back-end possa se conectar adequadamente.

Com esses passos, você deve ter o seu projeto configurado e funcionando com React e Vite.

Boa sorte com o seu desenvolvimento!