🎶 queirozz.fm - A Spotify Adaptation

🔗 Site: https://queirozz-fm.vercel.app

🇺🇸 English: A Spotify adaption made entirely by me from scratch.

🎯 The goal was to practice and learn new technical skills during the building of this project.

⚛ Was made using React.js with TypeScript on Vite, Tailwind CSS with Lucide-React and HTML.

I just looked at the original Spotify's functionalities and re-created them in this Website.

🚀 Features:

• Player: Plays music using both keyboard shortcuts (spacebar) and interactive buttons;
• Full music control through the player scroll bar;
• Other player functionalities: Automatically repeat the song when it ends using the repeat button; or restart the song from the beginning using the rewind button;
• Sidebar: Item filtering using both filter buttons and text input, which can be combined;
• Full volume control through the bar, with the ability to mute or restore to 50% when the button is clicked;
• Main section with various songs and artists, with horizontally scrollable sections to view more items;
• Fullscreen button;
• Responsive to various screen sizes (except mobile, since it's a web application);
• Animations and different color styles on buttons and other elements;
• More advanced buttons with interactive menus;
• Clear all buttons on input fields.

Detail: Because it's a web application, of course it doesn't have mobile support. For that, a mobile app should be created, with the full adapted layout.

###

🇧🇷 PT-BR: Uma adaptação do Spotify feito interamente por mim e do zero.

🎯 O objetivo era praticar e aprender novas habilidades técnicas durante a construção desse projeto.

⚛ Foi feito usando React.js com TypeScript no Vite, Tailwind CSS com Lucide-React e HTML.

Eu só olhei as funcionalidades que o Spotify original possui e recriei elas nesse Website.

🚀 Funcionalidades:

• Player: Toca música tanto com atalho do teclado (barra de espaço) quanto com os botões interativos;
• Controle total da música por meio da barra de scroll do player;
• Outras funcionalidades do player: Repetir a música automaticamente quando ela acabar com o botão de repetição; ou voltar a música do zero com o botão de retroceder;
• Barra lateral: Filtragem dos itens por botões de filtro e por texto, podendo ser combinados;
• Controle total de volume pela barra, podendo ficar no mudo ou voltar a 50% quando o botão é clicado;
• Main com diversas músicas e artistas, com seções podendo ser scroladas horizontalmente para visualizar mais itens;
• Botão de fullscreen;
• Responsividade a diversos tamanhos de tela (menos celulares, por ser uma aplicação web);
• Animações e colorações diferentes nos botões e tudo mais;
• Botões mais avançados, com menus interativos;
• Botões de apagar tudo nos inputs.

Detalhe: Por ser uma aplicação web, é claro que o suporte para celulares não foi feito. Para isso, existiria um aplicativo mobile, com todo o layout adaptado.

###

🇺🇸 DOCUMENTATION FOR LOCAL INSTALLATION

1. First, do a git clone of this project:

git clone https://github.com/queirozz8/queirozz.fm.git

2. Go to the directory of the project:

cd queirozz.fm/

3.1. If you don't have pnpm installed, install it:

npm install -g pnpm@latest-10

3.2. Run this command to install all the dependencies (React, TypeScript, Vite, Tailwind CSS, Lucide-React, etc.):

pnpm install

4. Run the build script:

pnpm run build

5. Run the preview script:

pnpm run preview

6. Go to your browser and paste this URL:

http://localhost:3000

That's it! This project was made by Rick with ☕ and 💻.

🇧🇷 DOCUMENTAÇÃO PARA INSTALAÇÃO LOCAL

1. Primeiro, faça um git clone desse projeto:

git clone https://github.com/queirozz8/queirozz.fm.git

2. Vá para o diretório do projeto:

cd queirozz.fm/

3.1. Se você não tem o pnpm instalado, instale-o:

npm install -g pnpm@latest-10

3.2. Rode esse comando para instalar todas as dependências (React, TypeScript, Vite, Tailwind CSS, Lucide-React, etc.):

pnpm install

4. Rode o script build:

pnpm run build

5. Rode o script preview:

pnpm run preview

6. Vá para o seu navegador e cole esta URL:

http://localhost:3000

É isso! Este projeto foi criado por Rick com ☕ e 💻.