Mark Elliott

Software Developer

I specialize in React frameworks and TypeScript.

EmailGitHubLinkedInSee what I'm practicing on Leetcode!Take a peek at what I'm learning on Exercism!Peep what I'm doing on HackerRank!

About

My journey into programming started in 2019 when I simplified a boring and slow data entry process at a pathology lab with a script, cutting hours down to minutes. Inspired to do more, I took the dive into software development, creating projects with Python, JavaScript, and beyond.

As a full stack developer, I focus on performance and code quality. I write efficient algorithms and consider the inner workings and pitfalls of a language or framework to achieve better results. And to avoid technical debt, I spend time before I start building carefully designing the architecture to create an elegant and maintainable system, saving headaches later.

Currently, I am continuing my learning with new projects in Next.js and Swift (Xcode is a disaster), doing exercises in C# to learn the .NET framework, challenging myself with DSA, and staying up-to-date with the latest news and trends in programming. I am open to backend, frontend, and full stack roles with devs that are as nerdy as me.

Projects

  1. Yap App

    Yap App is a social media app akin to Twitter, where users can 'yap', 'echo', like, reply, follow, receive notifications, and customize profiles. It's my first project built with the Next.js App Router. It uses server-side rendering with the new React Server Component paradigm in a serverless environment, reducing bundle size, latency, and hosting costs, while delivering statically generated pages where possible for efficiency. Full type-safety on the frontend and backend was incorporated using Prisma ORM for database queries and Zod validation libraries. File hosting provided with uploadThing and their UTApi SDK.

    TypeScriptNext.jsTailwindshadcnPostgreSQLPrismaAuth.jsZod

  2. Wire Messaging App

    Wire Messaging App is a live chatroom. Users can join channels and talk to a larger group, or direct message anyone else who is online. This was achieved with the usage of WebSockets to send JSON messages, which essentially act as events for a custom Websocket React hook to listen to. The app features a React frontend delivered via an Express backend with a MongoDB database. Animations were implemented with the popular Framer Motion library in combination with Tailwind.

    TypeScriptReact.jsExpress.jsTailwindFramer MotionMongoDBMongoosePassport.js

  3. Search Party

    Search Party is a game similar to Where's Waldo. Players are tasked with finding 5 fictional characters from popular franchises hidden within an image. The quickest players get a chance to put their name on the leaderboard. Native DOM APIs were used to calculate the absolute position of a click regardless of screen size, ensuring compatibility across all devices. The guess is then compared to the coordinates stored in a database via a REST API called with Axios.

    TypeScriptReact.jsExpress.jsNode.jsTailwindMongoDBMongoosePassport.js

    1. This Portfolio

      My portfolio is made with Next.js App Router using a static export config to generate a fully static site weighing only 477kB. Zustand is used with react-intersection-observer-hook to update the nav tool view on the left. Color palette is inspired from the CodeSandbox Dark theme. I have my own variation, CodeSandbox Dark Neon, available on the VS Code Marketplace 😉 (still a WIP)

      TypeScriptNext.jsTailwindZustand

    2. Blog API

      Blog API is a RESTful API built on an Express.js backend to deliver JSON data. Users can interact with the service using command-line utilities like cURL to run the usual HTTP methods (GET/POST/PUT/DELETE) on authors, articles, and comments. Some actions, like updating an existing author, require authentication via JSON web token. This project served to teach me the basics of implementing a REST API.

      TypeScriptExpress.jsNode.jsMongoDBMongoosePassport.js

    3. Member's Only

      Member's Only is a simple message board where unauthenticated visitors can view posts but not the usernames of the authors. Users must register and login to see who posted a message. The project uses EJS as a template engine to render dynamic HTML content. This project was mainly an exercise in access control and user authentication.

      JavaScriptExpress.jsEJSNode.jsMongoDBMongoosePassport.js

    4. Shopping Cart

      Shopping Cart is a React SPA that allows users to browse products and add them to a shopping cart. The frontend consumes a REST API via react-query and Axios. React-query polls the API to cache products and categories. After a designated stale time, react-query will fetch from the API again to keep the client data fresh. The data is shared between components via context. React-router handles the swapping of components on client navigation to other routes. Fuzzy search functionality implemented with Fuse.js.

      JavaScriptReact.jsVitereact-routerreact-query

    5. Memory Game

      Memory Game is a React-based memory game with Cartoon Network characters. Players need to click all characters once without clicking the same character twice. Characters shuffle on click, adding to the difficulty of the game.

      JavaScriptReact.jsVite

    6. Resumé App

      Resumé App allows you to construct a simple resumé on the web, then save it as a PDF. As my first React app, this project taught me its core concepts — JSX, props, hooks, components, and unidirectional data flow.

      JavaScriptReact.jsVite

    7. Battleship

      This app is an recreation of the classic Battleship board game. The game is controlled by an event-driven architecture using objects, where objects emit events using Node's events module to manage game state and trigger DOM updates using only native DOM APIs. I specifically designed the app this way to learn more about OOP and event-driven programming.

      JavaScriptNode.jsJest

    8. Weather App

      Weather App gives you a three day forecast of any location you choose. The background dynamically changes based on the condition of that location for the day (overcast, clear, etc.). The purpose of this app was to learn the basics of fetching and manipulating data from an API.

      JavaScriptWebpack

    9. Sign Up Form

      This Sign Up Form is an exercise in custom form validation in JavaScript and CSS.

      JavaScript

    10. Todo List

      A simple todo list to save/delete tasks, assign them priorities and due dates, and mark them complete/incomplete. Tasks are saved via local storage and JSON.

      JavaScript

    11. Library App

      A library app to track the books you are reading and have read.

      JavaScript

    12. Tic Tac Toe

      Play tic tac toe in the browser against an easy or hard difficulty computer.

      JavaScript

    13. Calculator

      Online calculator built to include the often overlooked behaviors of a physical scientific calculator e.g. pressing + or × will perform calculations with the last entered digit and the current state.

      JavaScript

    14. Etch-a-Sketch

      Paint an image on an adjustable pixel-based canvas. This project taught me how to use event listeners.

      JavaScript

Story

I grew up in Lexington, Kentucky, with my family originating from a farmer lifestyle in rural Corbin. Despite that, I was introduced to technology at a young age by my father, who was president of an internet service provider. The exposure to everything from 70lb CRT monitors to server racks triggered my interest in tech that lasts today.

After I wrote my 2019 script, I kept going. Driven by an interest in efficiency and a persistent curiosity about programming, I used the saved time to learn software development. I downloaded PyCharm and completed Automate the Boring Stuff with Python, a well-known and often lauded book which gave me insights into the basics of software development, but left me wanting more.

I continued with The Odin Project, a full-stack web development course, where I learned the basics of HTML, CSS, JavaScript, command line tools, DSA, and building full stack applications with frameworks like Express and React. It demanded a lot of time and motivation but I had fun and grew my skills significantly. Since then, I've continued to build and expand my horizons with work in other languages and frameworks.

Aside from tech, I'm also into fashion, reading manga, weightlifting, and recently rollerblading. When it comes to clothes, I'm always looking for things that excel in the three characteristics I look for: construction, materials, and shape. As for manga, I started in 2013 with One Piece and now I always look forward to weekly chapters and discussion threads to give my mind something to chew on. And rollerblading has become a new hobby because the skill aspect makes it more fun for me than other forms of cardio.

Hopefully that tells you a little more about me! Check out my Github and some of the other links on this page to see what I'm currently working on.

Me and my cat Pizza, rest his soul