Full-Stack Web DeveloperApplications - Websites - Custom UIs
Skills
Front End
Back End
Frameworks
Tools
Portfolio
Applications
Websites
About
Hi! I'm Jordan Shapiro, a full-stack web developer based in Marin
County, CA. My main focus is using React/Redux to build
applications and websites, but I have experience in a wide array
of tools and disciplines, ranging from APIs and databases to
graphic art and custom animations. I love the challenge of
learning a new language or framework, and am constantly looking
for ways to improve upon the knowledge I've acquired.
TransMat is a companion app for the console game Destiny 2.
With it, players can manage their in-game inventories in real
time from any browser.
Features
Offical Login
Transmat uses an offical, Bungie-provided
authentication process to log in with xBox Live and
Playstation Network accounts.
Full Inventory Control
Transfer, equip, and inspect in-game items in an
instant.
Dynamic User Interface
Simple and intuitive UI that changes based on context
makes it significantly easier for players to handle
and sort through the hundreds of items in their
inventories.
Design Elements
Built With React + Redux
React.js is one of today's most utilized frameworks
for developing modern single page applications. Its
component based structure makes it easy to compose
user interfaces and propagate data throughout an app.
Redux improves things further, adding a layer for
app-wide state management.
API Integration
TransMat utilizes Bungie's API for retrieving player
information and sending commands to manipulate the
game state.
oAuth 2.0
Authentication with TransMat follows an oAuth 2.0
style flow. Sign in is handled by Bungie; the app
never sees or touches account credentials.
HoneyCombs Holistic offers private yoga and fitness training for corporate and individual clients around the Bay Area. With her studio in Mill Valley, Laura Combs provides both on-site and virtual classes, workshops, and retreats.
A participation tracker built for PE teachers at Venetia
Valley K-8. The goal was a clean and simple interface to
replace their clipboards for tracking scores by date and
class.
Design Elements
Built With React.js
Popular front-end framework for designing modular UIs
by linking individually crafted components. Each
component then manages its own state and can use or
pass non-state properties amongst related components.
Mindnode is an application for creating mind maps, built with
React and Redux. It was concieved to achieve two separate
goals:
The first, more immediate objective for the project, was to
craft an in-depth guide detailing the methods I use when
developing a new application. Effectively designing new
software involves far more than just coding. Even moderately
complex programs can quickly become unruly and hamper
productivity, making proper planning invaluable. In doing this
my aim was to refine the approach by applying these same
design techniques to the process itself, while at the same
time making a walkthrough available to others that I wish I'd
had when I began programming.
The second objective falls outside the scope of this guide, as
the end result is meant to serve as the the foundation for its
continued pursuit. You can read more about it in the "Next
Steps" section of the wiki. ( Will update link soon. )
ReactSM is a social media application that provides the core
features of today's social media sites. The back-end is built
using Google Firebase and the front-end with React/Redux.
Features
Profiles
Create a personal profile and customize it with
pictures and user information.
Posts, Likes, and Comments
Add your own posts or like and comment on the posts of
others.
Signup and Login
Users can signup for their own account or access an
existing one with authenticated login.
Design Elements
Built With React + Redux
React.js is one of today's most utilized frameworks
for developing modern single page applications. Its
component based structure makes it easy to compose
user interfaces and propagate data throughout an app.
Redux improves things further, adding a layer for
app-wide state management.
API and Database
Custom API for communicating with the server and
updating the database.