Remote Web Developer - Buffalo Grove, Illinois

CHAINSEEKER: Full-Stack Disc Golf Scorecard WebApp

KEY FEATURES -

Score Tracking System: Effortlessly record and monitor your disc golf rounds.

Create Friend Profiles: You can create friend profiles inside the app so that you can play together and keep track of everyone's scores.

Performance Statistics: Track and review your performance and see how well you are doing against your friends.

Mobile-First Design: This project was created using a mobile-first approach as the app lends itself to be used typically on the fairway.

Responsive Design: Enjoy the app seamlessly on various devices, making it your go-to companion during disc golf adventures.

CHALLENGES

Perfromance Statistics: Creating intuitive performance statistics posed a challenge, met with solutions using Chart.js for effortless bar graph generation. I further crafted a custom bar graph from scratch using Tailwind CSS and JavaScript logic, enhancing visual representation.

Authentication: Implementing secure JWT authentication presented a challenge, addressed by leveraging libraries for streamlined token management. Additionally, I successfully crafted a custom JWT authentication system, ensuring robust security measures.

Database Privacy: Ensuring secure password storage through salting and hashing in the database posed a challenge. I successfully implemented robust solutions, employing cryptographic techniques to enhance password security.

1337MARKET - A front-End E-Commerce Storefront

KEY FEATURES

RESTful API Integration: This project seamlessly integrates with Best Buy's API to dynamically fetch and display up-to-date product information on the site. Leveraging the principles of REST, it ensures efficient communication between the client and the external data source.

Dynamic Shopping Cart: The shopping cart allows users to effortlessly add up to five units of a product. Experience real-time total updates, conveniently displayed in the navbar for quick reference. A playful checkout button triggers a fun confetti show, adding a touch of joy to the user experience.

Performance Statistics: Enjoy a seamless shopping experience across a variety of devices. Whether you're on desktop or mobile, the responsive design ensures an optimal and user-friendly interface, making your browsing and shopping effortless.

Responsive Design for Seamless Shopping: This project was created using a mobile-first approach as the app lends itself to be used typically on the fairway.

Technological Showcase: This project serves as a comprehensive showcase of my React development skills. Leveraging cutting-edge technologies such as Vite, React, and React Router, the project demonstrates proficiency in state management through both local and global context. CSS modules are employed for maintainable styling, creating a visually appealing user interface. Additionally, the integration of a RESTful API design highlights my commitment to building dynamic and data-

driven web applications.

CHALLENGES

Responsive Design: Crafting a responsive design to guarantee optimal user experiences across devices required a lot of attention to detail as there were many components on the home page. I wanted to craft distinct yet visually appealing layouts for desktop & mobile. The outcome is a site that effortlessly adapts to various screen sizes, providing users with a consistently seamless shopping experience.

Up-to-date Product Information & Sorting: Ensured the product database remained consistently updated by working with Best Buy's API using RESTful principles, enabling real-time updates on the website. Using this approach allowed product filtering and sorting on the shop page.

RE:MEMEBER - An Incremental/Idle Browser Game

KEY FEATURES

Interconnected Gameplay Mechanics: The game's core is the dynamic "gameState" object, tracking user progress. Player choices drive mechanic and upgrade unlocking, determining availability speed. This system allows players to create individual strategies. A key mechanic is a simon-says-like game, part of a decryption method to unlock in-game cryptocurrency.

TypeScript & React Integration: The game combines TypeScript and React for reliable game logic in a streamlined development process, utilizing modern technologies for efficiency and a smooth experience.

Responsive Design for Seamless Gaming: Enjoy seamless gaming on desktop and mobile. Responsive design ensures a user-friendly interface, featuring simple tabbing for mobile and a neat bento-box layout for desktop convenience.

Local Storage & Base64 Encoding: The game employs local storage for automatic game saving, ensuring player progress is always preserved. To facilitate easy loading, a base64 encoded string is generated that can be saved for loading later on.

CHALLENGES

Saving Game Progress: An important part of the incremental/idle gaming experience is periodically saving progress. By utilizing local storage, the game ensures that player progress is saved every 2 minutes. An additional step was to generate a base64 encoded string that a player can used to load a previous game state on any device.

Creating Desktop & Mobile Friendly Layouts: Creating a layout that plays both on mobile & desktop was quite challenging to ensure a smooth user experience. The ideal set up allows the player to see as much of the game as possible to ensure that nothing is missed. On mobile, there needed to be compromise, so a tabulated version of the game was developed. A fixed footer navbar allows a player to be notified of upgrades available. On desktop, a bento-box layout was devloped for easy navigation on a single page.

Clean Reusable Components & Functions: Utilizing the modularity of React and components was a major focus with this project. As the game utilizes many functions to do computations and update the state of the game, creating reusable and pure functions was a necessity to create human-readable code that will be easy to maintain in the future.