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.
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.Clique aqui para ir ao protótipo do projeto no Figma.
O projeto está estruturado da seguinte forma:
public
icons
songs
spiders
src
app
api
heroes
hero
[id]
components
Carousel
HeroDetails
HeroesList
HeroPicture
fonts
interfaces
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;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
yarn dev
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!
   Michele Queiroz Ambrosio
   Instagram | GitHub | LinkedIn | Twitch
--- ⌨️ com ❤️ por [Michele Ambrosio](https://github.com/micheleambrosio) 😊