Sistema de Salão de Beleza

Projeto Angular I - Santander Coders 2024

🚀 Sobre o Projeto

O Sistema de Salão de Beleza foi desenvolvido durante o curso Angular I do Santander Coders 2024, com orientação do professor Michael Douglas Barbosa Araujo. O sistema simula um fluxo de agendamento em um salão de beleza, permitindo ao usuário selecionar serviços, data, horário e profissional em uma interface moderna e interativa.

Objetivos do Projeto

Interface Simulada: Tela de login, boas-vindas e agendamento.
Fluxo Completo de Agendamento: Seleção de serviço, data, horário e profissional.
Confirmação de Pagamento: Modal de confirmação com feedback visual.
Trabalho em Equipe: Uso de Git e GitHub para versionamento e colaboração.

⚙️ Funcionalidades

Tela de Login: O usuário insere um nome de usuário e senha para acessar o sistema.
Tela de Boas-Vindas: Após o login, é exibida uma saudação personalizada com o nome do usuário.
Seleção de Serviços e Agendamento:

Lista de serviços disponíveis.
Seleção de data, horário e profissional.

Resumo do Agendamento: Mostra um resumo com opção de confirmação.
Confirmação de Pagamento: Ao confirmar, abre-se um modal de feedback indicando que o pagamento foi recebido com sucesso.

🎨 Layout

O layout foi desenvolvido com Angular Material, utilizando componentes como mat-select, mat-datepicker, mat-dialog, entre outros. Aqui estão algumas das principais telas: entre outros, para manter a consistência visual e a usabilidade da aplicação. Abaixo estão as telas principais:

1. Tela de Login
1. Tela de Boas-Vindas e Agendamento
1. Resumo e Confirmação de Agendamento
1. Tabela de Agendamentos com Opção de Confirmação de Pagamento

🚀 Como Executar o Projeto

💡Pré-requisitos

Antes de começar, você vai precisar ter instalado em sua máquina as seguintes ferramentas:

Git: Para controle de versão e clonagem do repositório.
Node.js + NPM: Node.js é o ambiente de execução para JavaScript no servidor, e o NPM (Node Package Manager) é o gerenciador de pacotes padrão que vem com ele.
Angular CLI: Ferramenta de linha de comando para criar, construir e gerenciar projetos Angular.

Além disso, é recomendado o uso de um editor de código, como VSCode.

🧭 Rodando a aplicação web (Frontend)

# Clone este repositório
$ git clone https://github.com/danielmrz-dev/projeto-angular-I.git

# Acesse a pasta do projeto no seu terminal/cmd
$ cd projeto-angular-I

# Instale as dependências
$ npm install

# Execute a aplicação em modo de desenvolvimento
$ ng serve

# A aplicação será aberta na porta:4200 -acesse: http://localhost:4200

📂 Estrutura do Projeto

src/
├── app/
│   ├── components/
│   │   ├── btn-confirma-pagamento/
│   │   ├── btn-inputs-form/
│   │   ├── header/
│   │   ├── info-agendamento/
│   │   └── modal-agendamento/
│   ├── pages/
│   │   └── page-agendamento/
│   ├── tela-de-login/
│   ├── interfaces/
│   ├── pipes/
│   ├── scss/
│   └── services/

Explicação dos Diretórios

components: Contém todos os componentes reutilizáveis que podem ser usados em várias partes do projeto, como botões e cabeçalhos.
btn-confirma-pagamento: Componente para o botão de confirmação de pagamento.
btn-inputs-form: Componente para formulários de entrada.
header: Componente para o cabeçalho da aplicação.
info-agendamento: Componente para exibir informações sobre o agendamento.
modal-agendamento: Componente modal para agendamentos.
**pages:**Contém as páginas principais do projeto.
page-agendamento: Página específica para o agendamento.
tela-de-login: Diretório para a tela de login, que pode conter arquivos relacionados ao design e lógica dessa página.
interfaces: Diretório para interfaces TypeScript usadas para definir a estrutura dos dados.
pipes: Contém os pipes personalizados para transformação de dados.
scss: Diretório para os arquivos SCSS globais do projeto, para estilos que não estão em componentes específicos.
services: Serviços que encapsulam a lógica de negócios e comunicação com APIs.

🛠 Tecnologias

Componentes Angular: Estrutura modular para a interface.
Rotas: Gerenciamento de navegação entre as telas de login, agendamento e pagamento.
Angular Material: Design consistente usando a biblioteca Material para Angular.
POO: Organização do código utilizando princípios de Programação Orientada a Objetos.

🔗 Link para o Deploy

O projeto está hospedado no Vercel.
Acesse aqui: https://projeto-angular-i.vercel.app/

FAL

📝 Observações e Melhorias Futuras

Implementação de autenticação com backend para maior segurança. Otimização para dispositivos móveis. Integração com banco de dados para persistência dos agendamentos.

💪 Como contribuir para o projeto

Faça um fork do projeto.
Crie uma nova branch com as suas alterações: git checkout -b my-feature
Salve as alterações e crie uma mensagem de commit contando o que você fez: git commit -m "feature: My new feature"
Envie as suas alterações: git push origin my-feature