Frontend Hiring Challenge

Bem-vindo ao Frontend Hiring Challenge! Este documento apresenta uma descrição detalhada do desafio, os requisitos técnicos, e as funcionalidades que você deve implementar. Sinta-se à vontade para usar sua criatividade e se destacar no processo seletivo. Boa sorte! 🚀

Descrição do Projeto

O objetivo deste projeto é criar uma página web para simular um ambiente de entrevista online. A aplicação deve permitir que o usuário visualize perguntas escritas e responda via áudio.

Funcionalidades Requeridas

1. Gravação de Áudio

O usuário deve ser capaz de:
- Iniciar a gravação de sua voz.
- Parar a gravação quando desejar.
A gravação deve ser armazenada localmente no navegador.

2. Reprodução de Áudio

Após a gravação, o usuário deve conseguir:
- Reproduzir o áudio gravado para revisar sua resposta.

3. Interface de Usuário

A interface deve ser:
- Limpa e intuitiva, com botões claros para as ações de iniciar/parar a gravação e reproduzir áudio.
- O usuário deve visualizar:
  - Uma pergunta escrita para ler e responder.
  - Uma contagem regressiva indicando quanto tempo ele tem para gravar sua resposta.

4. Funcionalidade Original

Adicione uma funcionalidade criativa que complemente o contexto da entrevista online.
Sugestões (mas não limitado a):
- Histórico de gravações, permitindo ao usuário revisar e excluir respostas anteriores.
- Indicadores de progresso para mostrar quantas perguntas foram respondidas.
- Um sistema de notificações com mensagens de sucesso ou aviso durante o processo de gravação.

Requisitos Técnicos

Framework: React ou Next.js.
Linguagem: TypeScript.
Estilo:
- Styled Components.
- Tailwind CSS.
Bibliotecas: Utilize bibliotecas adicionais apenas se necessário. Preferimos soluções próprias.
Versionamento:
- Todo o código deve ser versionado em um repositório Git.
- Ao final, envie o link do repositório.

Considerações Adicionais

Este desafio é uma oportunidade para demonstrar suas habilidades técnicas, criatividade e atenção aos detalhes.
Funcionalidades extras ou melhorias serão consideradas positivamente, desde que coerentes com o contexto da aplicação.

Checklist de Funcionalidades

Gravação de áudio local.
Reprodução do áudio gravado.
Interface de usuário intuitiva:
- Botões para gravação e reprodução.
- Pergunta escrita para o usuário.
- Contagem regressiva.
Funcionalidade extra:
- Histórico de gravações com opção de excluir áudios gravados.

Como Rodar o Projeto

Clone o repositório:

git clone <https://github.com/helenapaixao/interview_audio_challenge>
cd <interview_audio_challenge>

Instale as dependências:
```
npm install
```
Inicie o servidor de desenvolvimento:
```
npm run dev
```
Acesse o projeto no navegador:
```
http://localhost:5173/
```

Exemplo de Funcionalidade Extra Implementada

Histórico de Gravações:
- Visualize todas as perguntas respondidas e seus respectivos áudios.
- Reproduza ou exclua uma gravação diretamente no histórico.

Requisitos Entregues

Gravação e armazenamento de áudio localmente.
Reprodução do áudio gravado.
Interface de usuário com pergunta escrita, contagem regressiva e botões intuitivos.
Histórico de gravações com opção de excluir respostas antigas.

Link do Repositório

Repositório do Projeto