{"id":19817634,"url":"https://github.com/raizertechdev/academia-stackx","last_synced_at":"2025-02-28T15:23:39.906Z","repository":{"id":237831983,"uuid":"795043584","full_name":"RaizerTechDev/academia-stackx","owner":"RaizerTechDev","description":"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.","archived":false,"fork":false,"pushed_at":"2024-11-08T15:26:14.000Z","size":26214,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-01-11T08:12:11.867Z","etag":null,"topics":["css3","html5","javascript","reactjs"],"latest_commit_sha":null,"homepage":"https://raizertechdev-academyproject.vercel.app/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/RaizerTechDev.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-05-02T13:25:37.000Z","updated_at":"2024-11-08T15:26:17.000Z","dependencies_parsed_at":"2024-05-20T23:23:16.705Z","dependency_job_id":"fc5a16d7-5d74-4173-b5ff-c20f022074db","html_url":"https://github.com/RaizerTechDev/academia-stackx","commit_stats":null,"previous_names":["rafarz76dev/academia-stackx","raizertechdev/academia-stackx"],"tags_count":0,"template":true,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RaizerTechDev%2Facademia-stackx","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RaizerTechDev%2Facademia-stackx/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RaizerTechDev%2Facademia-stackx/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RaizerTechDev%2Facademia-stackx/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/RaizerTechDev","download_url":"https://codeload.github.com/RaizerTechDev/academia-stackx/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":241173918,"owners_count":19922205,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css3","html5","javascript","reactjs"],"created_at":"2024-11-12T10:13:12.266Z","updated_at":"2025-02-28T15:23:39.881Z","avatar_url":"https://github.com/RaizerTechDev.png","language":"JavaScript","readme":"# StackX-Academy-Project!!!\n\n\u003cbr\u003e\n\n\u003cdiv align=\"center\"\u003e\n\u003cimg src=\"https://media.giphy.com/media/9TFBxN300KpCUI6sBD/giphy.gif\" align=\"center\" height=\"45\" width=\"45\"\u003e\n\n[ ( Clique aqui e escolha o Combo de sua preferência: `StackX-Academy-Project!!!`) ](https://raizertechdev-academyproject.vercel.app/)\n\n\u003cbr\u003e\n\n\u003cdiv align=\"center\"\u003e\n  \n\u003cimg src= \"https://media.giphy.com/media/3zSF3Gnr7cxMbi6WoP/giphy.gif\" align=\"center\" height=\"55\" width=\"55\"\u003e [Demonstração-StackX-Academy-Project] \u003cimg src= \"https://media.giphy.com/media/E5DzZsofmgxc9wjbhX/giphy.gif\" align=\"center\" height=\"35\" width=\"35\"\u003e\n\n\u003cimg height=\"480em\" src=\"./src/img/readme-stackx-academia.gif\"  align=\"center\"\u003e\n\n---\n\n\u003cdiv align=\"left\"\u003e\n\n### Objetivo\n\n- 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.\n  \"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.\"\n\n### Passo 1: Configuração do Ambiente de Desenvolvimento\n\n1. Instale o Node.js e npm (gerenciador de pacotes do Node.js) se ainda não estiverem instalados no seu sistema.\n2. Crie um novo diretório para o projeto da academia.\n   No terminal, navegue até o diretório recém-criado e execute o comando\n\n```\nnpm init -y\n```\n\n- Para inicializar um novo projeto npm.\n\n### Passo 2: Instalação de Dependências do React\n\n1. Instale o React e o ReactDOM executando o comando\n\n```\nnpm install react react-dom\n```\n\n2. Instale o Create React App (uma ferramenta para criar rapidamente projetos React) globalmente usando\n\n```\nnpm install -g create-react-app\n```\n\n3. Criamos a aplicação em Reactjs my-app using create-react-app.\n\n```\nnpm init react-app academia-stackx\n```\n\n### Passo 3: Estrutura de Arquivos e Componentes\n\n1. Navegue até o diretório do projeto (`academia-stackx`) e abra-o em um editor de código.\n\n2. 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.\n\n3. Crie componentes React para as diferentes partes da SPA, use sua criatividade para criar\n\n### Passo 4: Estilização\n\n1. Use CSS (ou pré-processadores como Sass ou Less) para estilizar os componentes e criar uma aparência atraente para a SPA.\n\n2. Organize seus estilos em arquivos separados ou diretórios para facilitar a manutenção\n\n### Passo 5: Testando\n\n1. Teste a aplicação no localhost e certifique-se de que tudo está funcionando.\n\n### Passo 6: Implantação\n\n1. Faça o deploy do build para um serviço de hospedagem, como GitHub e Vercel.\n\n### 7. Deployment Build\n\n```\nnpm run build\n```\n\n1. Após, instale o pacote utilizando o comando:\n\n```\nnpm install -g serve\n```\n\n2. Por fim, inicie a construção com o comando:\n\n```\nserve -s build\n```\n\n### 8. Routes\n\n1. Instale o pacote utilizando o comando para o `router-dom`:\n\n```\nnpm install react-router-dom@5\n```\n\n### \u003cimg src=\"https://media.giphy.com/media/OMrq9FmUgObwogeL06/giphy.gif\" align=\"center\" height=\"35\" width=\"45\"\u003e Agora para interagir com o projeto:\n\n#### Vai rodar o ambiente de execução:\n\n```\nnpm install\n```\n\n```\nnpm start\n```\n\n👉 Abra \"http://localhost:3000/\" para visualizar o projeto em seu navegador.\n\n---\n\n## Tecnologias\n\n\u003cimg src=\"https://media.giphy.com/media/iT138SodaACo9LImgi/giphy.gif\" align=\"center\" height=\"75\" width=\"75\"\u003e Tecnologias utilizadas no projeto:\n\n- HTML5 (Linguagem de marcação utilizada para a construção das páginas web).\n\n- CSS3 (Mecanismo para adicionar estilos a uma página web).\n\n- 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).\n\n- React (Biblioteca JavaScript popular para a construção de interfaces de usuário (UI)).\n\n- Git (Sistema de controle de versões).\n\n- Github (Plataforma para hospedagem de código-fonte).\n\n- Visual Studio Code (Editor de código-fonte).\n\n- Navegador web (Interação com documentos HTML).\n\n---\n\n\u003cimg src=\"https://media.giphy.com/media/SS8CV2rQdlYNLtBCiF/giphy.gif\" align=\"center\" height=\"35\" width=\"45\"\u003e Ferramenta utilizada no projeto:\n\n- [VsCode](https://code.visualstudio.com/download) (v1.80.1)\n\n---\n\n## Licença\n\n- Esse projeto está sob a licença MIT.\n\n---\n\n\u003cimg src=\"https://media.giphy.com/media/ImmvDZ2c9xPR8gDvHV/giphy.gif\" align=\"center\" height=\"25\" width=\"25\"\u003e Autor\n\n\u003cp\u003e\n    \u003cimg align=left margin=10 width=80 src=\"https://avatars.githubusercontent.com/u/87991807?v=4\"/\u003e\n    \u003cp\u003e\u0026nbsp\u0026nbsp\u0026nbspRafaRz76Dev\u003cbr\u003e\n    \u0026nbsp\u0026nbsp\u0026nbsp\u003ca href=\"https://api.whatsapp.com/send/?phone=47999327137\"\u003eWhatsapp\u003c/a\u003e\u0026nbsp;|\u0026nbsp;\u003ca href=\"https://www.linkedin.com/in/rafael-raizer//\"\u003eLinkedIn\u003c/a\u003e\u0026nbsp;|\u0026nbsp;\u003ca href=\"https://github.com/RaizerTechDev\"\u003eGitHub\u003c/a\u003e|\u0026nbsp;\u003ca href=\"https://public.tableau.com/app/profile/rafael.raizer\"\u003eTableau\u003c/a\u003e|\u0026nbsp;\u003ca href=\"https://raizertechdev-portfolio.netlify.app/\"\u003ePortfólio\u003c/a\u003e\u0026nbsp;\u003c/p\u003e\n\u003c/p\u003e\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fraizertechdev%2Facademia-stackx","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fraizertechdev%2Facademia-stackx","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fraizertechdev%2Facademia-stackx/lists"}