https://github.com/raizertechdev/academia-stackx
Desenvolvi um projeto fundamental para meus estudos e futuros trabalhos chamado "Academia-Stackx". Nesse projeto, os usuários podem interagir selecionando o combo desejado para alcançar seus objetivos fitness! 😅👏 Utilizei as seguintes tecnologias principais: HTML, CSS, JavaScript e React.
https://github.com/raizertechdev/academia-stackx
css3 html5 javascript reactjs
Last synced: 10 months ago
JSON representation
Desenvolvi um projeto fundamental para meus estudos e futuros trabalhos chamado "Academia-Stackx". Nesse projeto, os usuários podem interagir selecionando o combo desejado para alcançar seus objetivos fitness! 😅👏 Utilizei as seguintes tecnologias principais: HTML, CSS, JavaScript e React.
- Host: GitHub
- URL: https://github.com/raizertechdev/academia-stackx
- Owner: RaizerTechDev
- Created: 2024-05-02T13:25:37.000Z (over 1 year ago)
- Default Branch: master
- Last Pushed: 2024-11-08T15:26:14.000Z (about 1 year ago)
- Last Synced: 2025-01-11T08:12:11.867Z (12 months ago)
- Topics: css3, html5, javascript, reactjs
- Language: JavaScript
- Homepage: https://raizertechdev-academyproject.vercel.app/
- Size: 25 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# StackX-Academy-Project!!!
[ ( Clique aqui e escolha o Combo de sua preferência: `StackX-Academy-Project!!!`) ](https://raizertechdev-academyproject.vercel.app/)
[Demonstração-StackX-Academy-Project] 
---
### Objetivo
- O projeto que desenvolvi é uma ferramenta vital para minha trajetória acadêmica e profissional: um Projeto de uma Academia em colaboração com a StackX. Nesta plataforma, os usuários podem interagir através de um menu suspenso para selecionar o Combo com a aula de sua preferência. Empreguei as principais tecnologias, como HTML, CSS, JavaScript e React, para dar vida a este projeto. Esta experiência não apenas solidificou meu domínio nessas áreas, mas também me capacitou para enfrentar com segurança os desafios que estão por vir.
"Implementamos também o uso do Routes para gerenciar as rotas da aplicação, facilitando a navegação entre diferentes páginas e melhorando a estrutura do projeto."
### Passo 1: Configuração do Ambiente de Desenvolvimento
1. Instale o Node.js e npm (gerenciador de pacotes do Node.js) se ainda não estiverem instalados no seu sistema.
2. Crie um novo diretório para o projeto da academia.
No terminal, navegue até o diretório recém-criado e execute o comando
```
npm init -y
```
- Para inicializar um novo projeto npm.
### Passo 2: Instalação de Dependências do React
1. Instale o React e o ReactDOM executando o comando
```
npm install react react-dom
```
2. Instale o Create React App (uma ferramenta para criar rapidamente projetos React) globalmente usando
```
npm install -g create-react-app
```
3. Criamos a aplicação em Reactjs my-app using create-react-app.
```
npm init react-app academia-stackx
```
### Passo 3: Estrutura de Arquivos e Componentes
1. Navegue até o diretório do projeto (`academia-stackx`) e abra-o em um editor de código.
2. Dentro do diretório `src`, você verá os arquivos `App.js`, `index.js` e `App.css`. Você pode modificar ou excluir esses arquivos conforme necessário.
3. Crie componentes React para as diferentes partes da SPA, use sua criatividade para criar
### Passo 4: Estilização
1. Use CSS (ou pré-processadores como Sass ou Less) para estilizar os componentes e criar uma aparência atraente para a SPA.
2. Organize seus estilos em arquivos separados ou diretórios para facilitar a manutenção
### Passo 5: Testando
1. Teste a aplicação no localhost e certifique-se de que tudo está funcionando.
### Passo 6: Implantação
1. Faça o deploy do build para um serviço de hospedagem, como GitHub e Vercel.
### 7. Deployment Build
```
npm run build
```
1. Após, instale o pacote utilizando o comando:
```
npm install -g serve
```
2. Por fim, inicie a construção com o comando:
```
serve -s build
```
### 8. Routes
1. Instale o pacote utilizando o comando para o `router-dom`:
```
npm install react-router-dom@5
```
### 
Agora para interagir com o projeto:
#### Vai rodar o ambiente de execução:
```
npm install
```
```
npm start
```
👉 Abra "http://localhost:3000/" para visualizar o projeto em seu navegador.
---
## Tecnologias
Tecnologias utilizadas no projeto:
- HTML5 (Linguagem de marcação utilizada para a construção das páginas web).
- CSS3 (Mecanismo para adicionar estilos a uma página web).
- JavaScript (Linguagem de programação de alto nível, que pode ser interpretada ou compilada just-in-time (JIT) para execução em um ambiente específico).
- React (Biblioteca JavaScript popular para a construção de interfaces de usuário (UI)).
- Git (Sistema de controle de versões).
- Github (Plataforma para hospedagem de código-fonte).
- Visual Studio Code (Editor de código-fonte).
- Navegador web (Interação com documentos HTML).
---
Ferramenta utilizada no projeto:
- [VsCode](https://code.visualstudio.com/download) (v1.80.1)
---
## Licença
- Esse projeto está sob a licença MIT.
---
Autor
   RafaRz76Dev
   Whatsapp | LinkedIn | GitHub| Tableau| Portfólio