Giter VIP home page Giter VIP logo

care-petz's Introduction

care-petz

Este projeto tem como objetivo implementar passo a passo e de forma did?tica uma aplicação web de agendamento de serviços para pets por um profissional autonomo.

O frontend da aplicação será desenvolvido com Angular e o backend simulado pela implementação de uma API Fake, usando o JSON Server.

Endereço de Deploy - GitHub Pages

https://dmatrixxbr.github.io/care-petz/

Video Explicativo do Desenvolvimento do Projeto

https://www.youtube.com/watch?v=udVpMb6o7mE

Protótipo

https://www.figma.com/proto/N4EdtUFZ6KKBRVjEfcLaQa/CarePetz?type=design&node-id=8-124&t=4LfgHOnvf8dwDktZ-0&scaling=contain&page-id=6%3A2&starting-point-node-id=8%3A124

Checklist

  • Criar o repositório no GitHub com a estrutura do Gitflow, ou seja, branches main e develop.
  • Usar componentes de algum framework CSS (Bootstrap, Materialize ou outro)
  • Apresentar as telas com layout responsivo usando ou não algum framework CSS.
  • Construir páginas web com o conceito de componentes.
  • Criar o layout da aplicação com componentes, ou seja, o cabeçalho e rodapé precisam ser componentes.
  • Usar pelo menos dois tipos de data-binding (Interpolation, Property Binding, Event Binding e Two Way Data Binding).
  • Passar dados via hierarquia de componentes, ou seja, usando @Input ou @Output.
  • Mapear componentes ? rotas no módulo de rotas.
  • Criar navegação entre páginas por meio de rotas.
  • Passar dados entre componentes que representam diferentes telas via parâmetros de rotas.
  • Validar campos do formulário com REGEX e apresentar os erros.
  • Desabilitar o botão de submit enquanto o formulário está inválido.
  • Fazer requisições a API com tratamento da resposta com Promises ou Observables.
  • Cadastrar uma entidade no JSON Server.
  • Apresentar uma lista de dados com a diretiva estrutural ngFor.
  • Usar a diretiva ngIf.
  • Formatar a apresentação de dados com Pipes.
  • Build e deploy da aplicação.

Manual de execução

  • Clonar o repositório com git clone
  • Fazer checkout no branch develop que contém as modificações mais recentes
  • Abrir o projeto no editor Visual Studio Code (VS Code)
  • Abrir um terminal pelo VSCode e executar a API Fake (JSON Server) via o seguinte comando:
    • Comando: npm run json-server --watch db.json --routes routes.json
    • O comando deve ser aplicado no diretório raiz do projeto, ou seja, que contém o arquivo db.json e routes.json.
  • Abrir um novo terminal pelo VSCode e então executar o projeto Angular
    • Comando: ng s

care-petz's People

Contributors

dmatrixxbr avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.