Cifra de César

Site para usar a cifra de César para encriptar/descriptar texto

Status do projeto

Concluído 💪
Veja o site online aqui 👀 💻

Features

Usando o conceito da cifra de César, podemos:

Criptografar um texto
Descriptografar um texto criptografado neste site

Recursos adicionais:

Copiar o texto de saída apenas com um botão Copiar texto
Mudar o tema para light ou dark (claro/escuro) baseado nas configurações do nevegador do usuário.

Sobre ☕

Dark:

Light:

Este projeto tem como base o conceito da cifra de César, também conhecida como cifra de troca, código de César ou troca de César. A Cifra de César é uma técnica de criptografia bastante simples e provavelmente a uma mais conhecida de todas. Trata-se de um tipo de cifra de substituição, na qual cada letra de um texto a ser criptografado é substituída por outra letra, presente no alfabeto porém deslocada um certo número de posições à esquerda ou à direita. Por exemplo, se usarmos uma troca de quatro posições à esquerda, cada letra é substituída pela letra que está quatro posições adiante no alfabeto, e nesse caso a letra A seria substituída pela letra E, B por F, C por G, e assim sucessivamente.

Neste projeto, voçê pode decidir qual ação deve ser realizada, encriptar ou decriptar um texto.

Encriptar: Ao selecionar esta opção, voçê insira/escreva o texto a ser criptografado e clique no botão Criptografar. O resultado será exibido abaixo, mostrando o texto original(seu texto) e logo abaixo o texto criptografao. Exemplo:

Texto original
```
 olá mundo! hello world
```
Texto criptografado
```
 roá pxqgr! khoor zruog
```
Decriptar: Voçê usou ou recebeu uma mensagem que foi criptografada nesta aplicação, logo para vê-lo descriptografado, selecione a opção Decriptar. O resultado será exibido abaixo, mostrando o texto original(seu texto criptografado) e logo abaixo o texto descriptografado. Exemplo:

Texto original criptografado
```
hvwh whawr irl fulswrjudidgr
```
Texto descriptografado
```
este texto foi criptografado
```

Como surgiu a idéia?

A idéia começou como um desafio de um professor da disciplina programação. Ele me desafiou(sim! foi direto pra mim pois já estudava JavaScript por 6 meses) a criar um programa em Java que encripta um texto e exibe na tela. O desafio foi concluído antes do fim da aula. Mas, nesta época, eu começei a estudar React, e então para fixar os conhecimentos básicos da biblioteca, decidir refazer o desafio, desta vez desenvolvendo uma aplicação web. Inicialmente, este projeto estava em React puro, com nenhuma funcionalidade extra. Agora, este projeto que está documentado, foi feito em React, mas dentro do framework NextJS, também com o intuito de fixar os conceitos aprendido com o NextJS. A aplicação foi refeita, quase que por completo. Os assets e CSS foram reaproveitados em parte, mas todo o código foi reescrito para se encaixar na estrutura do NextJS e para usar as funcionalidades mais recentes do React(React Hooks) e NextJS.

Onde está? 🚀

Este site está hospedado na plataforma Vercel de forma gratuita. A plataforma usa a branch master deste projeto para realizar o build e deploy da aplicação, ou seja, qualquer alteração nesta branch irá refletir na aplicação em produção. A Vercel é também a desenvolvedora do NextJS.

Como usar localmente? 📌

Deseja usar a aplicação localmente e fazer as suas modificações?

Se sim, siga os passos abaixo 🤓

Primeiramente voçê precisa ter instalado em sua máquina o NodeJS com uma versão minima recomendada v12.0.0 e o Git. Além disto é bom ter um editor para trabalhar com o código como VSCode.

Para começar, faça o clone deste repositório. Digite o comando no terminal:

$ git clone https://github.com/IglanCardeal/cifra-de-cesar-nextjs

Acesse a pasta do projeto:

$ cd cifra-cesar-nextjs

Instale as dependências do projeto usando o npm ou yarn se preferir:

$ npm install
# ou
$ yarn install

Feito isso, execute o comando abaixo e o aplicativo será iniciado localmente como ambiente de desenvolvimento em sua máquina:

$ npm run dev
# ou
$ yarn dev

Agora abra seu navegador na URL http://localhost:3000 e verá a página inicial do projeto.

Quais tecnologias/ferramentas foram usadas? 🔧

Performance da aplicação no PageSpeed

Como este site foi feito em NextJS, ele foi otimizado para oferecer a melhor experiência possível para o usuário. Diversos recursos do NextJS como Automatic code-splitting, Server-side rendering, CSS-in-JS styling, Image Optimization, dentre outros, e otimizações de imagens feitas por mim, resultaram em uma excelente métrica no Google PageSpeed. Veja abaixo os resultados obtidos nos testes para dispositivos móveis e computadores.