Yousof Sharief, Full-stack Developer in Vancouver, BC, Canada
Yousof Sharief

Full-stack Developer in Vancouver, BC, Canada

Member since September 11, 2017
Yousof is a seasoned full-stack software engineer who specializes in building internal platforms and cloud resources for businesses. In addition to being an expert in JavaScript-based technologies, in both the front and back end, Yousof has a deep interest in building web scrapers.
Yousof is now available for hire

Portfolio

Experience

Location

Vancouver, BC, Canada

Availability

Part-time

Preferred Environment

Linux, Windows, Jira, Bitbucket, Slack, Lean, Agile, Teams, VS Code, GitHub

The most amazing...

...software I've developed is an Arabic text-to-speech converter. It is ranked as the best open-source Arabic text-to-speech software in terms of naturalness.

Employment

  • React Front-end Developer

    2021 - PRESENT
    Synthesis AI (via Toptal)
    • Started building features and fixing bugs in an existing codebase from the first day after knowledge transfer.
    • Created a library that abstracts away the complexities of end-to-end tests and started integrating end-to-end tests into the project.
    • Developed new React hooks to reduce the amount of duplicated code in the codebase.
    Technologies: React, Redux, Puppeteer, Mocha, Jest, TypeScript, CircleCI, Stripe, Material-UI
  • Back-end Developer

    2021 - 2021
    Multiplayer Games Platform (via Toptal)
    • Developed a back-end service for multiplayer games with video calling capability between players.
    • Reconfigured the Socket.IO connection so that the server still recognizes registered clients, even after a server crash.
    • Integrated a Cloud Firestore database with an existing codebase.
    • Refactored an existing codebase for a multiplayer gaming platform and decoupled and modularized the code.
    Technologies: TypeScript, Twilio API, Express.js, Cloud Firestore, Firebase, Socket.IO, Node.js, Mocha, JavaScript, Google Cloud, Socket Communication, WebSockets
  • Front-end Developer

    2020 - 2021
    Motorola Mobility
    • Scraped production-level websites to replicate them locally and performed updates on them.
    • Implemented CSS changes on the fly, using the browser only where code was not convenient for use.
    • Adapted styles to a variety of screen sizes and different browser environments.
    Technologies: Web Scraping, CSS, JavaScript, Chrome Developer Tools, GNU Wget, Sass, Front-end, HTML, SCSS
  • Software Engineer

    2019 - 2020
    Speechmorphing
    • Developed microservices for an Arabic text-to-speech system based on Tacotron neural network architecture.
    • Used Google Cloud Storage to store machine learning models and another GPU server in GCP for training.
    • Developed a controller service that is deployed in Heroku. It turns on and off the GPU server to save money, communicates with the diacritizer, and interfaces with the front-end app.
    • Dockerized the machine learning model training and speech synthesis workflow so that it can work in almost any environment.
    Technologies: Angular, Node.js, Google Cloud Platform (GCP), Python, Google Cloud Storage, Google Compute Engine (GCE), TypeScript, JSON, REST, SCSS, Web Architecture, JavaScript, Google Cloud, Docker, Amazon SQS
  • Full-stack Developer

    2019 - 2019
    Howard Dean Williamson (via Toptal)
    • Developed a crawler that sends log messages in semi real time to the front end using Socket.IO. The crawler has options for filtering URLs and for maximum crawl depth.
    • Crawled websites saved as a zipped archive in an S3 bucket; links to those files are kept in a MongoDB database.
    • Used Angular on the front end to build the admin panel for monitoring crawls.
    Technologies: Socket.IO, MongoDB, AWS S3, Angular, Node.js, Web Scraping, AWS, Amazon Web Services (AWS), Puppeteer, SCSS, TypeScript, JavaScript, Socket Communication, WebSockets
  • Full-stack Developer

    2019 - 2019
    SynergITx (via Toptal)
    • Developed an admin panel that managed cars for auctions. The admin panel included a sophisticated image uploader/sorter and chips.
    • Migrated from an old Python Flask API service to a Node.js service.
    • Migrated third-party data to the system's MongoDB database.
    Technologies: MongoDB, RxJS, AWS S3, TypeScript, Node.js, Angular, Material Design, SCSS, Mocha, Storybook, REST, Jest, CSS, Full-stack, JavaScript
  • Software Engineer

    2019 - 2019
    Production Tool and Die (via Toptal)
    • Built an admin panel with sophisticated client-side state management that enabled a manufacturing company's admins to create and monitor jobs and parts manufactured along with an employee management system.
    • Developed a Node.js API service and handled its deployment as well as the deployment of a MongoDB database.
    • Showcased my UI components with Storybook and built unit tests to test logic in both the front end and back end.
    • Used the Hygen code generator to quickly generate UI components and routes.
    Technologies: MongoDB, Google+ Authentication, NGXS, AWS S3, Jest, RxJS, TypeScript, Node.js, Angular, Code Generators, AWS, Amazon Web Services (AWS), REST, JSON, Mocha, CSS, SCSS, Full-stack, JavaScript, Google Cloud
  • Technical Team Lead

    2017 - 2019
    ThoughtDesign
    • Built a Node.js application that demonstrates an architecture for building Node.js back-end services using the command-query responsibility separation principle and event sourcing.
    • Conducted code reviews for projects built in Angular.
    • Added features and fixed bugs for a web portal used for administrating managed cloud hosting on Amazon AWS and Microsoft Azure.
    • Received recognition as the best team by a client who had previously dealt with failing technical teams.
    • Built new features and maintained an enterprise project while practicing Scrum with other developers.
    • Migrated AngularJS components to Angular for a web portal and added unit tests.
    • Assessed and interviewed senior and junior developers in the hiring process.
    Technologies: Express.js, Sass, MongoDB, JavaScript, Node.js, C#, Webpack, Angular, Scrum, Architecture, Jasmine, SCSS, CSS, Jest, TypeScript, REST, JSON, Technical Leadership
  • Senior Developer

    2017 - 2017
    ThoughtDesign
    • Designed and developed a platform concerned with online buying, selling, and bidding services.
    • Developed and maintained an enterprise solution for which I built Angular components.
    • Migrated and optimized the build and bundling process for an enterprise solution that consisted of three Angular apps.
    Technologies: Node.js, JavaScript, CSS, Sass, Webpack, Angular, TypeScript, Jasmine, SCSS
  • Full-stack Developer

    2016 - 2017
    34ML Logo + Slogan
    • Architected and developed the back end and the admin panel for a platform that featured quizzes for employees in Merck, the multinational pharmaceutical company.
    • Developed an admin panel that featured real-time notifications and different authorization access layers for a reservation system.
    • Wrote sophisticated MongoDB queries for improved query speed.
    Technologies: Socket.IO, Express.js, MongoDB, AngularJS, Node.js, Less, CSS, REST, JSON, JavaScript, Socket Communication, WebSockets
  • Front-end Developer

    2016 - 2016
    34ML Logo + Slogan
    • Maintained and fixed bugs for an admin panel that lets users manage their laundry and dry-cleaning account.
    • Developed a fully functional and responsive admin panel using AngularJS.
    • Learned a variety of technologies in a minimal period of time.
    Technologies: CSS, Angular Material, FullCalendar, AngularJS, Less, JSON, JavaScript

Experience

  • Project MC (Confidential) (Development)

    A platform related to one of the world's largest companies in information technology services. In addition to migrating AngularJS modules to Angular 5, I was involved in adding unit tests along the way. (I used either Jest or Jasmine, but I'm not sure which.)

  • Project CldGt (Confidential) (Development)

    A platform for one of the world's largest companies in information technology services. This platform is used to administer managed cloud hosting on AWS and Microsoft Azure. My role involved Angular front-end app migration, code reviews, feature development, and bug fixes.

  • Bikes Rental (Development)
    https://github.com/youssefsharief/bikes-rental

    A React app for renting bikes along with a Node.js API for which I built reusable React UI components. The app featured two authorization levels and used Redux and Redux Observable for state management. This project led to my certification as a React developer through Toptal's React Academy.

  • CalTrack (Development)
    https://github.com/youssefsharief/CalTrack

    An app that allows users with different authorization access levels to keep track of their daily caloric intake and provides them with useful analytics. I built both a single-page application and the API service along with the database design.

  • Sample App | CQRS and Event Sourcing Node.js Architecture (Development)

    A sample application that demonstrates an architecture for building Node.js back-end services, using the command-query responsibility separation principle and event sourcing.

    Code:
    https://github.com/youssefsharief/nodejs-cqrs-commander
    https://github.com/youssefsharief/nodejs-cqrs-web-api-read-model
    https://github.com/youssefsharief/nodejs-cqrs-event-handlers
    https://github.com/youssefsharief/nodejs-cqrs-e2e

  • Timezones (Development)
    https://github.com/youssefsharief/timezones-admin-panel

    A small demo app that features three authorization levels, including admin, manager, and user. I developed the app using Angular in the front end, Node.js in the back end, and MongoDB as the database.

  • SAS Users (Development)
    https://github.com/youssefsharief/scrape-analyse-and-save-users

    A scraper that scrapes users and saves users that fit a certain criterion in a database. It is built with JSDOM, InversifyJS, and Requests, and it uses various third-party APIs to help analyze the data, such as a gender guesser.

  • Ask.fm Automator (Development)
    https://github.com/youssefsharief/ask.fm-automater

    An automator that allows you to supply a set of users and a set of questions so it can ask those users the given questions. The automator does this while bypassing reCAPTCHA and acting like a real human. (I used an external API for reCAPTCHA.) It is smart enough not to ask a single user the question more than once and not to flood the user with all the questions it has to ask simultaneously. In this way, it does not appear as though a bot is performing the tasks.

  • Arabic Tacotron TTS (Development)

    An end-to-end Arabic TTS system I developed, which turned out to be the best open-source Arabic TTS in terms of natural speech.

    Code: https://github.com/youssefsharief/arabic-tacotron-tts
    Audio Samples: https://youssefsharief.github.io/arabic-tacotron-tts/

  • Reservation System (NDA) (Development)

    A reservation system with real-time notifications and authorization access layers. My role involved building the admin panel and developing the Socket.IO notification system in the back end and the front end.

  • Merck Smart (Development)

    A quiz platform that featured quizzes for employees at Merck, the multinational pharmaceutical company. The system consisted of a Node.js back end, an Angular admin panel, an iOS app, and an Android app.

    I architected and developed the back end and the admin panel. The back end involved multilayered MongoDB aggregate queries, CRUD operations, and authentication for the mobile app and the admin panel. The admin panel involved CRUD operations for various entities and for displaying quiz results and statistics for each quiz category, company department, and user.

  • Donation Places (Development)
    https://github.com/Life-Saving-Team/donation-places-server

    An app that allows the user to add donation places, including drives and places. The donation places are viewed in a map and in a list that provides back-end pagination, filtering, and search.

    Preview URL: https://donation-places-admin.herokuapp.com/map
    Code URL (server): https://github.com/Life-Saving-Team/donation-places-server
    Code URL (client): https://github.com/Life-Saving-Team/donation-places-client

  • Laundry Locker (Development)

    An app that allows users to manage their laundry and dry cleaning accounts. My role involved fixing bugs on the Node.js back end and developing features on the client-side AngularJS app.

  • iGrant (Development)
    https://github.com/youssefsharief/data_access_blockchain_iot

    A solution that allows IoT device owners to save their data securely and grant access to their data without relying on third-party providers. It utilizes blockchain, IPFS, and a hybrid encryption approach (both symmetric and asymmetric encryption). I used the Ethereum smart contract platform and React, web3.js, and Redux on the front end.

  • Blood Donation Real-time Map (Development)
    https://github.com/youssefsharief/blood-donation-real-time-map

    A Node.js back-end service and an Angular app that allows donors to register by clicking on their location on a map with search and location functionality. The map adds, deletes, or updates a donor's location, which is reflected in real time without the need for page refresh for other observers, including donors and patients.

  • Smoott (Development)

    A platform that is concerned with online buying, selling, and bidding services. My role involved building Angular views, adding unit and end-to-end tests, and providing functionality through a mock API.

  • Infer Commit Type (Development)

    A research exploration I performed during my master's at UBC (not a project). This research involved utilizing NLP to infer whether a commit was a bug fix by using metadata such as the commit message. I used a GraphQL API.

  • COVID-19 Alert System (Development)

    A system that allows users to register for a particular building and find out if anyone in the building is infected with COVID-19. I used Airtable as a database and Twilio for phone verification and as a means for admins to change a building status. I built this with React and Redux in the front end and Node.js for the back end.

  • Medical Data DApp (Development)
    https://github.com/youssefsharief/medical_data_dapp

    A decentralized React app that allows patients to share their private medical data securely with selected doctors without the need for cloud storage. It depends on the blockchain (with Ethereum smart contract), IPFS, and a hybrid encryption approach (both symmetric and asymmetric encryption). Besides React, I used Redux on the front end for state management and web3.js for interacting with Ethereum nodes.

  • Ask.fm Chrome Extension (Development)

    A Chrome extension that calls a database to check the status of Ask.fm users when visiting their Ask.fm profile page. I used React for the UI and tools like crx-hotreload for a better developer experience.

  • React YouTube Course (Development)
    https://github.com/youssefsharief/academy-react-app

    Two React courses that I provided on YouTube. One is in Arabic and the other is in English. The courses explain the basic concepts of React and Redux. Please refer to the GitHub URL for the links to the YouTube playlists.

  • JS Static Analyzers (Development)
    https://github.com/youssefsharief/bug-dataset

    A research exploration I performed during my master's at UBC (not a project). In this research, we wanted to determine if we could detect fixed bugs in open-source projects using static analyzers. I automated the process of cloning GitHub repositories, performing diffs along the repository commits, extracting and saving affected files for each commit, and performing linting operations on those files.

  • Tacola App (Development)

    Microservices that deploy an Arabic text-to-speech system based on Tacotron neural network architecture. The system includes these four microservices:

    1. An Angular app deployed on Zeit.
    2. A synthesizer deployed on a server that has a GPU in Google Cloud Platform (GCP).
    3. An Arabic diacritizer deployed on Heroku.
    4. A controller deployed in Heroku that turns on and off the GPU server, communicates with the diacritizer, and interfaces with the front-end app.

    I also used Google Cloud Storage to store machine learning models and another GPU server in GCP for training.

  • Is It Time to Use Node 8? (Publication)
    Node 8 has brought significant performance and feature upgrades. Should you use it on new projects? Is it worth upgrading existing codebases? In this article, Toptal Freelance JavaScript Developer Youssef Sherif gives a tour of Node 8's biggest changes and what they mean for your project.

Skills

  • Languages

    HTML, HTML5, ECMAScript (ES6), TypeScript, CSS, JavaScript, Solidity, SCSS, Sass, Python, GraphQL, Go, C#, Less
  • Frameworks

    Jasmine, Jest, Express.js, Angular, Redux, Cypress.io, Flask, JSON Web Tokens (JWT), Bootstrap, Chrome, Angular Material, Swagger, OAuth 2, AngularJS, .NET, Material-UI
  • Libraries/APIs

    React Redux, REST APIs, OpenID, React, Node.js, Facebook API, Google API, Puppeteer, NgRx, Social Media APIs, jQuery, GatsbyJS, Twilio API, ArcGIS API 4, Socket.IO, RxJS, Firebase Web SDK, React Router, Formik, Redux Observable, Web3.js, D3.js, Stripe, MobX
  • Tools

    GitHub, JSX, Chrome Developer Tools, Redux Thunk, Git, Mocha, MongoDB Atlas, FullCalendar, Google Compute Engine (GCE), Bitbucket, GNU Wget, Jira, Slack, VS Code, Gulp.js, Karma, Webpack, GIS, CircleCI, Amazon SQS
  • Paradigms

    MEAN Stack, Web Architecture, REST, Unit Testing, Automation Testing, E2E Testing, RESTful Development, Test-driven Development (TDD), Agile, Responsive Layout, Lambda Architecture, Object-oriented Programming (OOP), Microservices, Microservices Architecture, Scrum, Continuous Delivery (CD), Continuous Integration (CI), Page Object Model (POM)
  • Platforms

    AWS Lambda, Google Cloud Platform (GCP), Heroku, Twilio, Blockchain, Docker, Firebase, Ethereum, Linux, Windows, Amazon Web Services (AWS), Azure, Kubernetes
  • Storage

    JSON, MongoDB, Google Cloud, Google Cloud Storage, Cloud Firestore, Redis, AWS S3, AWS DynamoDB
  • Industry Expertise

    Web Development
  • Other

    APIs, Full-stack, Cloud Services, Web Scraping, Front-end, WebSockets, API Design, NGXS, Socket Communication, Browser Automation, Computer Engineering, Engineering, Back-end, UI, Software Engineering, RESTful APIs, Architecture, Software Development, Vercel, Airtable, CAPTCHA, AWS API Gateway, Storybooks, Chrome Extensions, AWS, Mapping, Technical Leadership, Serverless, Graphical User Interface (GUI), Ethereum Smart Contracts, Smart Contracts, Web Extensions, Google+ Authentication, Authentication, Messaging Frameworks, Material Design, Code Generators, Quality Assurance (QA), Webhooks, Encryption, IPFS, Static Analysis, Lean, Teams, Computer Science, Storybook, JSDOM, Firebase Hosting, Google Cloud Functions, Decentralized Applications

Education

  • Master of Applied Science Degree in Electrical and Computer Engineering
    2019 - 2021
    University of British Columbia - Vancouver, BC, Canada
  • Bachelor's Degree in Petroleum Engineering
    2010 - 2015
    American University in Cairo - Cairo, Egypt

Certifications

  • Toptal React Academy Graduate
    DECEMBER 2018 - PRESENT
    Toptal, LLC

To view more profiles

Join Toptal
Share it with others