Carti Front

Frontend React + TypeScript do Carti Visual Archive.

Este projeto e um site de fa em homenagem ao Playboi Carti. Ele nao e oficial e nao tem ligacao com o artista, gravadora ou equipe. A proposta e criar uma experiencia visual imersiva sobre tres fases esteticas: Magnolia/SoundCloud, Whole Lotta Red e I AM MUSIC.

Frontend: https://github.com/teuzowebdeveloper9/carti-front
Backend: https://github.com/teuzowebdeveloper9/carti-back

Experiencia

O site funciona como uma obra visual interativa:

• index com aura reativa ao mouse;
• scroll por previews de eras;
• colagens animadas com fotos por era;
• header global com letras sincronizadas;
• vinil abrivel/fechavel com capa da musica atual;
• dock social compacto que muda de cor conforme a era;
• pagina detalhada para cada era;
• Spotify codes no fim das paginas de era.

Sistema Visual

Cada era tem uma linguagem propria:

• Magnolia / SoundCloud: rua, arquivo cru, phone flash, concreto, verde acido, trap minimalista.
• Whole Lotta Red: vermelho/preto, vamp, punk, xerox, caos controlado, contraste agressivo.
• I AM MUSIC: preto profundo, chrome, moda escura, misterio, silhueta, tipografia de letreiro.

O favicon e o header usam a ideia de vinil + I AM MUSIC para reforcar a identidade musical sem virar player tradicional.

Arquitetura de Pastas

src/
  app/
    App.tsx
    providers/ActiveEraContext.tsx
    routes/AppRoutes.tsx
  features/
    aura/components/AuraCursor.tsx
    era/
      components/
      data/
      hooks/
    radio/
      components/
      hooks/
    social/components/SocialRail.tsx
  pages/
    Home.tsx
    EraPage.tsx
  shared/
    lib/api.ts
    types/music.ts
  styles/global.css

Guideline:

• app compoe providers, rotas e shell global;
• features concentra comportamento por dominio visual/interativo;
• pages monta telas roteadas;
• shared guarda utilitarios e tipos sem dependencia de UI;
• assets publicos ficam em public.

Assets

public/imagens-carti/        # imagens por era, capas e Spotify codes
public/musics-carti/         # MP3 estaticos usados no deploy
public/favicon.svg           # favicon vinil I AM MUSIC

As musicas ficam no frontend porque a Vercel serve public/ como asset estatico com suporte a Range requests. O backend retorna essas URLs via MUSIC_PUBLIC_BASE_URL.

Env

Local:

VITE_API_URL=http://localhost:3000

Vercel:

VITE_API_URL=https://carti-back.vercel.app

Depois de mudar uma env VITE_, faca redeploy do frontend, porque a env entra no bundle.

Scripts

npm install
npm run dev
npm run typecheck
npm run build

Fluxo com Backend

1. Front chama GET ${VITE_API_URL}/api/musics.
2. Backend retorna letras sincronizadas e audioUrl absoluta.
3. Front toca o MP3 estatico de /musics-carti.
4. useLyricRadio usa audio.currentTime para selecionar a frase ativa.

Se o player nao tocar, teste primeiro:

https://carti-front.vercel.app/musics-carti/Playboi%20Carti%20-%20Magnolia%20%5BoCveByMXd_0%5D.mp3
https://carti-back.vercel.app/api/musics

audioUrl deve vir com https://carti-front.vercel.app/musics-carti/....

Deploy

1. Commit/push no frontend.
2. Vercel gera build.
3. Confirme se /favicon.svg e /musics-carti/...mp3 respondem.
4. Confirme que o backend aponta MUSIC_PUBLIC_BASE_URL para o dominio do front.