Este projeto é um clone simplificado do Instagram, desenvolvido como parte do meu curso no Programa de Formação Acelerada em Programação (FAP), para praticar conceitos de HTML, CSS e TypeScript.
Este projeto foi desenvolvido com as seguintes tecnologias:
- HTML5 para a estruturação das páginas.
- CSS3 para o design visual e layout.
- TypeScript (ES6) para a manipulação do DOM e criação de classes e métodos orientados a objetos.
- Vite para o bundling e execução do projeto no navegador.
- Faker.js para gerar dados fictícios (nomes, avatares, imagens).
- UUID para criar identificadores únicos para os posts.
- Criação de posts dinâmicos: os posts são gerados automaticamente com dados fictícios usando o
faker. - Sistema de likes: cada post pode ser curtido ou descurtido com um efeito de animação.
- Interatividade no DOM: botões e ícones interativos que mudam seu estado visual ao serem clicados.
- Design Responsivo: layout ajustado para diferentes resoluções.
Durante o desenvolvimento deste projeto, pratiquei:
- Manipulação do DOM com JavaScript/TypeScript.
- Criação de componentes reutilizáveis usando classes.
- Utilização de bibliotecas externas como Faker.js para simulação de dados.
- Animações e efeitos visuais com CSS.
Para clonar e executar este projeto localmente, você precisará ter o Git e o Vite instalados. Execute os seguintes comandos no terminal:
# Clone o repositório
$ git clone https://github.com/mf081/meu-instagram-web.git
# Entre no diretório do projeto
$ cd (diretorio do projeto)
# Instale as dependências
$ npm install
# Execute o projeto
$ npx viteBy Mateus Fernando