Projeto Spider-Verse

Este é o repositório do projeto Spider-Verse, desenvolvido durante uma live no Youtube em parceria com a DIO. O projeto consiste em uma aplicação interativa inspirada no universo do Homem-Aranha, usando as principais stacks front-end: React, Next.js 13, a biblioteca Framer Motion, Sass e TypeScript para criar um projeto visual incrível e de alta performance.

Demonstracao.do.projeto.webm

💻 Tecnologias utilizadas no projeto

📚 Materiais

Link da live no Youtube
Material de apoio com tutorial completo
Assets (arquivos de imagens e efeitos sonoros)

🌿 Branches

main projeto finalizado com todas as features implementadas durante a live;
template estrutura inicial para que você possa iniciar o projeto, contendo todos os assets, bibliotecas, estrutura de pastas e configurações de ESLint;
live parte do projeto já iniciado para o code-review em live, pronto para implementar as interações e animações do usuário com o projeto.

🎨 Protótipo do projeto

Clique aqui para ir ao protótipo do projeto no Figma.

🗄️ Estrutura de pastas

O projeto está estruturado da seguinte forma:

📁 public
- 📁 icons
- 📁 songs
- 📁 spiders
📁 src
- 📁 app
  - 📁 api
    - 📁 heroes
  - 📁 hero
    - 📁 [id]
- 📁 components
  - 📁 Carousel
  - 📁 HeroDetails
  - 📁 HeroesList
  - 📁 HeroPicture
- 📁 fonts
- 📁 interfaces

📄 Ponto de partida: template para começar do zero

Dentro do repositório do Github do projeto você terá disponível uma branch denominada template, que contém a estrutura inicial para que você possa começar o projeto, contendo todos os assets, bibliotecas, estrutura de pastas e configurações de ESLint;
Basta realizar um fork para sua conta e iniciar o desenvolvimento à partir dela. Se preferir, também pode começar o projeto do total zero, instalando as dependências descritas na sessão “Tecnologias utilizadas no projeto”.

🛠️ Instruções de execução

Siga as instruções abaixo para rodar o projeto em seu ambiente local:

Certifique-se de ter o Node.js instalado em seu computador. Você pode baixar a versão mais recente do Node.js em https://nodejs.org.
Clone este repositório em seu computador ou faça o download do código fonte.
Abra o terminal e navegue até o diretório raiz do projeto.
Instale as dependências do projeto executando o seguinte comando:

  yarn install

Após a conclusão da instalação das dependências, inicie o servidor de desenvolvimento local com o comando:

  yarn dev

O servidor local será iniciado e você poderá acessar o projeto no seu navegador através do seguinte endereço:

  http://localhost:3000

Caso a porta 3000 estiver em uso, automaticamente o Next.js irá subir na próxima porta livre da máquina.

Se deseja alterar a porta padrão na qual a aplicação tentará subir, você pode modificar a porta no arquivo next.config.js.

Agora você está pronto para explorar o projeto em seu ambiente local!

👩‍💻 Autora

Michele Queiroz Ambrosio
Instagram | GitHub | LinkedIn | Twitch

⌨️ com ❤️ por Michele Ambrosio 😊

abdielmesquita/dio-spiderverse