Portfolio

Projects I have done and the technologies I have used during my web development career

Open source

Python backend demo

Source: https://github.com/lishine/python-graphql-typescript

Life game

Source: https://github.com/lishine/life-game
Codesandbox: https://codesandbox.io/s/github/lishine/life-game/tree/master

Unsplash search

Source: https://github.com/lishine/unsplash-search
Codesandbox: https://codesandbox.io/s/github/lishine/unsplash-search/tree/dev

This site

Source: https://github.com/lishine/lishine.github.io
  • •Static Next.js + React
  • •Deployed to Github-pages
  • •SCSS, Emotion, Styled-System
  • •MDX blog template
  • •Responsive & adaptive
  • •SEO optimized
  • •Latest CSS solutions: Flex, Grid, custom and logical CSS properties
  • •Lighthouse audit ~100
  • •Page transitions

Mobx React hooks form

Source: https://github.com/lishine/mobx-hooks-form
  • •Typescript
  • •Mobx
  • •React context
  • •React hooks

Cypress end-to-end testing tips

Source: https://github.com/lishine/cypress-practices

Manage street sign devices

Built from the ground up
Source: https://github.com/lishine/demo2
Demo: https://sbs2.golden-minutes.com
Manage CRUD users
Manage CRUD devices
Live device alerts
Control device
Manage permissions

API

  • ·Built as a services - serverless ready
  • ·SMS with Nexmo API
  • ·Auth with httpOnly cookie in JWT and SMS
  • ·Websockets server
  • ·Websockets test client in Codesandbox
  • ·Device Auth with Private/Public keys with libsodium

Deploy

  • ·Digital ocean
  • ·Everything in docker containers
  • ·Traefik reverse proxy + Letsencrypt
  • ·Single command deploy to staging/production
  • ·Single command Hasura console through ssh
  • ·Single command DB fill through ssh
  • ·Single command logs through ssh

DB

  • ·Hasura GraphQL engine
  • ·Migrations
  • ·Permissions
  • ·Postgress

Client

  • ·Next.js SSR dynamic deploy
  • ·SCSS, imported Bootstrap, Emotion, Styled-System
  • ·React state management: Easy-Peasy (Redux + React-hooks)
  • ·Design - currently, by self consideration
  • ·Latest CSS tech: Flex, Grid, custom and logical CSS properties
Manage street sign devices - React Next.js SSR web app, Docker backend, Graphql Postgres db, Headless CMS
Manage street sign devices - React Next.js SSR web app, Docker backend, Graphql Postgres db, Headless CMS
Manage street sign devices - React Next.js SSR web app, Docker backend, Graphql Postgres db, Headless CMS
Manage street sign devices - React Next.js SSR web app, Docker backend, Graphql Postgres db, Headless CMS
Manage street sign devices - React Next.js SSR web app, Docker backend, Graphql Postgres db, Headless CMS
Manage street sign devices - React Next.js SSR web app, Docker backend, Graphql Postgres db, Headless CMS
Manage street sign devices - React Next.js SSR web app, Docker backend, Graphql Postgres db, Headless CMS
Manage street sign devices - React Next.js SSR web app, Docker backend, Graphql Postgres db, Headless CMS

Dance video courses

Built from the ground up
Source: https://github.com/lishine/demo1
Demo: https://dance-salsa.now.sh
Landing page
Blog
Buy course
Learn course
Manage content

API

  • ·Serverless services deployed to Zeit Now v2 on top of AWS lambda
  • ·JWT in cookie authentication
  • ·Email service with MailGun API, MJML templates

Emails generator

  • ·React rendering
  • ·MJML markup
  • ·DOT templates

Content management

DB

  • ·Hasura GraphQL engine
  • ·Docker on Heroku
  • ·Migrations
  • ·Permissions
  • ·Postgress

Client

  • ·Next.js SSR dynamic deploy
  • ·SEO optimized
  • ·SCSS, imported Bootstrap, Emotion, Styled-System
  • ·React state management: Easy-Peasy (Redux + React-hooks)
  • ·PayPal API
  • ·Design implemented according to design requirements given in Invision
  • ·Responsive & adaptive design to 4 types of devices
  • ·Latest CSS qualities: Flex, Grid, CSS custom and logical properties
Dance video courses - React Next.js SSR web app, Serverless backend, Graphql Postgres db, Headless CMS
Dance video courses - React Next.js SSR web app, Serverless backend, Graphql Postgres db, Headless CMS
Dance video courses - React Next.js SSR web app, Serverless backend, Graphql Postgres db, Headless CMS
Dance video courses - React Next.js SSR web app, Serverless backend, Graphql Postgres db, Headless CMS
Dance video courses - React Next.js SSR web app, Serverless backend, Graphql Postgres db, Headless CMS
Dance video courses - React Next.js SSR web app, Serverless backend, Graphql Postgres db, Headless CMS
Dance video courses - React Next.js SSR web app, Serverless backend, Graphql Postgres db, Headless CMS
Dance video courses - React Next.js SSR web app, Serverless backend, Graphql Postgres db, Headless CMS
Dance video courses - React Next.js SSR web app, Serverless backend, Graphql Postgres db, Headless CMS
Dance video courses - React Next.js SSR web app, Serverless backend, Graphql Postgres db, Headless CMS
Dance video courses - React Next.js SSR web app, Serverless backend, Graphql Postgres db, Headless CMS
Dance video courses - React Next.js SSR web app, Serverless backend, Graphql Postgres db, Headless CMS

Overtok - users engagement and conversion

https://overtok.com

Working in a team

  • ·Javascript web client, which is embedded into client website
  • ·Clojurescript web admin panel (see picture)
  • ·Mobile client built with Clojuresript and React-Native
  • ·Serverless backend

Technologies being used

  • ·Javascript
  • ·React
  • ·React-Native
  • ·State management: Redux, Parket, React-easy-state
  • ·Clojuscript + Reframe
  • ·AWS lambda, Serverless framework
  • ·Git, Jira, Slack
Overtok - users engagement and conversion - web React app, mobile React Native app, AWS Lambda backend, Clojurescript web admin client

Manage barcodes for users

Built from the ground up
Source - https://github.com/lishine/login-full-stack

Technologies being used

  • ·Webpack 4
  • ·React
  • ·Router - redux-saga-first-router
  • ·Client state management - Redux
  • ·Redux middleware - Redux-Saga
  • ·Client state management - React-easy-state
  • ·CSS in Js - Styled components
  • ·Server - Express
  • ·DB - PostgreSQL
  • ·Data mapper - Massive

Features

  • ·JWT authentication with emails
  • ·Forms
  • ·User profile

System to manage internet-connected fire hydrants

Built from the ground up
Demo: https://app.hydrant-system.com
Source(mobile Typescript): https://gitlab.com/hydrantech/typed
Show EventsManage hydrantsManage users

Server

Built with Meteor

MongoDB

Client

Built with React + React-router

Notifications with Service-Workers

Show hydrants on a map

Mobile

Built with React-Native and MobX

Converted to Typescript and MobX-State-Tree

Notifications

Geolocation

Barcode Scanning

System to manage internet-connected fire hydrants - web React app
System to manage internet-connected fire hydrants - web React app
System to manage internet-connected fire hydrants - web React app
System to manage internet-connected fire hydrants - web React app
System to manage internet-connected fire hydrants - web React app
System to manage internet-connected fire hydrants - web React app
System to manage internet-connected fire hydrants - web React app
System to manage internet-connected fire hydrants - web React app
System to manage internet-connected fire hydrants - web React app
System to manage internet-connected fire hydrants - web React app
System to manage internet-connected fire hydrants - mobile React Native app
System to manage internet-connected fire hydrants - mobile React Native app
System to manage internet-connected fire hydrants - mobile React Native app
System to manage internet-connected fire hydrants - mobile React Native app
System to manage internet-connected fire hydrants - mobile React Native app
System to manage internet-connected fire hydrants - mobile React Native app
System to manage internet-connected fire hydrants - mobile React Native app
System to manage internet-connected fire hydrants - mobile React Native app

My first React project

While working as an Electronics Engineer, I was assigned to develop a Laboratory experiments management software.

  • ·Instead of building the usual desktop solution using Delphi/Vb/C#, I turned to develop a distributed system which will be available through a client anywhere
  • ·Meteor enabled me to get started easily and build a Full-Stack solution
  • ·React made me excited to write a client structured with components
  • ·React is the main reason I started web-coding.
  • ·I was able to take advantage of community-built components, this opportunity was the main reason to ditch the desktop way of development
github logogitlab logolinkedin logo