Daniela Caus

<h1 align="center"> Oie! Eu sou a Dani Caus <img src="https://raw.githubusercontent.com/ABSphreak/ABSphreak/master/gifs/Hi.gif" width="30"> </h1> 

<div id="social" align="center">
  <a href="https://www.linkedin.com/in/danielacaus/" target="_blank" data-description="LinkedIn" data-fontawesome-unicode-icon="f08c" data-color="#0a66c2"><img src="https://img.shields.io/badge/-LinkedIn-%230077B5?style=for-the-badge&logo=linkedin&logoColor=white" alt="LinkedIn" target="_blank"></a>
  <a href="https://www.twitter.com/danicaus" target="_blank" data-description="Twitter" data-fontawesome-unicode-icon="f099" data-color="#1d9bf0"><img src="https://img.shields.io/badge/-Twitter-%230077B5?style=for-the-badge&logo=twitter&logoColor=white" alt="Twitter" target="_blank"></a>
  <a href="https://dev.to/danicaus" target="_blank" data-description="Dev.To" data-fontawesome-unicode-icon="f6cc" data-color="#FFFFFF"><img src="https://img.shields.io/badge/-DevTo-%230077B5?style=for-the-badge&logo=dev.to&logoColor=white&labelColor=black&color=black" alt="Dev.To" target="_blank"></a>
  <a href="https://www.twitch.tv/danicaus/" target="_blank" data-description="Twitch" data-fontawesome-unicode-icon="f1e8" data-color="#772ce8"><img src="https://img.shields.io/badge/-Twitch-%230077B5?style=for-the-badge&logo=twitch&logoColor=white&labelColor=blueviolet&color=blueviolet" alt="Twitch" target="_blank"></a>
  <a href="https://discord.com/invite/XQHh3yCN3C" target="_blank" data-description="Discord" data-fontawesome-unicode-icon="f392" data-color="#5661f5"><img src="https://img.shields.io/badge/-Discord Thasfin-%230077B5?style=for-the-badge&logo=discord&logoColor=white&labelColor=blueviolet&color=blueviolet" alt="Discord Thasfin" target="_blank"></a>
</div>

<br>

<div id="portuguese_profile">
  <p>Sou desenvolvedora web focada em Javascript, especializada em Typescript, ReactJS e NodeJS. Além disso, também já desenvolvi em aplicações em C#, com .NET e ASP.NET.</p>
  <p>Minha experiência como fullstack inclui a conexão com bancos de dados relacionais e não relacionais e a implementação de testes e builds automatizados. Já tive contato com arquiteturas em microsserviços e monolito, principalmente com padrões de código orientado a objetos.</p>
  <p>Atualmente tenho focado meus estudos em aplicações microfrontend, bem como design patterns.</p>
</div>

##

<div id="english_profile">
  <p>I’m a web developer focused on JavaScript and specialized in TypeScript, React, and Node.js. Additionally, I have experience developing apps in C# using .NET and ASP.NET.</p>
  <p>As a full-stack developer, I’ve worked with both relational and non-relational databases, automated tests, and builds. I’ve also been exposed to microservices and monolithic architecture, primarily centered around object-oriented design patterns.</p>
  <p>Recently, I’ve been concentrating on studying microfrontend applications and design patterns.</p>
</div>

<div align="center">
  <img align="center" alt="HTML" title="HTML 5" height="30" width="40" src="https://raw.githubusercontent.com/devicons/devicon/master/icons/html5/html5-original.svg">
  <img align="center" alt="CSS" title="CSS 3" height="30" width="40" src="https://raw.githubusercontent.com/devicons/devicon/master/icons/css3/css3-original.svg">
  <img align="center" alt="JavaScript" title="JavaScript" height="30" width="40" src="https://raw.githubusercontent.com/devicons/devicon/master/icons/javascript/javascript-plain.svg">
  <img align="center" alt="React" title="React" height="30" width="40" src="https://raw.githubusercontent.com/devicons/devicon/master/icons/react/react-original.svg">
  <img align="center" alt="Sass" title="Sass" height="30" width="40" src="https://raw.githubusercontent.com/devicons/devicon/master/icons/sass/sass-original.svg">
  <img align="center" alt="TypeScript" title="TypeScript" height="30" width="40" src="https://raw.githubusercontent.com/devicons/devicon/master/icons/typescript/typescript-plain.svg">
  <img align="center" alt="Next" title="Next" height="30" width="40" src="https://raw.githubusercontent.com/devicons/devicon/master/icons/nextjs/nextjs-original.svg">
  <img align="center" alt="JamStack" title="JamStack" height="30" width="40" src="https://raw.githubusercontent.com/devicons/devicon/master/icons/jamstack/jamstack-original.svg">
  <img align="center" alt="Graphql" title="GraphQL" height="30" width="40" src="https://raw.githubusercontent.com/devicons/devicon/master/icons/graphql/graphql-plain.svg">
</div>

<br>

<div align="center">
  
  <a href="https://github.com/danicaus" onmouseover="this.style.textDecoration='none'">
    <img height="180em" src="https://github-readme-stats.vercel.app/api?username=danicaus&show_icons=true&theme=omni&include_all_commits=true&count_private=true" />
    <img height="180em" src="https://github-readme-stats.vercel.app/api/top-langs/?username=danicaus&layout=compact&langs_count=7&theme=omni" />
  </a>
  
  ##
  
  <img align="center" src="https://github.com/danicaus/danicaus/blob/output/github-contribution-grid-snake.svg" />
  
</div> 


Repositório criado durante imersão React da Alura feita em Janeiro de 2022

alura-aluracord-imersaoreact

<h1 align="center">
  Discord Alura Memes
</h1>

Aplicação de uma sala de chat para troca de mensagens entre usuários. Contém uma tela de login, que se comunica com a api do Github para trazer a foto e o nome do usuário.

Após entrar na sala de chat, o usuário consegue enviar mensagens, que são armazenadas em um banco de dados. No caso desse projeto, foi utilizado o Supabase para essa finalidade.

Projeto criado na Imersão React da Alura em Janeiro de 2022.

---

## Desafios implementados

Além do conteúdo das aulas, segui com alguns desafios propostos e ideias particulares.

### <ins>**Tema "Memes"**</ins>
Na ideia original, o tema era "Matrix". Fomos desafiados a trazer um tema diferente, apliquei o meme do pai encarando.

### <ins>**Dados do usuário do Github**</ins>
Inspirada na ideia dos memes, trouxe alguns dados do Github:
- Data de criação da conta no Github
- Número de seguidores
- Número de pessoas que o user segue
- Quantidade de estrelas recebidas em todos os repositórios
- Quantidade de repositórios públicos
- Número de commits
- Data do último commit

Com isso, essas informações o app seleciona um meme.

Também adaptei uma aplicação que uso no meu perfil para mostrar as linguagens mais usadas pelo usuário:

<img height="180em" src="https://github-readme-stats.vercel.app/api/top-langs/?username=danicaus&layout=compact&langs_count=7&theme=omni"/>

Link do repositório da aplicação: https://github.com/anuraghazra/github-readme-stats

Obrigada pelo [vídeo](https://youtu.be/TsaLQAetPLU), [Rafa Ballerini!](https://github.com/rafaballerini)

### <ins>**Gravar nome do user no localStorage**</ins>
Na aula o login do usuário é implementado à url, no entanto usei o armazenamento em localStorage.

### <ins>**Botão de enviar**</ins>
Adicionado um botão para enviar mensagem no chat, que executa a mesma função que a tecla "Enter", ensinada na Imersão.

### <ins>**Botão de remoção da mensagem**</ins>
Incluído um botão para excluir a mensagem. Adaptei o CSS para que ele ficasse na extremidade direita da caixa de mensagem.

### <ins>**Formato de data**</ins>
Adicionado o horário da mensagem enviada. O bloco passado na Imersão só enviada a data.

Além disso, como o Supabase grava o horário do post da mensagem sem considerar o fuso horário do Brasil, fiz com que o horário das mensagens obedecesse o horário do Brasil.

### <ins>**Página de erro**</ins>
Foi criada uma página de 404, também com um meme feliz.

---
## **Tecnologias utilizadas**
### <ins>**Next**</ins>
Aplicação criada com [NextJS](https://nextjs.org/) com [setup manual](https://nextjs.org/docs/getting-started#manual-setup).

Aplicamos o [next/router](https://nextjs.org/docs/api-reference/next/router) para redirecionamento de página entre o login e a página de chat. Isso permite com que a transição entre as páginas seja feita do lado do browser, melhorando a performance de carregamento da aplicação.

### <ins>**@skynexui**</ins>

A fim de facilitar a estilização dos blocos e acelerar a implementação do projeto, foi utilizado componentes já prontos da [SkynexUI](https://github.com/skynexui/components), que são facilmente editáveis para personalização.

[O Storybook](https://storybook.skynexui.dev/?path=/story/introduction--page) dessa biblioteca permite a visualização de possíveis adaptações, o que facilita ainda mais sua implementação.

Valeu, [Dev Soutinho!](https://github.com/omariosouto) ❤

### <ins>**Supabase**</ins>

O [Supabase](https://supabase.com/) foi usado como um serviço de backend. Ele pode ser usado de várias formas, mas neste projeto foi usado como um database para armazenar e alterar as mensagens enviadas.

Para atualização do chat em tempo real, foi usada a feature de [*subscribe*](https://supabase.com/docs/reference/javascript/subscribe).

Extremamente fácil de criar, administrar e usar, além de ser de graça!

### <ins>**@crello/react-lottie**</ins>

[Biblioteca](https://github.com/crello/react-lottie) para uso de animações baixadas em um arquivo json a partir da página [Lottie Files](https://lottiefiles.com/). Permite adicionar a animação como um componente React, bem como configurar alguns parâmetros para a animação.

As animações são muito lindas! 😍

Usada na página 404.

---
## Contribuição

Esse projeto ainda não está bem estruturado para receber contribuições, mas já criei [algumas issues](https://github.com/danicaus/aluracord-imersaoreact-0122/issues), que registram melhorias e bugs já encontrados.

Caso encontre um bug ou tenha uma nova sugestão de melhoria, sinta-se à vontade para criar uma issue para discutirmos sua implementação! 

---
## Agradecimentos

Sou especialmente grata ao professores dessa Imersão [Mario Souto](https://github.com/omariosouto) e [Paulo Silveira](https://github.com/peas) pelos aprendizados alcançados com esse projeto, e pela oportunidade de exercitar os conhecimentos que ganhei desde Julho/21, quando comecei a aprender React.

Agradeço também ao time da Alura por essa entrega! Admiro demais vocês! 🤩


Projeto criado durante curso de Frontend Avançado da Alura

instalura

Aplicação Let Me Ask, feito durante NLW da Rocketseat. Cria sala de perguntas para ser administrada por um administrador. A pessoa que faz a pergunta tem como curtir outras perguntas, e é necessário autenticação do Google. Utiliza React e Firebase.

rocketseat-nlw-together-react

<h1 align="center">

  ![Let me ask](src/assets/images/logo.svg)

</h1>

Aplicação criada durante o evento Next Level Week da Rocketseat, na trilha React, ministrado por Diego Fernandes. Como fiz essa aula após aproximadamente um ano do seu lançamento, alguns pacotes estão em uma versão diferente do que foi ensinado em aula.

Layout realizado por Rebecca Gonzalez, [nesse link do Figma](https://www.figma.com/community/file/1009824839797878169).

## ✨ Tecnologias

Esse projeto foi desenvolvido usando as seguintes tecnologias:

- [React](https://reactjs.org/)
- [Firebase](https://firebase.google.com/)
- [TypeScript](https://www.typescriptlang.org/)
- [Sass](https://sass-lang.com/)

## 💻 Como executar

Após baixar ou clonar este repositório, basta instalar todas as suas dependências usando `npm install` ou `yarn add`. Não é possível utilizar esse projeto sem as chaves do Firebase.

Para ter o seu próprio projeto, é necessário criar uma conta no Firebase e criar um novo projeto para realizar [autenticação via Google](https://firebase.google.com/docs/auth/web/start?authuser=0&hl=pt#web-version-8) e [gerar um Realtime Database](https://firebase.google.com/docs/database/web/start?authuser=0&hl=pt#web-version-8). Com isso, é necessário criar um arquivo `.env.local` com as seguintes variáveis:

```JavaScript
firebaseConfig = {
  apiKey: "API_KEY",
  authDomain: "PROJECT_ID.firebaseapp.com",
  databaseURL: "https://DATABASE_NAME.firebaseio.com",
  projectId: "PROJECT_ID",
  storageBucket: "PROJECT_ID.appspot.com",
  messagingSenderId: "SENDER_ID",
  appId: "APP_ID",
  measurementId: "G-MEASUREMENT_ID",
};
```

A criação dessas variáveis é explicada na [documentação de primeiros passos do Firebase](https://firebase.google.com/docs/database/web/start?authuser=0&hl=pt#initialize_the_javascript_sdk), e é possível obter todas essas informações para um aplicativo criado dentro do projeto, nas configurações > Geral > Seus aplicativos (quando há uma aplicação selecionada)

Com as bibliotecas instaladas e as chaves do Firebase devidamente configuradas, basta executar `yarn start` ou `npm run start` para rodar a aplicação localmente.

## 👀 Para acessar o projeto

Você pode usar este app no link: https://letmeask-danicaus.vercel.app/

Esse link contém a aplicação que eu estou controlando com a minha conta no Firebase.

## 🤓 Diferenciais em relação à aula ("O próximo nível")

- Utilizadas versões com major mais atualizados das bibliotecas:
  - react e react-dom 18
  - react-router-dom 6
  - firebase 9
- O admin consegue remover as marcações de "respondido" e "destaque" na pergunta
- 

## 📢 Possíveis implementações futuras

- Logar com conta do Github e Twitter
- Deslogar
- Excluir pergunta feita
- Editar pergunta feita
- Modal de confirmação de deletar pergunta e encerrar sala
- Separar melhor página Home e NewRoom, tirando repetições
- Separar melhor página Room e AdminRoom, tirando repetições
- Responsividade
- PWA
- Tema dark e light
- Margem no bottom das páginas Room e AdminRoom
- Header fixo no topo da página, independente do scroll
- Alterar ordenação das perguntas quando marcadas pelo admin:
  - "answered" colocaria a pergunta em último lugar
  - "highlighted" colocaria a pergunta acima das outras
- Impedir de colocar mais de uma pergunta como highlighted. Se o admin tentar, tirar a que está em highlighted e colocar a pergunta clicada
- Quando a pessoa cria a sala, direcioná-la para a visão de admin
- Página com as salas onde a pessoa é admin
- Página com as salas que a pessoa fez perguntas
- Deixar que o user admin consiga alterar entre as versões user e admin
- Reorganizar as perguntas por ordem de quantidade de likes

## 📄 Licença

Esse projeto está sob licença MIT.

---

Feito com ❤ por Daniela Caus na NLW Together da Rocketseat

Plataforma do curso Ignite Lab da RocketSeat, criada durante o evento

rocketseat-ignite-lab-event

<h1 align="center">

  ![Ignite lLab](src/assets/images/logo.svg)

</h1>

Aplicação criada durante o evento Ignite Lab da Rocketseat, ministrado por [Diego Fernandes](https://github.com/diego3g).

Layout realizado por Jonas Milan, [nesse link do Figma](https://www.figma.com/file/s6YfMWNMPwR6bmUVWsd8iQ/Plataforma-de-evento---Ignite-Lab-(Community)?node-id=8%3A399).

## ✨ Tecnologias

Esse projeto foi desenvolvido usando as seguintes tecnologias:

- [React](https://reactjs.org/)
- [GraphQL](https://graphql.org/)
- [Apollo Client](https://www.apollographql.com/docs/react/)
- [GraphCMS](https://graphcms.com/)
- [TypeScript](https://www.typescriptlang.org/)
- [Tailwind](https://tailwindcss.com/)

## 💻 Como executar

Após clonar este repositório, basta instalar todas as suas dependências usando `npm install` ou `yarn add`. Com as bibliotecas instaladas, basta executar `yarn dev` ou `npm run dev` para rodar a aplicação localmente.

## 👀 Para acessar o projeto

Você pode usar este app no link: https://rocketseat-ignite-lab-event.vercel.app/

## 🤓 Diferenciais em relação à aula ("O próximo nível")

- Usada a API de internacionalização nativa do JavaScript no lugar de uma das bibliotecas sugeridas em aula ([Intl.DateTimeFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat)).
- Footer

## 📢 Possíveis implementações futuras

- Autenticação
- Responsividade
- Loading com spinners
- Impedir o clique nas aulas não liberadas
- Redirecionamento para última aula vista
- iFrame no lugar do Vime

## 📄 Licença

Esse projeto está sob licença MIT.

---

<p align="center"> Feito com ❤ por Daniela Caus com a Rocketseat</p>


portfolio-nextjs

<h1 align="center">

  Site Dani Caus

</h1>

Site criado durante live na Twitch. Não me baseei em um layout específico, mas reuni algumas ideias de alguns dos sites de portfolio que curto:

- [Dejan](https://www.dejan.works/)
- [Prashant](https://prashantsani.com/)
- [Marc Bouchenoire](https://marcbouchenoire.com/)
- [João Inácio](https://birobirobiro.dev/)

## ✨ Tecnologias

Esse projeto foi desenvolvido usando as seguintes tecnologias:

- [NextJS](https://nextjs.org)
- [Styled Components](https://styled-components.com)
- [GraphQL](https://graphql.org/)
- [Apollo Client](https://www.apollographql.com/docs/react/)

## 👀 Para acessar o projeto

Você pode usar este app no link: https://danicaus.dev

## 📢 Possíveis implementações futuras

- Capa versão mobile
- Página de atividades
- Separar repositório de atividades
- Favicon
- Versão inglês
- Scroll estilizado
- Light/dark mode
- Animações na capa
- Animações no card de atividades
- Testes na função de tempo do último commit
- Github Actions

## 📄 Licença

Esse projeto está sob licença MIT.

---

<p align="center"> Feito com ❤ por Daniela Caus com a ajuda da comunidade na Twitch</p>

Daniela_Caus_BootcampFrontendAlura

<h1 align="center">

  Bootcamp Frontend Alura
  
</h1>

Site criado durante o bootcamp de JAMStack da Alura.

## ✨ Tecnologias

Esse projeto foi desenvolvido usando as seguintes tecnologias:

- [NextJS](https://nextjs.org)
- [Styled Components](https://styled-components.com)

## 📄 Licença

Esse projeto está sob licença MIT.

---

<p align="center"> Feito com ❤ por Daniela Caus com a Alura </p>


sobre mim