https://github.com/gustavo-victor/drum-machine
Drum machine app in ReactJS
https://github.com/gustavo-victor/drum-machine
drum-machine html reactjs redux redux-toolkit scss
Last synced: 3 months ago
JSON representation
Drum machine app in ReactJS
- Host: GitHub
- URL: https://github.com/gustavo-victor/drum-machine
- Owner: Gustavo-Victor
- License: mit
- Created: 2023-03-30T15:29:43.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2025-03-02T13:02:07.000Z (over 1 year ago)
- Last Synced: 2025-03-16T02:25:58.373Z (over 1 year ago)
- Topics: drum-machine, html, reactjs, redux, redux-toolkit, scss
- Language: JavaScript
- Homepage: https://drum-machine-sage-five.vercel.app/
- Size: 101 KB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
Drum Machine 🥁
Sobre |
Layout |
Tecnologias e Ferramentas |
Funcionalidades |
Instalação |
Licença |
✔ Projeto concluído
## ❓ Sobre
Este projeto é uma aplicação React que simula uma bateria eletrônica, permitindo ao usuário reproduzir sons, controlar o volume, desativar sons, etc. O projeto faz parte de um [desafio](https://www.freecodecamp.org/learn/front-end-development-libraries/front-end-development-libraries-projects/build-a-drum-machine) da [freeCodeCamp](https://www.freecodecamp.org/) do curso de bibliotecas de desenvolvimento Front-end. O intuito do projeto é treinar as habilidades aprendizas durante curso através desse desafio real.
Clique [aqui](https://drum-machine-sage-five.vercel.app/) para ver o projeto no site da [Vercel](https://vercel.com).
## 🎨 Layout
## 🛠 Tecnologias e Ferramentas
- [HTML](https://developer.mozilla.org/pt-BR/docs/Web/HTML)
- [SASS](https://sass-lang.com/)
- [ReactJS](https://pt-br.reactjs.org/)
- [Redux](https://redux.js.org/)
- [Vite](https://vitejs.dev/)
Veja como ficou o arquivo [package.json](./package.json)
## ⚙ Funcionalidades
- [x] Tocar som ao clicar nos botões ou ao apertar tecla
- [x] Ativar e desativar mudo
- [x] Alternar entre tipos de sons (Heater Kit and Smooth Piano Kit)
- [x] Controlar volume do som
## 💻 Instalação
Para abrir e executar o projeto no seu computador, você vai precisar ter o [Node.js](https://nodejs.org/en) instalado na sua máquina (recomendo baixar a versão LTS). Além disso, para conseguir executar os comandos de terminal a seguir, você precisará instalar o [GIT](https://git-scm.com/).
É recomendado ter alguns conhecimentos básicos de HTML, CSS, JavaScript e React para conseguir entender os códigos do projeto e também ter alguma noção prévia de comandos de terminal para conseguir acompanhar as instruções no seu computador.
Após ter certeza de que tudo está instalado no seu computador, basta acompanhar os passos a seguir:
1. Faça download do projeto ou clone ele com o seguinte comando no terminal:
```bash
git clone https://github.com/Gustavo-Victor/drum-machine.git
```
2. Descompacte o arquivo do projeto e abra a pasta do projeto; se tiver clonado basta só abrir a pasta do projeto; você pode abrir a pasta usando o seguinte comando:
```bash
cd drum-machine/
```
3. Instale as dependências necessárias do projeto (a pasta do projeto precisa estar aberta no terminal):
```bash
npm i -g yarn ;
yarn install;
```
4. Executar o projeto em modo de desenvolvimento:
```bash
yarn dev
```
5. Abrir o projeto no seu navegador de preferência. (Basta digitar na barra de pesquisa: http://localhost:5173/).
## 📝 Licença
O projeto está sob a Licensa MIT
Qualquer pessoa pode usar, clonar e contribuir com este projeto.
Clique [aqui](./LICENSE.md) para saber mais