An open API service indexing awesome lists of open source software.

https://github.com/localjo/code-samples

Links to samples of my work
https://github.com/localjo/code-samples

Last synced: 11 days ago
JSON representation

Links to samples of my work

Awesome Lists containing this project

README

        

# Code Samples

Here are some samples of my work including live demos, source code and a list of technologies featured.

## Open Source Projects

| Project |

Links
|
Technologies
|
|:---|:---:|:---|
|

NASA Worldview

An app for browsing full-resolution, global, daily satellite images. Supports environmental science, humanitarian response, climate research and time-critical applications such as wildfire management, air quality and more. | [![Screenshot](./screenshots/nasa-worldview.png)](https://worldview.earthdata.nasa.gov/)
[Live App](https://worldview.earthdata.nasa.gov/) • [My Contributions](https://github.com/nasa-gibs/worldview/pulls?utf8=%E2%9C%93&q=+is%3Apr+author%3Alocaljo+)| ![JavaScript](https://img.shields.io/badge/javascript-339933?logo=javascript&style=for-the-badge&logoColor=white) ![Python](https://img.shields.io/badge/python-3776AB?logo=python&style=for-the-badge&logoColor=white) ![jQuery](https://img.shields.io/badge/jQuery-0769AD?logo=jQuery&style=for-the-badge&logoColor=white) ![React](https://img.shields.io/badge/react-61DAFB?logo=react&style=for-the-badge&logoColor=white) ![MapBox](https://img.shields.io/badge/mapbox--gl-333333?logo=mapbox&style=for-the-badge&logoColor=white) ![Webpack](https://img.shields.io/badge/webpack-29ABE2?logo=webpack&style=for-the-badge&logoColor=white) ![Babel](https://img.shields.io/badge/babel-F9DC3E?logo=babel&style=for-the-badge&logoColor=white) ![Bash](https://img.shields.io/badge/bash-333333?logo=gnu-bash&style=for-the-badge&logoColor=white) ![Sass](https://img.shields.io/badge/sass-CC6699?logo=sass&style=for-the-badge&logoColor=white) ![ESLint](https://img.shields.io/badge/eslint-4B32C3?logo=eslint&style=for-the-badge&logoColor=white) ![Docker](https://img.shields.io/badge/docker-2496ED?logo=docker&style=for-the-badge&logoColor=white) ![Selenium](https://img.shields.io/badge/Selenium-grey?style=for-the-badge) ![Browserstack](https://img.shields.io/badge/browserstack-grey?style=for-the-badge) ![Express](https://img.shields.io/badge/express-grey?style=for-the-badge) ![lodash](https://img.shields.io/badge/lodash-grey?style=for-the-badge) ![OpenLayers](https://img.shields.io/badge/openlayers-grey?style=for-the-badge) ![NASA GIBS API](https://img.shields.io/badge/nasa--gibs--api-grey?style=for-the-badge) |
|

Humanitarian OpenStreetMap MapCampaigner

An app for managing and monitoring field data collection campaigns in OpenStreetMap. | [![Screenshot](./screenshots/humanitarian-osm-mapcampaigner.png)](https://campaigns.hotosm.org/)
[Live](https://campaigns.hotosm.org/) • [Contributions](https://github.com/hotosm/MapCampaigner/pulls?utf8=%E2%9C%93&q=is%3Apr+author%3Alocaljo+) • [Blog Post](https://www.hotosm.org/updates/mapcampaigner-gets-new-look-and-features-for-2020/) |![JavaScript](https://img.shields.io/badge/javascript-339933?logo=javascript&style=for-the-badge&logoColor=white) ![Python](https://img.shields.io/badge/python-3776AB?logo=python&style=for-the-badge&logoColor=white) ![jQuery](https://img.shields.io/badge/jQuery-0769AD?logo=jQuery&style=for-the-badge&logoColor=white) ![Flask](https://img.shields.io/badge/flask-000000?logo=flask&style=for-the-badge&logoColor=white) ![CSS](https://img.shields.io/badge/css-F43059?logo=css-wizardry&style=for-the-badge&logoColor=white) ![HTML](https://img.shields.io/badge/html-E34F26?logo=html5&style=for-the-badge&logoColor=white) ![OpenStreetMap API](https://img.shields.io/badge/openstreetmap--api-7EBC6F?logo=openstreetmap&style=for-the-badge&logoColor=white) |
|

Webpack Shell Loader

A Webpack loader that I built and maintain for running arbitrary shell scripts when loading files. | [![Screenshot](./screenshots/webpack-shell-loader.png)](https://www.npmjs.com/package/shell-loader)
[Code Repo](https://github.com/localjo/shell-loader) • [NPM Package](https://www.npmjs.com/package/shell-loader) |![JavaScript](https://img.shields.io/badge/javascript-339933?logo=javascript&style=for-the-badge&logoColor=white) ![Webpack](https://img.shields.io/badge/webpack-29ABE2?logo=webpack&style=for-the-badge&logoColor=white) ![Bash](https://img.shields.io/badge/bash-333333?logo=gnu-bash&style=for-the-badge&logoColor=white) |
|

Quotable WordPress Plugin

A five-star WordPress plugin I built and maintain for sharing quotes on Twitter. | [![Screenshot](./screenshots/wordpress-quotable.png)](https://wordpress.org/plugins/quotable/)
[Code Repo](https://github.com/localjo/quotable-wp) • [WordPress Plugin Directory](https://wordpress.org/plugins/quotable/)| ![WordPress](https://img.shields.io/badge/wordpress-21759B?logo=wordpress&style=for-the-badge&logoColor=white) ![PHP](https://img.shields.io/badge/php-777BB4?logo=php&style=for-the-badge&logoColor=white) ![JavaScript](https://img.shields.io/badge/javascript-339933?logo=javascript&style=for-the-badge&logoColor=white) ![CSS](https://img.shields.io/badge/css-F43059?logo=css-wizardry&style=for-the-badge&logoColor=white) ![HTML](https://img.shields.io/badge/html-E34F26?logo=html5&style=for-the-badge&logoColor=white) |
| |                                                           |                                                                    |

## Demos

| Project | Year |

Links
|
Technologies
|
|:---|:---:|:---:|:---|
|

Tater 🥔

A React plugin to add emoji markers and annotations to any element on a page. With algorithms for collision detection and finding nearest points. Includes extensive documentation of my technical choices. | 2020 | [![Screenshot](./screenshots/react-tater.png)](https://www.npmjs.com/package/react-tater)
[NPM Package](https://www.npmjs.com/package/react-tater) • [Live Demo](https://iamlocaljo.com/graphy-react-challenge/) • [Technical Docs](https://github.com/localjo/graphy-react-challenge) | ![JavaScript](https://img.shields.io/badge/javascript-339933?logo=javascript&style=for-the-badge&logoColor=white) ![React](https://img.shields.io/badge/react-61DAFB?logo=react&style=for-the-badge&logoColor=white) ![React Hooks](https://img.shields.io/badge/react--hooks-61DAFB?logo=react&style=for-the-badge&logoColor=white) ![Jest](https://img.shields.io/badge/jest-C21325?logo=jest&style=for-the-badge&logoColor=white) ![create-react-library](https://img.shields.io/badge/create--react--library-grey?style=for-the-badge) ![styled-components](https://img.shields.io/badge/styled--components-grey?style=for-the-badge) ![unicode-emoji](https://img.shields.io/badge/unicode--emoji-grey?style=for-the-badge) ![collison detection](https://img.shields.io/badge/collision--detection-grey?style=for-the-badge) |
|

Trivia Demo

A trivia app demo I built that gets a list of true/false trivia questions from a JSON API and presents them in one at a time with animations, showing the player's score at the end. | 2020 |[![Screenshot](./screenshots/trivia-demo.png)](https://iamlocaljo.com/trivia-demo/)
[Code Repo](https://github.com/localjo/trivia-demo) • [Live Demo](https://iamlocaljo.com/trivia-demo/) | ![TypeScript](https://img.shields.io/badge/typescript-007ACC?logo=typescript&style=for-the-badge&logoColor=white) ![React](https://img.shields.io/badge/react-61DAFB?logo=react&style=for-the-badge&logoColor=white) ![Redux](https://img.shields.io/badge/redux-764ABC?logo=redux&style=for-the-badge&logoColor=white) ![React Router](https://img.shields.io/badge/react--router-CA4245?logo=react-router&style=for-the-badge&logoColor=white) ![Material UI](https://img.shields.io/badge/material--ui-0081CB?logo=material-ui&style=for-the-badge&logoColor=white) ![react-transition-group](https://img.shields.io/badge/react--transition--group-grey?style=for-the-badge) ![lodash](https://img.shields.io/badge/lodash-grey?style=for-the-badge) ![Jest](https://img.shields.io/badge/jest-C21325?logo=jest&style=for-the-badge&logoColor=white) |
|

Giphy Signal

A lightweight GIF search engine that uses the Giphy API and allows users to quickly search for GIFs as they type. | 2019 |[![Screenshot](./screenshots/giphy-signal.png)](https://giphy-signal.herokuapp.com/)
[Code Repo](https://github.com/localjo/giphy-signal) • [Live Demo](https://giphy-signal.herokuapp.com/) | ![JavaScript](https://img.shields.io/badge/javascript-339933?logo=javascript&style=for-the-badge&logoColor=white) ![React](https://img.shields.io/badge/react-61DAFB?logo=react&style=for-the-badge&logoColor=white) ![Redux](https://img.shields.io/badge/redux-764ABC?logo=redux&style=for-the-badge&logoColor=white) ![Jest](https://img.shields.io/badge/jest-C21325?logo=jest&style=for-the-badge&logoColor=white) ![CSS](https://img.shields.io/badge/css-F43059?logo=css-wizardry&style=for-the-badge&logoColor=white) ![lodash](https://img.shields.io/badge/lodash-grey?style=for-the-badge) ![Giphy API](https://img.shields.io/badge/giphy--api-grey?style=for-the-badge) |
|

Ethereum App Demo

I built this app to learn Solidity. It mimics a simple Twitter poll with the votes being tracked on the Ethereum blockchain. | 2017 |[![Screenshot](./screenshots/ethereum-dapp.png)](ttps://github.com/localjo/ethereum-app-demo)
[Code Repo](https://github.com/localjo/ethereum-app-demo) | ![Solidity](https://img.shields.io/badge/Solidity-grey?logo=ethereum&style=for-the-badge&logoColor=white) ![Ethereum](https://img.shields.io/badge/Ethereum-grey?logo=ethereum&style=for-the-badge&logoColor=white) ![JavaScript](https://img.shields.io/badge/javascript-339933?logo=javascript&style=for-the-badge&logoColor=white) ![React](https://img.shields.io/badge/react-61DAFB?logo=react&style=for-the-badge&logoColor=white) |
|

Kanban Demo

A basic Kanban board I built as a Trello clone using React Hooks, React Context and React Drag n Drop. | 2019 |[![Screenshot](./screenshots/kanban-demo.png)](http://iamlocaljo.com/kanban-takehome/)
[Code Repo](https://github.com/localjo/kanban-takehome) • [Live Demo](http://iamlocaljo.com/kanban-takehome/) | ![JavaScript](https://img.shields.io/badge/javascript-339933?logo=javascript&style=for-the-badge&logoColor=white) ![React](https://img.shields.io/badge/react-61DAFB?logo=react&style=for-the-badge&logoColor=white) ![CSS](https://img.shields.io/badge/css-F43059?logo=css-wizardry&style=for-the-badge&logoColor=white) ![react-dnd](https://img.shields.io/badge/react--dnd-grey?style=for-the-badge) ![Jest](https://img.shields.io/badge/jest-C21325?logo=jest&style=for-the-badge&logoColor=white) |
|

NASA Worldview Layers Search Component (Demo)


A demo of a very fast search component I built while working on NASA Worldview to show how an existing codebase can be migrated to React one component at a time. | 2017 |[![Screenshot](./screenshots/nasa-worldview.png)](https://worldview.earthdata.nasa.gov/)
[Code Repo](https://github.com/localjo/layers-search) • [Live Demo](http://iamlocaljo.com/layers-search/) | ![JavaScript](https://img.shields.io/badge/javascript-339933?logo=javascript&style=for-the-badge&logoColor=white) ![React](https://img.shields.io/badge/react-61DAFB?logo=react&style=for-the-badge&logoColor=white) ![NASA GIBS API](https://img.shields.io/badge/nasa--gibs--api-grey?style=for-the-badge) |
|

Encyclopedia CLI

A demo application that allows reading a Wikipedia from the command line. Supports any MediaWiki instance and language. | 2019 |[![Screenshot](./screenshots/wikipedia-cli.png)](https://github.com/localjo/encyclopedia-cli)
[Code Repo](https://github.com/localjo/encyclopedia-cli) | ![JavaScript](https://img.shields.io/badge/javascript-339933?logo=javascript&style=for-the-badge&logoColor=white) ![Bash](https://img.shields.io/badge/bash-333333?logo=gnu-bash&style=for-the-badge&logoColor=white) ![Cliffy](https://img.shields.io/badge/cliffy-grey?style=for-the-badge) ![lodash](https://img.shields.io/badge/lodash-grey?style=for-the-badge) ![Wikipedia API](https://img.shields.io/badge/wikipedia--api-grey?logo=wikipedia&style=for-the-badge) ![Jest](https://img.shields.io/badge/jest-C21325?logo=jest&style=for-the-badge&logoColor=white) |
|

OCR Bank Kata

My solution to [this Coding Dojo challenge](http://codingdojo.org/kata/BankOCR/). | 2018 |[![Screenshot](./screenshots/ocr-bank-kata.png)](https://github.com/localjo/ocr-bank)
[Code Repo](https://github.com/localjo/ocr-bank) | ![JavaScript](https://img.shields.io/badge/javascript-339933?logo=javascript&style=for-the-badge&logoColor=white) |
|

Table Sorter (Demo)

A very old code sample, a pure JS table sorter using QUnit for tests and Bootstrap for styles. | 2014 |[![Screenshot](./screenshots/table-sorter.png)](http://iamlocaljo.com/table-sorter/)
[Code Repo](https://github.com/localjo/table-sorter) • [Live Demo](http://iamlocaljo.com/table-sorter/) | ![JavaScript](https://img.shields.io/badge/javascript-339933?logo=javascript&style=for-the-badge&logoColor=white) ![HTML](https://img.shields.io/badge/html-E34F26?logo=html5&style=for-the-badge&logoColor=white) ![QUnit](https://img.shields.io/badge/qunit-grey?style=for-the-badge) ![Bootstrap](https://img.shields.io/badge/Bootstrap-563D7C?logo=bootstrap&style=for-the-badge) |
| | |                                                           |                                                                    |

Thank you for taking the time to look at my work. If you'd like to see more, check out [my GitHub profile](https://github.com/localjo).