My passion for technology started in my childhood with my father. He and I assembled many PCs together. I was always quick to play MS-Dos games.

After studying Computer Science at University, I decided to support my wife during her Master's Degree on the west coast. When my daughter was born, I took the opportunity to pursue my passion and learn HTML, CSS, and JavaScript. I have since developed proficiency in various languages, frameworks, and libraries, including Next, TypeScript, Ruby, Sanity.io, Node.js, Express, jQuery, Tailwind CSS, Styled Components, and Framer Motion. I also have experience with database management systems via PostgreSQL and Active Record.

As a former electrician, I bring a unique perspective to every project, combining my technical expertise with a passion for creative problem-solving and attention to detail honed from years of installing complex electrical systems. 

When I'm not coding, I enjoy spending my free time with my beautiful family, mountain biking, trail building, climbing, skiing, and volunteering with SORCA since 2018 to assist in ongoing trail maintenance and trail building.

Matt Davis

A restaurant marketing page where visitors can see the menu, hours of operation and address. All content is editable in Sanity Studio.

I wanted to build a site for a local restaurant as they were currently using FaceBook for marketing and I saw an opportunity. They decided to not proceed, it was a great learning experience for me!

Nextjs with TypeScript. Sanity and Sanity Studio. Both deployed to the same URL. Meaning to change the content in the studio, you simply head to the URL/studio

Creating the embedded studio was as simple as ever with the starter template. 

Using the same pattern as previous I created a responsive header with a dropdown layout navigation menu on mobile. This time around I created multiple components per file. This was a great relief during refactoring as it was much easier to understand the full scope of a given component. For example, the Navbar now contained navLinks and mobileMenu, rather than splitting those out into separate files I knew that everything related to the Navbar was in one file. What a relief! 

Taste of Saigon

Take a trip to the Sunnyside with this bright, simple and elegant landing page.

I wanted to challenge my CSS skills to build as much of this site as I could with only HTML and CSS. It is important to revisit the basic. I learn a lot when I limit the tools that I use. I enjoy challenging myself and I set a limit of building this out in one 8-hour day.

I implemented a drop-down menu for the mobile view by using a hidden HTML checkbox to toggle the state. 

To ensure a responsive layout, I employed CSS grid and flexbox, which proved instrumental in maintaining the page's adaptability across various devices. Notably, the implementation of the picture HTML tag was crucial in displaying appropriate images tailored to different screen sizes. It is worth mentioning that the provided images were already optimized to enhance their rendering on respective devices. 

As part of the ongoing development process, my immediate plan includes purging any unused CSS.

Sunnyside

Are you waiting to challenge your friends to the become the greatest champion of useless facts? This is the Quiz App for you. 

I chose vite and RTK for this build. The main focus of this project was to establish a functional knowledge of RTK, especially with regard to the accepted patterns and chacing usage. Along the way I was not focusing on CSS, but I decided to use Styled components to get more experience with the "module" design pattern of styling components. 

Using RTK I fetch the general information about Quiz options from Open Trivia DB which of course are cached. When a user decides on a Quiz, using RTK Query builder, I fetch the specific information from Open Trivia DB and generate a list of quiz questions which are saved in a store. This store is used to generate each question page, the user essentially navigates an array of questions.

Using RTK had a large learning curve. I ran into an issue where I was making an API call every time the drop-down menu was changed due to not wrapping the query in a useMemo hook. Another interesting problem I ran into is the return value of some of the questions that had particular HTML-only characters in them. By that I mean &nbsp; for example. Using 

 was a lifesaver here! Do not use "dangerouslySetInnerHTML".

Open DB Quiz

These days there are more digital nomads and ex-pats than ever living abroad, and budgeting in multiple currencies is extremely difficult.

Budgie is a simple and intuitive monthly budgeting app, based on Psql, Express, React, and Node, to solve the difficulty of living in multiple currencies.

Budgie is flexible for both monthly expenses and short trips, ultimately just comparing your budget to your expenditures for any period of time.

Download your statistics, reset, and Budgie On! Simple as that!

Our group tossed around many ideas for a final project, however, one of our members is an expat and there was a real use for Budgie. Solving real-world problems is the best application for technology I can think of!

Budgie was built using CRA, Material UI, SASS, with a Node and Express backend. We chose to use PostgreSQL, writing raw SQL queries for performance and character building!

An important aspect of any app is User Authentication. I understand that there are many options out there, Firebase, Next Auth, Clerk, etc, however, I also see the value in diving deep and working to understand the typical pattern for Authentication. I decided to build the User Authentication by hand. 

On the backend, I implemented express session and cookies (in memory for MVP). This allowed the protection of all sensitive routes by first checking whether the encrypted cookie matched the encrypted session id, if not, the request was denied, and if yes the request was processed as needed. 

On the FrontEnd, I implemented a custom useContext hook to keep track of whether there was a user logged in or not, by requesting the information from the backend on the first app load! And using protected routing to show the application pages as a result.

It was a great learning experience to dive deep into the control flow of User Authentication. In the future using one of the mentioned options in combination with a data fetching library, RTK Query or SWR would make simplify the process.

Budgie

A food ordering web application. This app was taken a step further by incorporating Twilio SMS for text message notifications for the customer and the owner.

Head to the link below to view the presentation of our app during the July 11th Cohort midterm presentations at LHL!

Are you busy working on that midterm or final and don't have time to stand in line waiting to order food? Do you know any better way? YES! Okee-Dok-Eats!

Okee-dok-eats was built using Node, jQuery, Twillio, Express and SASS. Using a postgreSQL Database. 

Managing the user's cart was a difficult task! We ended up deciding to build a new object with its own methods that would allow quick removal and updating of items in the cart. In the future, it would be great to migrate this to a more robust implementation, involving error handling and type checking. Working as a team and managing git conflicts was vital, in the future an open line of communication is critical to success!

Hello, I am
MattDavis

Hello, I am

I love to solve problems. One
problem at a time.

About

Projects

Taste of Saigon

Sunnyside

Open DB Quiz

Budgie

Okee-Dok-Eats

Hello!