Natasha Johnson

Software Engineer @ Township

I Front End Development.

Projects.

If The Shoe Fits home page

If The Shoe Fits

Next.js 14 App RouterShopify Storefront APITypeScriptGraphQLTailwindFormspree

A custom Shopify E-commerce storefront where shoe enthusiasts can shop for one of a kind sneakers and boots. Products are queried from the Shopify Storefront API using GraphQL. Users are redirected tdo Shopify checkout when completing to complete a purchase.

My Link Vault home page

My Link Vault

ReactTypescriptIndexedDBVitestReact Testing LibraryFormspreeTailwindChrome Extension

Link Vault is a Chrome extension that enables users to create a list of saved links, stored in IndexedDB. Users can categorize each link by tag and category, with the webpage's title and URL automatically fetched as link data. The link list can be filtered by tag and category. When a user clicks on a link in their list, they are navigated to the link's URL in a new page.

Ten-23 Agency LLC home page

Ten-23 Agency LLC

Next.js 14 App RouterOn-Demand RevalidationSanitySanity WebhooksTypeScriptStripeTailwindGROQ

A custom website built for my Web Development Agency that showcases the websites I have created/revamped while freelancing for clients. Potential clients can browse the services offered, learn about my prices and send a message that will be delivered directly to my inbox.

WHATS NXT home page

WHATS NXT

Next.js 14 App RouterSanityStripeTypeScriptGROQTailwindFormspree

A custom e-commerce website built as a cheaper alternative platforms like Shopify. Products are queried using the GROQ query language from Sanity, payments are handled through Stripe, and contact form submissions are handled through Formspree.

1st & Third home page

1st & Third

ReactReact Router v6Context APIFake Store APIStyled Components

An E-Commerce website where the user can browse and filter products pulled from the Fake Store API based on category, price, and customer rating, sort products based on price and item name, and add/update products in the cart. The user is then able to checkout by filling in their contact information in the checkout form with added form validation. I utilized the Context API paired with reducers for global state management.

Skills.

Next.js

React/React Native

Vue

TypeScript

JavaScript

Tailwind

Styled Components

Sanity

Vitest

React Testing Library

Just For Fun.

Etch-A-Sketch (Desktop Only) home page

Etch-A-Sketch (Desktop Only)

HTML5CSS3JavaScript

Letters home page

Letters

p5.jsJavaScriptCSS

Interactive Shapes (Desktop Only) home page

Interactive Shapes (Desktop Only)

p5.jsJavaScriptCSS

Words home page

Words

p5.jsJavaScriptCSS

Static QR home page

Static QR

Next.jsTypeScriptTailwind

Contact Me.