Web Apps

Full Stack Development in JavaScript and Python

As a digital designer and educational media specialist, coding was outside the core of my professional practice but an occassional necessity nonetheless. I first learned JavaScript on an as-needed basis, then studied in focused academic settings starting in 2014, including a coding bootcamp through Northwestern University in 2017, and the Master of Information Systems degree program ending in 2022.

Starting with the bootcamp, I learned full stack web development with both JavaScript and Python stacks: specifically MongoDB, Express.js, React.js, and Node.js (MERN) and Flask with MongoDB. The MS degree program expanded my skillset, adding database design, SQL, data engineering with Python, devops, and ML/AI integration on Google Cloud.

Below are two recent coding samples using vanilla JavaScript. Recent samples using Python are here and here.

Professional JavaScript

Idea Bank: Make a Deposit

View the app | View GitHub repository

This app collects ideas in a form, parses text input, and stores the ideas in JSON. The use case: internal brainstorming related to organizational initiatives.

The project is an adaptation of an academic project by ByteGrad.com.

Features

  • Form designed for usability and accurate data collection

  • Form feedback in real time and after submission

  • Text manipulation using JavaScript string methods

  • API communications with Fetch

  • Data storage with JSON

  • Interactive list with upvoting

  • Filterable list using hashtags provided by form inputs

  • Block, element, modifier (BEM) methodology

Job Finder

View the app | View GitHub repository

This app enables users to search for jobs, manipulate the list of results with sorting, and use bookmarking to save jobs in local storage.

The project is an adaptation of an academic project by ByteGrad.com.

Features

  • Search with API communications using async/await and Fetch

  • Global state to control data updates and elements of the UI

  • Local storage of bookmarked jobs

  • Component rendering with HTML templates and data injection

  • Custom error handling with try/catch

  • Routing to recognize and respond to job-specific http requests

  • Modularized codebase using ES Modules

  • Block, element, modifier (BEM) methodology