StackX-Academy-Project!!!

( Clique aqui e escolha o Combo de sua preferência: StackX-Academy-Project!!!)

[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 (v1.80.1)

---

Licença

• Esse projeto está sob a licença MIT.

---

Autor

   RafaRz76Dev
   Whatsapp | LinkedIn | GitHub| Tableau| Portfólio