https://github.com/guicamargo19/github_profiles
Projeto em ReactJS e Vite
https://github.com/guicamargo19/github_profiles
bem-methodology css-modules css3 eslint html5 npm reactjs vite vscode
Last synced: about 1 month ago
JSON representation
Projeto em ReactJS e Vite
- Host: GitHub
- URL: https://github.com/guicamargo19/github_profiles
- Owner: guicamargo19
- License: mit
- Created: 2024-01-11T21:29:44.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-04-29T15:14:36.000Z (about 1 year ago)
- Last Synced: 2025-02-15T04:18:56.614Z (3 months ago)
- Topics: bem-methodology, css-modules, css3, eslint, html5, npm, reactjs, vite, vscode
- Language: JavaScript
- Homepage: https://github-profile-pi-six.vercel.app
- Size: 560 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# GitHub Profiles
## Apresentação do projeto
https://github.com/guicamargo19/github_profile/assets/133445061/2c3682ec-ad97-4c87-9eb7-b21ec6735fa5
Projeto desenvolvido em **ReactJS** e estilização com **CSS Modules**, e permite digitar o usuário do github que deseja
ver o profile. A página traz o avatar e o nome do usuário requerido, assim como o todo o portfólio público, oferencendo
a possibilidade de entrar no repositório desejado pelo link "Visitar no GitHub".
Neste projeto foi aplicado a **Metodologia BEM** para boas práticas de programação, facilitando a interpretação do código e
manutenção por outros desenvolvedores.
Projeto desenvolvido no curso de Full Stack Python da EBAC - Escola Britânica de Artes Criativas e Tecnologia.
## 🚀 Começando
Estas instruções permitirão que você obtenha uma cópia do projeto em execução em sua máquina local para fins de desenvolvimento e teste.
## IDE Setup recomendado
[VSCode](https://code.visualstudio.com/) +
[Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur)
## Configuração customizada
Veja [Vite Configuration Reference](https://vitejs.dev/config/).
### Instalação
Siga estas etapas a seguir para configurar o ambiente de desenvolvimento:
1. Clone este repositório em sua máquina local.
2. Navegue até o diretório clonado.
3. Execute o seguinte comando para instalar as dependências:
**``npm install``**
### Executar o projeto
No arquivo package.json, em scripts, é possível designar os comandos desejados para execução do projeto em ambiente de
desenvolvimento e produção.
"scripts": {
"dev": "vite",
"build": "vite build",
"lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
"preview": "vite preview"
},
Para ambiente de desenvolvimento, utilizamos o comando dev, que foi configurado com o watch para captar as alterações
nos arquivos enquanto codamos:
**``npm run dev``**
A aplicação deverá rodar em [http://localhost:5173/](http://localhost:5173/)
Para ambiente de produção, utilizamos o comando:
**``npm run build``**
A pasta "dist" é criada com os arquivos para produção.
## 🛠️ Ferramentas utilizadas para construção do projeto
* **ReactJS** - Biblioteca front-end JavaScript de código aberto com foco em criar interfaces de usuário em páginas web.
* **ESLint** - Linter, uma ferramenta de análise estática, para as linguagens Javascript e Typescript, sendo o mais popular do mundo para tais linguagens.
* **HTML** - Linguagem de marcação utilizada na construção de páginas na Web.
* **CSS Modules** - São arquivos CSS em que os classNames e animações são definidos localmente e não globalmente.
* **Metodologia BEM** - Block Element Modifier, é uma forma de organizar o código CSS para solucionar problemas frequentes no desenvolvimento web.
* **NPM** - Gerenciador de pacotes padrão para o ambiente de tempo de execução JavaScript Node.JS.
* **Vite** - Servidor de desenvolvimento local usado por padrão pelo Vue e para modelos de projeto React.
## ✒️ Autor
Guilherme Ferreira Camargo