Figma

Notion

---

Table of Contents

• 👋 Introduction
• 📂 Structure
  • Core
  • Docs
  • Web
    • Prologue
• 🪄 My Experience
• 💻 For the next project
• 🤔 Creator
• License
• Colaborators
• 📝 Contact

👋 Introduction

This is a high-school project I’ve made to test some encrypting methods (ROT and Zenit).

📂 Structure

This a monorepo built with yarn workspaces. These are all the existing packages. All of the packages are build with typescript and are located inside the packages folder.

Package	Description
core	Main encryption and decryption algorithms
docs	Documentation about the core functions
web	A Next.js front-end

Core

The core package is a simple typescript project. It uses SOLID principles to implement different cryptography methods by creating a “base” cryptography contract called ICryptography, it establishes base “behaviors” that all cryptographic methods should follow, the contract looks like this.

  export interface ICryptography {
    execute: (value: string) => Promise<string>;
  }

Because it’s an interface we can implement it in classes like so

  export class ROT implements ICryptography {}

The thing is, if the class would to implement the ICryptography contract, it would necessarily need to also create that execute method defined in the contract otherwise typescript would start to yell at you.
This is what a no-error implementation would look like.

  export class ROT implements ICryptography {
    public async execute(value: string): Promise<string> {
      return value;
    }
  }

For the typescript part this is basically it, if you want to see more on how I build the cryptographic methods specifically you can start here.

---

Docs

The docs package doesn’t actually need to exist but I’ve built it anyway because I wanted to try out Nextra again but I couldn’t get it to work properly so I switched to Docsaurus. I’ve had a really good experience with it, it’s highly customizable, I applied my theme in a matter of minutes and served me really well with those static markdown pages.

If you can, please visit their docs.

I just slapped some of my colors and sizes from the style-guide on the css and it worked perfectly, I won’t enter in too much detail on why my colors look how they look or why I build a whole size scale but I’ll do that in a near future, for now, just I will explain part of the code and that’s it.

$lightness-step: 10;
$lightness-base: 7;

$colors: (
  gray: (
    hue: 220,
    saturation: 14,
  ),
  red: (
    hue: 360,
    saturation: 36,
  ),
  yellow: (
    hue: 60,
    saturation: 36,
  ),
  green: (
    hue: 100,
    saturation: 36,
  ),
  primary: (
    hue: 220,
    saturation: 36,
  ),
);

:root {
  @each $color, $properties in $colors {
    @for $i from 1 through 9 {
      $hue: map-get($properties, hue);
      $saturation: map-get($properties, saturation) + "%";
      $lightness: $lightness-base + ($lightness-step * (9 - $i)) + "%";

      // prettier-ignore
      --color-#{$color + ""}-#{$i * 100}: hsl(#{$hue}, #{$saturation}, #{$lightness});
    }
  }
}

So, my color is a scale, that ranges from 900 to 100, 100 being the lightest and 900 the darkest, because I’m using HSL color notation in here, I can easily modify lightning values, so, 900 starts at 7 lightness and has a “step” of 10, so for every shade the step will be added onto the base lightness.

The size scale follows the same rules, only changing the step and base values.

I really enjoyed using Docsaurus, it was really easy to setup, deploy was basically ready and the markdown files are just perfect to use for something like this, will 100% use it again in the future.

---

Web

The web package is the main face of encryptr, it is a Next.js SSG website, built with scss modules and typescript, of course there are some additional shenanigans such as Storybook, React-Beautiful-DND but they aren’t much, I tried to stick to base react as much as I could to really see where it shines and where it doesn’t.

Prologue

But before it was a Next.js project it was a Nuxt.js project, and to be honest, I hated it. I get that Vue3 is bringing what Vue2 didn’t have, that being typescript support and that’s great news, I love typescript and trying vue would be awesome, but no. Nuxt.js turned from a dream to a nightmare in a question of seconds.

• First, storybook.

  So, there seems to be some incompatibility with Storybook and Nuxt.js, so they created “Nuxt/Storybook”, which is a Nuxt plugin that adds storybook support, and ok, that kind of did it, it solved the problem, right? right? No, it didn’t, while yes, it gives Nuxt some storybook support it is some “not working for me” support, I wanted to export the storybook and Nuxt front-end together, but it couldn’t be accomplished.

• Second, Typescript.

  There is almost none support to typescript on Vue2 as I mentioned, ok, so let’s just update to Vue3 right? No, the current stable version of nuxt doesn’t support Vue3, meaning, I can’t have full typescript support like I wanted, but that’s ok, let’s just ignore and use the good old javascript, right????

• Third, Vue3

  “let’s just ignore and use the good old javascript, right????” No, again no, the Vue3 API is WAYYYY simpler than the Vue2 API, things can be done much faster and in fewer lines of code in Vue3 compared to Vue2, that was a huge drawback for me since I never touched Vue in my life.

• Fourth, Nuxt3

  You’re probably thinking, “you dumb*ss, just update to Nuxt3 and it’s over”. No, it’s not my dear friend. Nuxt3 lacks one of the most if not THE MOST used feature (at least by me), Static Site Generation, it simply lacks SSG, a simple thing like SSG, and it doesn’t exist in Nuxt3 (yet).

Here I gave you a brief explanation of why I moved out of Nuxt to Next and why that made hair regrow on my forehead

Ok, back to next.js….

In this one I really put my context skills to a test and failed it! I had to re-do the entire file creation process in the context API, the first time I tried it with 2 contexts, one for Auth and another for Files but it ended up failing, it was just like one of those unsolvable bugs, changes weren’t being made to localStorage, context not updating state, etc and then there was the “@storybook/addons” package, I don’t know why but, EVERY SINGLE TIME, I were to import one of the hooks from react it would actually import from this thing

- import { useEffect } from "@storybook/addons" // this awful shit

+ import { useEffect } from "react" // the right import

Beside that little inconvenience, it was a really smooth ride and I got to develop all the features in a very close time period.

---

🪄 My Experience

Little to no problems!

I had problems with Nextra at the beginning but when I switched to Docsaurus everything worked fine. I don’t think I even need to talk about Next.js, it is PERFECT, THE BEST FRAMEWORK out there, that’s right, not the best react framework but THE BEST FRAMEWORK, I think what vercel did with Next.js is incredible, easy to configure, fast, static site generation, server side rendering, all of that in one place, I truly love Next.js.

It was definitely one of the most smoothen written? one of the apps I wrote more smoothly? Name however you want it but this was one of my best experiences while building a React App, it wasn’t “too easy” but not that hard either, it was a challenge, and everytime I finish a challenge I like to give myself another challenge! but not before a reward of course, that’s why I’m going to torture myself into learning Vim while making a Game with pure javascript. Must be fun.

---

💻 For the next project

While I was building this app, I took note of every single creative decision and wrote it down so I could look at it later and see which points I needed to improve on and which are good already.

So here are some points that were missed during the development of Encryptr

• list every single form error messages on the design itself (or somewhere along those lines)
• fluid typography needs to be implemented ASAP, manually resizing font-sizes on media queries is disgustingly horrible
• actually finish the design before coding, make sure all screens are built and responsive

---

Creator

My name is Vitor Gouveia, I’m a 17 year old Brazilian high school student, I created this project out of pure passion and will likely continue doing this for years to come, I love the Javascript ecosystem and static typing it with Typescript, this time around I used React to get the job done but I am often open to learning new stuff such as Svelte and Vue :(

While you’re still here, check out some of my other projects that I made with the same love as this one:

Notely

The notes app you've been looking for.

Firebolt

My own hand-made Javascript framework for WebComponents.

PasswordGenerator

Random password generator library.

Giffy

Multi-platform GIF recording app for desktop.

---

License

This project is under MIT license. See the license file for mode details.

---

Colaborators

I thank everybody that colaborated to this project:

Me	AtomicFeasT