
Hello world. Here I am. Pretty much my very first post so nothing to see here.

_for now_.


The first step of a journey is often the weirdest.

First step

Hello World


Time ago, I was in a party with some friends. I told one of them about one of my apps that I had hosted at the time, nothing really big or fancy, but something I wanted to show him.

At that moment I asked him to get his phone and type out the IP and port where I had it on my VPS, and then, I realised that it was awfully inconvenient to host my apps that way. That's a turning point when I decided to actually host all my apps in subdomains like I do right now. But even then, once again, it was somehow inconvenient to just give someone a long URL to type. That's where this project came in mind.

I found that this domain name was untaken and it really fitted my idea.

**Something you can type quick to led you somewhere else**.

And so I decided to invest into finding out how URL shorteners worked and how to host a proper database for it. Ended up quite nicely and it's something I use frequently.

It's made with **Express** attached to a **MongoDB** and **Vue** as a fronted. It will probably be remade not long from now since it need to be improved. I will change this when it's done.


The app was built as a productivity tool for myself, being able to use my domain to go fast to specific pages on all my devices was really something that I find convenient. Its built with a Express backend + MongoDB and a really small Vue frontend

A personal yet functional URL Shortener

nst.sh


This project was pretty much born as an excuse for practicing my knowledge on basic HTML + Vanilla JS. It ended up quite nicely I'd say.

I decided to make it based on [Helltaker](https://store.steampowered.com/app/1289310/Helltaker/), which is a free game that came up recently that people really liked it, if you want to give it a try it's [free](https://store.steampowered.com/app/1289310/Helltaker/) on Steam.

The project was heavily inspired by [Satania.moe](https://satania.moe/), since it has such a wonderful boilerplate and design for the page I wanted to make. Props to [Pizzacus](https://github.com/Pizzacus/).


A static page made with HTML SCSS and Gulp. Created to practice my styling and basic web development skill without any framework whatsoever.

A Helltaker fanpage

Demon Harem


Although very simple I found nobody had made anything like this before.

In this game people keep track of huge scores of 100+ people MANUALLY to excel pages and other sheets. So I decided to make this app to make their life easier.

Functionally is very basic, just takes a screenshot from one of the scores and Tesseract OCR them into a pdf file so you can actually copy paste its data to anywhere else.


A small OCR app to scan nodewar and siege scores from Black Desert Online and transpile them to pdf for easy access and tracking. Made with Tesseract.js

Black Desert OCR for war scores

Score Analyzer


Recently on my **crusade** of learning new stuff I've been reading through a lot of jobs around my local city and nearby. And realized that most of the open offers have a few things in common.

**Either A:** They have some kind of stack hugely related to PHP and Java.

**Or B:** They're about Angular or... surprisingly, **Vue**.

Hey, don't get me wrong, **Vue is pretty cool** I quite like it in fact, it does things differently and, unlike its other two massive pals, Angular and React, it's community-driven which makes it even cooler.

I've never really done anything with it besides practice and check out and how it works. The last time I did that was back when v3 was still in development, when I heard they went live a few months ago, I wanted to give it a try, that's how this app was born.

It's not much of a thing, quite something you could make in an afternoon with little to no effort, but it served me quite well to check out most of the new features v3 adds. Most of them did not make it through to the end, again, it's a really simple app, but you know, it ended up quite nicely. The API is pretty cool as well, it's available at [here](https://covid19api.com/) if you wanna check it out.


A very basic covid tracking app using Vue3, built mainly to refresh my knowledge of the framework and test out new features.

A covid tracking app built using Vue 3.

Vue Covid


This is my second clone of a famous platform. First i started with my [Netflix clone](https://nstlopez.com/project/streaming-service) and now an Instagram clone.

The sole purpose for me to make these clones is to learn how to manage a page that is commonly used in production-ready environments, and since I use Instagram quite a bit, I decided to try to replicate it.

Since I wanted the project to be as straight-forward as possible I decided to use **React** with **create-react-app (CRA)**. I'm quite used to work with it and it seemed like a good option to build and learn new things on the way.

Later on, I realised that [Vite 2.0](https://dev.to/yyx990803/announcing-vite-2-0-2f0a) got released and thought about migrating to it, it did not happen at the end because the project was already sort of half-made already and I was honestly too lazy to move everything.

I quite recommend you give it a look next time you want to start a new React project, it really is blazing fast.

Talking about technologies used, one of the reasons that this project was used for is an excuse to learn **TailwindCSS** since it's on everyone talks lately. Tailwind is a CSS framework based on classes. Working with it has been cool, it makes development quite easy, although if I had to say something about it, is that it really makes code a lot less legible and quite chaotic at some point.

This time I have used Firebase again, just like in the [Netflix clone](https://nstlopez.com/project/streaming-service), it just makes thing way easier for me, though, this time I decided to use more than what it offers, and not only do I use auth but also decided to upload data referring to followers to Firestore. Although this might be one of the last projects I use it. Don't take me wrong, Firebase is great, but lately I want to use my own data layer built on other DBs and with other approaches.

Another reason that I took a project like this one is to put to practice my knowledge on testing libraries. On my other clone I just used [testing-library](https://testing-library.com/) and called it a day, they were not really complex tests or really useful at all, so I decided to make something different on this project.

This time I used a classic approach of **testing-library** + **Jest** and end-to-end testing with **Cypress**.

This project has been quite a lot of fun. From managing the comments and the auth with Firebase to testing everything is running smoothly on any case as well as making the entire page as responsive as possible. This would probably be my last clone for a while, since I want to focus on making something different from the usual as a way to push myself further of my comfort zone as well as practicing other topics of project management.

Thanks for the read and hope you have a good day :).


A simple clone of Instagram with very basic functionality.  Made with React, TailwindCSS and Firebase. Including tests with testing-library, Jest and Cypress.

A simple Instagram clone.

Instagram Clone


This is essentially a clone of the famous streaming platform Netflix, but built my way.
I decided to get more comfortable with React building a _quite complicated at the time_ project.
The idea was simple.
I wanted to copy a famous streaming platform design and logic but with my own stack.
The whole front-end is managed with a React app and the backend is a very basic Firebase setup with auth enabled.

The app consists of a main page, login and signup pages, and a browse page where you can see a few of stock shows gave to the app.

At the time when I built it I was planning on just making the “visible” part of it, but it ended up taking more than that. The auth part was probably the most tedious. Although it uses Firebase and it’s quite easy to setup I had never done anything like it and was quite an experience.

For the whole communication it was a really nice practice for the `useContext` hook. Pretty much the whole app is managed through it and gave me a really good glimpse of where and when is a nice idea to use it.

Talking about _hooks_ I also made my owns with this project!
The _hooks_ I’m talking about is the `useContent` and `useAuthListener`. Both made for the Firebase provider to be a little easier to work with and to access the `localStorage` for the auth sessions.

Design-wise I tried to make the app as close as the original as possible, I believe I made a really accurate clone of it, the part where I struggled the most is the `browse` page where the shows are displayed once you log in. It’s not as accurate as I’d like to, but I believe it turned out nicely.
On the other hand, the video player ended up being quite complicated, understandably, since it’s the key to the service, so I just made it play a stock video and called it a day.

I also got to know **styled-components**, which is the styling library used for the whole app. Pretty much my go-to library since then, I love it, works flawlessly and it puts you in control at the same time as give you a good way to structure your components.


A very simple but accurate clone of a famous streaming service. Made with React (custom hooks & context), styled-components and Firebase

NSTLopez

NSTLopez

Néstor López

Building software for humans.

Frontend Engineer at NEXIONA

Latests Posts

Hello WorldFirst step

Latests Projects

Vue Covid

Instagram Clone

Netflix Clone

nst.shA personal yet functional URL Shortener

Demon HaremA Helltaker fanpage

Score AnalyzerBlack Desert OCR for war scores