DEV Community: Gabriel Leonte

Stories - Share a love story, tell him/her anonymous and earn money using Web Monetization API and COIL! (Submission)

Gabriel Leonte — Fri, 29 May 2020 11:11:19 +0000

What I built

Stories is a web application that allows users to sent anonymous letters to a loved person. The best part of using our platform is the fact that everybody can earn moneys using Web Monetization API. The Platform Provides free content and premium content based on a COIL Subscription (5$ per month).

Submission Category:

Exciting Experiments and Creative Catalyst

Demo

Go to Stories

Link to Code

Client
Firebase Functions

How I built it

The slack is a composite between Firebase and NuxtJS and Send Grid API
We're using Firebase Hosting (for demo), Firebase Real Time Database to store every public post, and Firebase Functions for Send Grid API to deliver each amazing love letter.

Day 1 started with another kind of idea, first project was a way that photographers can monetize their own photos, but after around 2 weeks while scrolling through Coil web page i just realized that this kind of project already exists and its Imgur Emerald.

Day 20: After i found out that Imgur Emerald already exists, I've decided to build this love story project, because we're living a pandemic time, and the love expression has gone low because of the social distancing, so its the perfect time to write a love letter to the one we love. Why anonymous ? Well, you still have the opportunity to tell who you are, but let's get our loved ones more active and challenge them to find out who is behind that magic letter.

Submission Day: Here we are with a working application that is ready to deliver awesome letters to our loved ones. This platform still has a lot of potential, i would like to make in production, but first of all, i need some teammates to do it, add email scheduling function, filtering functions, improve the UI and UX, and many more awesome things.

Additional Resources/Info

Screen Shots

#twiliohackathon #WeHelp - A platform made for everyone in the town (Submission)

Gabriel Leonte — Wed, 29 Apr 2020 16:19:48 +0000

What I built

We help is a platform that connects local citizens and volunteers, with the goal of helping them getting necessary products from local markets with the help of volunteers

How it works?

This application has the backend built in NodeJS using Sequelize as ORM Manager, ExpressJS as handle server for Twilio API, and Socket.IO as client handle server. The frontend is entirely built in VueJS, CSS and Bulma.

How it works for the local citizens?

A local citizen can call the free phone number provided by local authority, and say his requirements, with some contact data like his name, street, etc. 2-3 volunteers would have to forward his requirements to the volunteers from the field, with, who have a local budget and maybe a car. The field volunteer will receive through SMS Volunteer Delivery System, the contact data (contact name, phone number) + a little description, and his mission would be to contact the local citizen and provide his requirements right to his door.

Demo Link

We Help

Link to Code

Github Repo

Test Account

Phone: +15014380799
Password: 1234

Free USA Call Number (you may test it with skype)

Number: +18554101733

Register Codes (Only USA Numbers)

E6LS-CZQ6-17I2 S2LP-JJY9-14C9 A5YH-YKJ1-38G5 J3OP-PAW3-62V1 I7NV-TZI1-55H7 L1TE-DBP2-41B1 L1VZ-GYH5-43Y2 H9XL-YWK1-61Y8 D8CP-OCA6-14J8 K6IV-KDM3-29X9 D8HE-FAD4-77Y3 R8XV-MBF5-23T4 B1SU-GAQ1-42R4 K1AK-PFW6-82W3 U1VP-GMB1-57H5 C5UT-XDR5-74W4 M5TB-FMI3-32X6 V4AF-XCT7-88L8

!Reset password may now work because the phone number may be in a wrong format or the Twilio api is replying a 21308 ERROR

How I built it (what's the stack? did I run into issues or discover something new along the way?)

Well, actually twilio api was something new for me, and i can say that i am lucky. The last month was a productive one for me.

I've started from the idea that such a country like Romania, has a lot of small villages where a lot of population are 65+ years, so a platform like mine may be a essential one.

As a conclusion after 1 month, building this was not only a Hackathon project, it was a fun project, because while doing this i've experience so much things, from math homeworks to beautiful README fashion models 😆
Just check my commits name Right Here 😸

Additional Resources/Info

GitHub's repository template functionality
Ilustrations from Undraw.co
Bulma Framework

How I learned from my mistakes - JavaScript Mobile App

Gabriel Leonte — Sun, 26 Jan 2020 18:14:18 +0000

So, in the last 4 days. I have been working on a project for a contest in Romania.

My competition idea says something like that:

I have to build a mobile application for a small town (~30K peoples), that will let a user, to temporarily hire another user, to do different kinds of jobs, like bringing you food, walk the dog, do the shopping, babysitting, bringing the clothes to the laundry, and other activities that require a small amount of movement

To build this mobile application, I should use Java for the mobile application and NodeJS for the back-end, right? Yes! You are right! But I love JavaScript!

So I went with JavaScript for back-end and NuxtJS (first) + Cordova for IOS and Android applications!

The Beginning

The project started with a simple back-end structure, written in Node.JS and a NuxtJS Project.

After finishing the design for some basic screens (Splash, login, register),
I've built the HTML and CSS for the Splash screen as a component inside the NuxtJS project, then inside the layout/default.vue, I wrote a script that switches a variable from true to false.

Using v-if and v-else, I was able to show my Splash for 3000 ms, then the Nuxt router view.
Everything was perfect! For now...

Meanwhile, I've created a Cordova project and generate the first dist/ folder. After moving the generated files from dist/ inside the www/ folder of the Cordova project, I added Android as the platform and build the first demo.

First Problem

I ran it and surprise the splash screen wasn't working

First, I thought Cordova wasn't running JavaScript because of some kind of option. I was lazy and I have not tried to check the documentation of both, only after 6 hours of trying different things, when I gave up on it, for the next day.

The next day I gave up on NuxtJS after finding some Github issue about that (which I wasn't able to find the day before, because of being tired), which tells you NuxtJS is not compatible with Cordova.

How I Solved it?

I used just VueJS instead of NuxtJS, which I chose first just because I am more familiar with it.

The Second Problem

I've built a new project using Vue-CLI and Cordova. After that, I've built again the Splash screen and this time, the Login screen.

Meanwhile, I integrated vue-route-middleware to help me build easier middlewares in an elegant style, and set the mode to history.

After that, I've built a middleware that redirects to /login if a state variable is empty.

And then I've repeated the app-building process.

Well, now redirecting was not working! The App punched me in the face, again. I gave up on it. The next day I tried Ionic with React, and here I failed, because the docs weren't clear about the status bar plugin... that was another problem!

How I Solved it?

That night I found a Github issue to the same problem that I had with the VueJS + Cordova pack, and that issue topic was talking about the fact that Cordova is not able to redirect a Vue build application, that is using mode:"history"

Conclusion?

You should always check for a solution online, do not waste your time. Some frameworks things might not be documented!
It is my first mobile app project using VueJS and Cordova, and I learned a lot from basic things.
Always you should learn from your mistakes.
You should always keep learning, doing what you love to do
Remember FAIL means "First Attempt Into Learning!"

About the project, if anybody is curious it will be open source in the next months on my Github 😀

Technologies that makes JavaScript a beautiful programming language!

Gabriel Leonte — Mon, 13 Jan 2020 17:31:11 +0000

Everybody should know that JavaScript is not just a language used for web pages. Below you are going to find some interesting JavaScript libraries :D

1. ExpressJS

Express its the simplest way to create a web application. Built for Web Apps and API's, it is easy to learn, and provides a huge set of middleware with multiple scopes. Here is a simple Express app.

import express from 'express';

const app = express(); // create a new express object
const port = 3000; // declare express server port

// create a get http route
app.get('/', (req, res) =>{
// Write on localhost:3000/ the string below
   res.send("Hello dev.to user :D I hope you will have a greate and productive day"); 
});

// listen the server on the declared port
app.listen(port, () => {
   console.log(`The most simple and beautiful express app is live on port ${port}`);
});

And this is a simple Express web application!

So let's talk about some Express middlewares.

A. Passport

If you want to build a web app with an authentication system. Passport its the way to go. It uses the concept of strategies to authenticate requests.
Strategies can range from verifying username and password credentials, delegated authentication using OAuth (for example, via Facebook or Google), or federated authentication using OpenID.

B. CORS

Cross-origin requests are made using the standard HTTP request methods. Most servers will allow GET requests, meaning they will allow resources from external origins to read their assets. HTTP request methods like PATCH, PUT, or DELETE, may be denied to prevent malicious behavior. For example, many servers would not allow a request to change their assets.

C. Body Parser

Body Parser parses incoming request bodies in a middleware before your handlers, available under the req.body property.

D. Helmet

Helmet its a set of middleware, built to make your awesome app secure, against different vulnerabilities.

And more, each of them with their unique scope, which is that to make your web application/api the best one.

For more, check out the guys from freeCodeCamp and ExpressJS Documentation

2. ElectronJS

Do you think that building a UI executable application, it impossible for NodeJS? You are wrong my friend! Electron its the way to go!

So let's pretend that you have an index.html file, with some information.

// index.js
const { app, BrowserWindow } = require('electron')

function createWindow () {
  // Create the browser window.
  let win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    }
  })

  // and load the index.html of the app.
  win.loadFile('index.html')
}

app.on('ready', createWindow)

Using the code above, you can build an executable application for any desktop operating system (linux, windows and macos).

Electron comes with apis that allows you to integrate functions inside the html files.
ipcMain is a event emitter build to emit events from the html files and handle it inside the back-end.

Electron.JS can be used with static html files or frameworks like Vue, React or Angular.

3. VueJS

VueJS is a JavaScript framework for building user interfaces and single-page applications. It was created by Evan You, and is maintained by him and the rest of the active core team members.

Virtual DOM

VueJS makes the use of virtual DOM, which is also used by other frameworks such as React, Ember, etc. The changes are not made to the DOM, instead a replica of the DOM is created which is present in the form of JavaScript data structures.

Data Binding

The data binding feature helps manipulate or assign values to HTML attributes, change the style, assign classes with the help of binding directive called v-bind available with VueJS.

Components

Components are one of the important features of VueJS that helps create custom elements, which can be reused in HTML.

Event Handling

v-on is the attribute added to the DOM elements to listen to the events in VueJS.

Computed properties

This is one of the important features of VueJS. It helps to listen to the changes made to the UI elements and performs the necessary calculations. There is no need of additional coding for this.

Lightweight

VueJS is very lightweight framework, and also the performance is very fast.

4. TensorFlow

Developed by Google, TensorFlow is a javascript library for deploying and training models using Machine Learning in the Browser or NodeJS.

Find more here!

5. Native VueJS

Vue Native is based on VueJS and is a framework to build cross platform native mobile apps using JavaScript.
Vue native core is designed to connect React and Vue, which help you run Vue in React. But for more about this beautiful framework you can find here

6. Async, Await and promises

I left the gold at the end. In the past, javascript had a big problem, you may heared about callback hell, a callback hell is something like below:

const checkUser= function(username, password, callback){
   dataBase.checkUser(username, password, (error, userInfo) => {
       if (error) {
           callback(error)
       }else{
           dataBase.getRoles(username, (error, roles) => {
               if (error){
                   callback(error)
               }else {
                   dataBase.getAccess(username, (error) => {
                       if (error){
                           callback(error);
                       }else{
                           callback(null, userInfo, roles);
                       }
                   })
               }
           })
       }
   })
};

Is it easy to read? I don't think so!
To avoid it, you have to write it using async await and promises

const checkUser= async function(username, password){
   try {
       const userInfo = await dataBase.checkUser(username, password);
       const rolesInfo = await dataBase.getRoles(userInfo);
       const logStatus = await dataBase.getAccess(userInfo);
       return userInfo;
   }catch (e){
       //handle errors as needed
   }
};

How to convert a callback to a promise? That is simple

database.get(data, (err, data) => {
    if (err) throw new Error(err);
    else console.log(data);
});

converted to a promise looks like that

const get = (data) => {
    return new Promise((resolve, reject) => {
        database.get(data, (err, data) => {
            if (err) reject(err);
            else resolve(data);
        });
    });
}

Is is easy to read now? I think so!

So just a small recap

The JavaScript community its big, and beautiful. Each of these frameworks comes with their unique features, that makes JavaScript a language for almost every kind of operation. If you do not have any experience with it. You should try. I bet that you will love it.

Have a nice and productive day guys!

The chain - Just a simple way to integrate a blockchain

Gabriel Leonte — Sat, 21 Dec 2019 19:45:41 +0000

So, let's talk about The chain. The chain its a npm package made for anyone interested to build a Node.JS Blockchain App.

How it started?

Some months ago, i've been looking for a blockchain package, something that can help me build a blockchain based social media.
So i have been searching the hole npm for one, that can create a simple blockchain database in less then 5 minutes, which can create new block at a custom time interval, and also provide a simple API to make my life easier.

Why The Chain instead of a simple database

The Chain its not only a sqlite3 database with some default table, The Chain its a package that comes with ways that must help the developer reduce the time to build his awesome blockchain application.

Features

Easy to integrate to existing apps
A very customizable chain
Custom block time
Block verify function
Local database

Incoming Features!

Node system - this will let you sync the chain between multiple nodes
Multiple extract data features
Block confirmation system
SocketIO API
Documentation

Installation

The Chain requires Node.js v10 (only tested) to run.

Install The Chain...

$ npm install thechain --save

A simple demo

const Chain = require("thechain");
const blockchain = new Chain(path, port, blockTime); // or new Chain() for a fast blockchain

const block_one = blockchain.getBlock(1);
console.log(block_one); // this will print the genesis block

Default params:

const path = "./chain/chain.db3";
const port = 4444;
const blocktime =  60000; // 1 minute blocktime in ms

Methods

Verify the Chain

blockchain.verifyChain(); // No return

This method will be initially called to check every block, you can use it whenever you want, but warning, this method will stop your script until every block is checked.

Create new Block (WARNING! Better to set a block time and never use this method!)

blockchain.createNewBlock(); // No return

This method will create a new block when it is called, the block data will be the data contained in the data object at the block time.

Data push

const Object = ["test1", "test2"];
blockchain.push(Object); // No return

This method will push data into the block, and the block will be generated with the pushed data.

Get last 100 blocks

const last100blocks = blockchain.getLast100();
console.log(last100blocks);

This method will return the last 100 blocks.

Get x block

const blockNumber = 2; // Block number id
const block = blockchain.getBlock(blockNumber);
console.log(block); // This will print the block data

This method will return the block with x number.

Development

Want to contribute? Great! Start by telling us your wishes!

License

The chain is licensed as MIT

Free Blockchain Software, DAM Yeah!

Backend Node.JS developer Portofolio

Gabriel Leonte — Wed, 04 Sep 2019 11:04:42 +0000

Hello dev.to community, i have been thinking about finding a job as Backend Node.JS developer, and here is my question, what should a backend portofolio have? Any ideas of "server-side" projects?

Glaciary.JS - The best, secure, and fast way to build your next API

Gabriel Leonte — Mon, 02 Sep 2019 06:53:55 +0000

Glaciary.

The Rest API framework based on Express.JS and Socket.IO

Get Started

Make sure you have npx installed (npx is shipped by default since npm 5.2.0)

npx create-glaciary-app <my-project>

Or starting with npm v6.1 you can do:

npm init glaciary-app <my-project>

Or with yarn:

yarn create glaciary-app <my-project>

Features 🔥

A simple way to setup a new route or event
Configurable with a config.glaciary.js file
Configurable default HTTP route with defaults.glaciary.js
Configurable default Socket.IO Event with defaults.glaciary.js
Easy to setup SSL Certificate with defaults.glaciary.js (still testing)
Simple Debug system

Incoming Features 😏

Plugins
Global Store Array
Local SQLITE3 database

If you want to contribute with any idea, you're welcome to share it with us 😄

DEV Community: Gabriel Leonte

Stories - Share a love story, tell him/her anonymous and earn money using Web Monetization API and COIL! (Submission)

What I built

Submission Category:

Demo

Link to Code

How I built it

Additional Resources/Info

Screen Shots

#twiliohackathon #WeHelp - A platform made for everyone in the town (Submission)

What I built

How it works?

How it works for the local citizens?

Demo Link

Link to Code

Test Account

Free USA Call Number (you may test it with skype)

Register Codes (Only USA Numbers)

How I built it (what's the stack? did I run into issues or discover something new along the way?)

Additional Resources/Info

How I learned from my mistakes - JavaScript Mobile App

The Beginning

First Problem

How I Solved it?

The Second Problem

How I Solved it?

Conclusion?

Technologies that makes JavaScript a beautiful programming language!

1. ExpressJS

A. Passport

B. CORS

C. Body Parser

D. Helmet

2. ElectronJS

3. VueJS

Virtual DOM

Data Binding

Components

Event Handling

Computed properties

Lightweight

4. TensorFlow

5. Native VueJS

6. Async, Await and promises

So just a small recap

The chain - Just a simple way to integrate a blockchain

How it started?

Why The Chain instead of a simple database

Features

Incoming Features!

Installation

Methods

Verify the Chain

Create new Block (WARNING! Better to set a block time and never use this method!)

Data push

Get last 100 blocks

Get x block

Development

License

Backend Node.JS developer Portofolio

Glaciary.JS - The best, secure, and fast way to build your next API

Glaciary.

Get Started

Links

Features 🔥

Incoming Features 😏