We all  know how often things can change in software development, particularly web development.  Slick new patterns make you want to refactor your last project and the latest framework inspires your next great idea.  I don't think I am alone when I say that it can be a daunting task to choose which technologies to use in your next side project. There's always the feeling of wanting to use the right tool for the job, not to mention the dread of coming back to an old side project and wondering why you chose to build it with the tech stack you used. It can be hard to balance trying the latest and greatest with using something a little more familiar. In this blog post we will  dig deeper into this and at the end I'll include what I personally have started doing to make picking a tech stack easier.

As  people in tech and especially as software engineers,  the desire to choose the perfect tools for the job is completely natural. The internet is full of articles, blogs, and Reddit posts about why  

. There is this constant need to search for the latest and greatest to either do something entirely new or improve how you did things in the past. 

The dynamic nature of this industry is one of the best parts about it, but what if we are getting too caught up in all the excitement? How important is practicality when it comes to choosing your tech stack? 

I want to challenge the idea of the "ideal" tech stack. Not to say that it is inherently good or bad, but rather to say that it just depends on what you are trying to do. Sometimes the ideal tech stack is actually the industry standard. Other times it is a rabbit hole of endless possibilities and decision paralysis.  Let's look at  how you can decide what fits for your next project.  

The first thing I like to do  when I am beginning a new project is  to ask myself "why am I doing this?" Before I can even consider what I want to use to build, I need to figure out why I am building.  What is the purpose of this new project and what am I aiming to achieve? Let's consider a few scenarios.

A junior software developer looking to learn and expand their skills

An intermediate  engineer with  a great idea for a new app

A senior dev looking to make a proof of concept for their professional work 

These are just a few examples yet  they  may all demand completely different things in a new project. The scope  and complexity may vary, as well as the intended consumer. You might want more polish for something that you hope millions of users will use one day than  something that will never leave the confines of your personal computer.

It's easy to see how these factors can affect how you choose your tech stack. Maybe you have used PHP  as long as you can remember and want to try out a .NET application? Or maybe you've always built things on a server and want to see what this whole serverless thing is about. Either way, the tech stack you choose is the whole point of the project. If you want to learn .NET, you probably won't choose to use an ExpressJS server.

Conversely,  if your goal has more to do with the output of the project (a new web app that others want to use, for example) then the tech stack can be seen as a means to an end. It may be less beneficial to spend a few hours reading documentation on a new auth provider when you already know another one well enough and auth is just a part of the bigger picture.

Sometimes it can be a combination of the two. For example if you just want to test out how to use Redux with React, that part of the stack is important but other parts could be more of a distraction from the goal of learning. In that example, you may choose a CSS library that you feel comfortable with rather than picking up a brand new styling framework  since  you'll have to spend time learning that in addition to learning Redux which was the whole point in the first place.

Ultimately, every web development project you begin is unique so the goals should be unique too. By defining those goals from the start, you lay the foundation for a tech stack that serves  the project's requirements and your aspirations as a developer. Now that you have a goal in mind, it is time to start your project.    

When you have your goals in mind, starting from scratch is the next logical step.  If you're in web development this will most likely mean picking a framework for your language of choice and  creating the project. 

 If your goal is to learn a new language or framework, this will be a somewhat predefined decision. What language or framework did you intend on learning? Now is a good time to also consider 

 you want to learn this piece of technology. 

If your goal is to learn how to do something using a language or framework you already know, you will most likely want to  pick something comfortable here. Don't let this decision be a barrier to the actual goal you set for yourself. 

From here, you can continue making tech stack decisions based on what you want to get out of each decision. As I have mentioned, these decisions often come down to  wanting to learn something new or wanting to build something specific. Here are a  few other considerations:

  Are you developing a streamlined application with specific functionalities or embarking on an ambitious venture that encompasses a wide array of features? Understanding the scope of your project assists in shaping your tech stack to meet the challenges ahead.

 Will your project stay focused and straightforward, or is it poised to take on complex interactions and integrations? Your tech stack must align with the level of intricacy you're aiming to achieve.

 Who will be benefiting from your creation? Are you targeting a mass audience seeking a seamless experience, or is your project tailored for a niche group of tech-savvy users? The user experience you aim to provide directly influences the technologies you select.

 Is there any sense of urgency with this side project? Can you afford to "see how it goes" until the end of time or do you want this project to be done during this session? As with most things, the amount of time available tends to be one of the biggest considerations when picking a tech stack.  

 As you continue to make decisions about technologies you want to use over the span of several different projects, you may find yourself reaching for the same tools time and time again. This   phenomenon is what led me to think about this blog post in the first place. 

I had a realization that the goals of many of my side projects had shifted from being learning-focused to output-focused and that is  not a bad thing. 

For example, I had the idea of making a web app  to keep track of various places such as restaurants, coffee shops, or museums that you may want to visit in a given city, state, or country. The whole point of embarking on the development of this app was to build this app that I can personally use and share with anyone else who may be interested. I started thinking about the business logic  and how things should look and feel in the app then realized that if I couple all of those factors with a new React component library or a new backend technology, I would just be distracting myself  from what I actually wanted to do: build something.

So I stopped and looked at the last few projects I had made and noticed that while the purpose and functionality changed, the technologies I was using became constant. I was using the same React framework with the same component library and the same auth provider. These tools had become familiar to me and I enjoyed using them so why should I switch it up just for the sake of using something different? 

This anecdote may be unique to me or common to many out there but I bring it up just to say that ultimately it is important to recognize the benefit of finding consistency in your tech stack. It can save a ton of time when you know exactly how to set up each component of the stack and this can be removed as a barrier to actually creating what you want to create. We all know the feeling of having a great idea and then getting stuck in hours of config files that look nothing like the fun you had previously envisioned. If that is how it feels, maybe it is time to isolate the tech stack or even create an individualized tech stack template for future use. That is what I have done recently and I will be sure to cover it in a later blog post. 

Selecting a tech stack for your side projects is an important decision that can significantly impact development speed, project success, and personal growth.   Exploring new technologies is quite thrilling, but so is seeing your project to completion and not just leaving it as a half-baked idea. Ultimately, these are just my opinions, and there is no right answer. Side projects should be fulfilling to you in some way, and I believe if you start with that goal in mind, then choosing the perfect tech stack can come naturally.

As I mentioned before, I will be following up on this blog post with a summary of a template I made for myself to make answering some of these tech stack questions a little bit easier. 

Striking a balance between new and familiar tech can be challenging for side projects. This post delves into simplifying tech stack decisions and shares my personal strategies.

Mastering Your Side Projects: Choosing the Perfect Tech Stack

In my previous blog posts, I shared with you how I built this blog using 

. In this post, I'll share with you how to set up the continuous integration and deployment (CI/CD) for a blog, which enables you to automate the build and deployment process. This is especially useful when you're working with a blog that uses a CMS because you can automate new builds when you update your content!

 is a cloud hosting platform that provides a simple and easy way to deploy web applications. It supports many Git integrations but I personally prefer GitHub. This allows you to trigger a new build and deploy whenever you push changes to the repository.

Add your using whichever Git provider you prefer.

Manage your environment variables. In my case, there are a few API keys that I want to keep out of version control so I use Netlify's environment variable features.

Set up your custom domain, if applicable.

Netlify automatically deploys the blog whenever you push changes to the repository.

I use Netlify for most of my projects these days. To be honest I am not even aware of the pricing because everything I have used it for thus far has been free of charge. It is affordable, has great settings and integrations, and is very quick to use. I definitely recommend checking it out if you have not yet.

Sanity provides a webhook API that sends a request to a provided URL whenever a dataset changes. This webhook can be used to trigger a new build of your app which is particularly useful for blogs.

To set up the webhook, I followed these steps:

In Netlify, add a new build hook and copy the URL.

Configure the build hook settings, such as the branch to deploy, the environment variables to use, and the build command to run.

In Sanity, create a webhook that points to the Netlify endpoint.

Paste the URL from Netlify in the webhook configuration in Sanity.

Sanity automatically triggers a new build whenever a dataset changes.

With this simple set up, everytime you update content through your CMS (Sanity), it will trigger a redploy of your app on Netlify. 

In the first section you created a deployment for the blog. This deployment utilizes Netlify and triggers a rebuild and deploy whenever the Git repository is updated. In the second section, you set up a webhook so that your CMS can communicate with the hosting service and trigger a rebuild when the associated content changes. This setup truly employs the power of Next and automation so that all you need to do to update the website is commit code updates or change the blog's content. 

I intentionally kept this post brief so some concepts were glossed over. Hopefully this still helps you get started and, as always, please feel free to leave feedback if you have questions or would like me to cover anything else in detail.

In my previous blog posts, I shared with you how I built this blog using Next and Sanity. In this post, I'll share with you how to set up the continuous integration and deployment (CI/CD) for a blog, which enables you to automate the build and deployment process.

DIY Blog Part 4: Continuous Integration and Delivery

Welcome to part three of this series where I will be talking about how I added comments to my blog. Why are comments worth adding? I think the most obvious part is engagement. Let's say you have a blog that has ads or some other form or revenue generation. The longer you have people on the page and interacting with your content, the more likely they are to click an ad or otherwise increase your revenue. That being said, I personally have other reasons. I don't have any monetization on this blog - that isn't really the purpose of it. To me, comments provide a chance to interact and form some sort of community. I've always really appreciated the tech community and I want to contribute to that culture. I think being able to comment on posts helps that. We can teach each other new things, correct any mistakes, and overall just grow as individuals together.

All that being said, I knew I wanted comments on my blog, but at first, I truly had no idea where to start. I narrowed down my options to a custom-built solution, 

Deep down inside, I wanted to go this route. There’s always a sort of satisfaction that you get from building your own tool like this. I'm sure I could pull together some simple CRUD for creating comments, maybe add threading as a nice feature. But before I settled with this idea, I wanted to see what other options were available to me.

Disqus definitely came up in most of my searches and I quickly realized I didn't want to build my own comment system anymore. With sign-on integrations, moderation, and basic comment features out of the box, the idea of building a basic version of that on my own seemed less and less logical. On top of that, Disqus is also hosted, so I wouldn't need to spin up any databases to manage the comment data. The only downside I could see was that due to all of the features, Disqus does have a pricing tier. At the time of writing, the basic (free) tier has the core features and any amount of total daily page views, but is ad-supported. Going up a tier to the Plus tier for $11 per month removes ads and supports up to 3 websites, but interestingly caps daily page views at 50,000. There is also a Pro tier at $105 a month, as well as a Business tier with custom pricing. These all seem like decent options, but I still wanted to see all the options out there.

Finally, that is where Utterances came in. Utterances is built using GitHub issues as the backend. Essentially, any given page with comments on it is given its own issue on a GitHub repository of your choice. I actually quite like this option because it is so simple to use while still looking and feeling high quality. The only downside I can see is that one needs a GitHub account to actually participate with the comments, but given the nature of this blog and how popular GitHub is, I am okay with this downside. Needless to say, this is the option I went with (check it out below!).

Setting up Utterances is actually quite easy. First, you will need to create a public repository on GitHub which will be used for the comments. Next, add the Utterances 

 and configure it to have access to the repository you created. You can give it access to all repositories or a select number — I personally went with the latter. Next, configure your desired settings on the 

 and simply copy and paste the provided script into your code. That’s it!

Generally speaking, there are many different ways to enable comments on your website. I have created custom solutions, but these require much more effort to build out all of the features that the solutions I have discussed in this post have by default. Ultimately, it is up to you based on your project’s needs. Feel free to leave a comment below if you have any questions or would like me to provide a more in-depth guide to Utterances.

Welcome to part three of this series where I will be talking about how I added comments to my blog.

DIY Blog Part 3: Comments

If you're reading this, you are most likely either a developer or someone interested in software development. One thing that often connects us all is the desire to build something ourselves rather than rely on something prebuilt. The irony of this is that we typically build things for others to use, and we use plenty of prebuilt things to build our own things, but that is all besides the point.

In the spirit of doing it myself, I decided to build this blog myself rather than use something like Medium, Dev.to, or Wordpress. What's smarter than building a blog and then using the process of building it as content for said blog? Let's get started.

There are a few different steps to building your own blog with many different paths you can take. The first step for me was to choose a content management system (CMS) to manage the data for the blog. There are many great headless CMS options out there so my advice would be to do some research on each and see what works best for you. I'd like to revisit the topic and add some of my personal opinions on each but that is outside the scope of this post.

A "headless" CMS refers to a type of content management system where the backend is all that is provided for you. Often, a headless CMS will come with a dashboard where you can manage the data. The key part is that since only the backend is provided, you'll need to roll your own frontend. This means you have complete control over the presentation of your application - a blessing or a curse depending on your needs.

. Sanity is a pretty straightforward service to use. Some features include a hosted data management tool called Sanity Studio, a 

 for interacting with the data in your frontend, and a 

 (graph relational object query) based query language. I chose Sanity because

honestly I just wanted to try something new and different

I enjoy the developer experience they offer

The first thing you need to do in order to get started with Sanity is to create an account. Once you do that, you can download their CLI and follow the 

 to get a studio started on your local machine. The studio is where you interact with your datasets and also model out the data you will be storing. Sanity offers a few templates so I started with the blog template and made a few adjustments to the included schemas so that they better fit my needs. All in all the set up was pretty easy. A few points to keep in mind:

Sanity Studio is its own fully customizable application. That means you can change its functionality as dramatically or minimally as you see fit.

Being it’s own application, you can decide to use an independent git repository just for the application or you can make one large repository to contain both the frontend and the studio. In my case, I decided to use a separate repository for the studio since I am not planning on needing to make many changes to the studio after it is initially set up.

It might prove useful to use two different datasets, one for your production data and one for dev/local/testing data. You can do this by adding the following entries to your 

 within the studio project. More information can be found 

Sanity Studio now has a new major version (v3). The 

 file is replaced with a similar file so config will be slightly different if you are on v3. 

One thing that I really like about how this is all set up is that you do not need to store any keys or secrets in your project to run Sanity Studio. This is because once the app is running, you sign in through the app which handles all of the auth concerns.

That concludes the first part of this blog tutorial. Hopefully this can provide some guidance or inspiration when it comes to creating a blog of your own. A lot of the setup that needs to be done was not included in this write-up because the documentation on Sanity’s website does a great job already. Those docs can be found 

. As always, feel free to reach out if you have any questions. I’ll see you in the next post.

I decided to build this blog myself rather than use something like Medium, Dev.to, or Wordpress. What's smarter than building a blog and then using the process of building it as content for said blog? Let's get started.

DIY Blog Part 1: Sanity

Hey all and welcome to my blog. This is my first post on here so I wanted to talk about what I hope to achieve through blogging and some of my ideas for posts.

As I started off as a developer, I spent so many hours reading through documentation, blog posts, and guides on how to do various things related to software development. Now that I do software engineering professionally it isn't hard for me to look back and really appreciate all of the content I had access to — for free — on the internet. On top of the readily available content, everyone is so friendly. People are happy to help solve programming-related problems and just generally provide guidance for anyone, new or not.

One of my goals as a developer is to contribute to what I believe can be such a positive and friendly community of like-minded people. I love learning and mentorship just as much as I enjoy sitting down and solving a problem with code - to me they go hand in hand. As technology advances we must advance with it. That means we should constantly learn and be open to new ideas. Having that perspective will help us not only as professionals but also as individuals.

I have a few goals for this blog. I hope that it serves as an open place for ideas and collaboration to exist. I want this to be an outlet for my own ideas as I refine them. I'll probably post a lot of how-to's and guides but don't be mistaken: these are as much a learning experience for me as they are for any reader. I am by no means an expert so I hope to receive feedback and corrections whenever it seems like I miss the mark on something. Above all, I want this blog to be fun. Hopefully it will solve people's problems, motivate people to learn, or even inspire them to write about what they learn.

Introductions are in order...

Hello and welcome to my corner of the internet. I'm Greg, a software engineer residing in Jacksonville, FL. I enjoy building web-based applications focusing on both frontend and backend environments, particularly in the .NET ecosystem. I'm passionate about improving technology and applying my logical nature to the field of computer science. I believe the technology we can create has the ability to improve our lives and those around us, and having a role in that is my career goal. I'm also interested in the human aspect of technology, including both those who use it and those who build it. I spend my free time tinkering with the latest JavaScript framework, living on coffee, and playing guitar for my two cats.

Front-end web development is the development of the graphical user interface of a website, through the use of HTML, CSS, and JavaScript, so that users can view and interact with that website.

Frontend Specialization

The HyperText Markup Language or HTML is the standard markup language for documents designed to be displayed in a web browser.

HTML

Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language such as HTML. CSS is a cornerstone technology of the World Wide Web, alongside HTML and JavaScript.

Sass (short for syntactically awesome style sheets) is a preprocessor scripting language that is interpreted or compiled into Cascading Style Sheets (CSS). SassScript is the scripting language itself. Sass consists of two syntaxes. The original syntax, called 'the indented syntax,' uses a syntax similar to Haml. It uses indentation to separate code blocks and newline characters to separate rules. The newer syntax, 'SCSS' (Sassy CSS), uses block formatting like that of CSS.

SASS

JavaScript, often abbreviated JS, is a programming language that is one of the core technologies of the World Wide Web, alongside HTML and CSS. Over 97% of websites use JavaScript on the client side for web page behavior, often incorporating third-party libraries. All major web browsers have a dedicated JavaScript engine to execute the code on users' devices.

JavaScript

React (also known as React.js or ReactJS) is a free and open-source front-end JavaScript library for building user interfaces based on UI components. It is maintained by Meta (formerly Facebook) and a community of individual developers and companies. React can be used as a base in the development of single-page, mobile, or server-rendered applications with frameworks like Next.js.

React

Redux is an open-source JavaScript library for managing and centralizing application state. It is most commonly used with libraries such as React or Angular for building user interfaces.

Redux

Next.js is an open-source web development framework built on top of Node.js enabling React based web applications functionalities such as server-side rendering and generating static websites. React documentation mentions Next.js among 'Recommended Toolchains' advising it to developers as a solution when 'Building a server-rendered website with Node.js'. Where traditional React apps can only render their content in the client-side browser, Next.js extends this functionality to include applications rendered on the server side.

NextJS

Angular (commonly referred to as 'Angular 2+' or 'Angular CLI') is a TypeScript-based free and open-source web application framework led by the Angular Team at Google and by a community of individuals and corporations. Angular is a complete rewrite from the same team that built AngularJS. Angular is used as the frontend of the MEAN stack, consisting of MongoDB database, Express.js web application server framework, Angular itself (or AngularJS), and Node.js server runtime environment.

Angular

Vue.js (commonly referred to as Vue; pronounced 'view') is an open-source model–view–viewmodel front end JavaScript framework for building user interfaces and single-page applications. It was created by Evan You, and is maintained by him and the rest of the active core team members.

TypeScript is a programming language developed and maintained by Microsoft. It is a strict syntactical superset of JavaScript and adds optional static typing to the language. TypeScript is designed for the development of large applications and transcompiles to JavaScript. As TypeScript is a superset of JavaScript, existing JavaScript programs are also valid TypeScript programs.

Typescript

Backend web development is the development of the server that often acts as a means of data-access for a website.

Backend Specialization

C# is a general-purpose, multi-paradigm programming language. C# encompasses static typing, strong typing, lexically scoped, imperative, declarative, functional, generic, object-oriented (class-based), and component-oriented programming disciplines.

.NET (pronounced as 'dot net'; previously named .NET Core) is a free and open-source, managed computer software framework for Windows, Linux, and macOS operating systems. It is a cross-platform successor to .NET Framework. The project is primarily developed by Microsoft employees by way of the .NET Foundation, and released under the MIT License.

.NET

Python is a high-level, general-purpose programming language. Its design philosophy emphasizes code readability with the use of significant indentation. Its language constructs and object-oriented approach aim to help programmers write clear, logical code for small- and large-scale projects.

Python

Node.js is an open-source, cross-platform, back-end JavaScript runtime environment that runs on the V8 engine and executes JavaScript code outside a web browser. Node.js lets developers use JavaScript to write command line tools and for server-side scripting—running scripts server-side to produce dynamic web page content before the page is sent to the user's web browser.

NodeJS

Express.js, or simply Express, is a back end web application framework for Node.js, released as free and open-source software under the MIT License. It is designed for building web applications and APIs. It has been called the de facto standard server framework for Node.js.

ExpressJS

Meteor, or MeteorJS, is a free and open-source isomorphic JavaScript web framework written using Node.js. Meteor allows for rapid prototyping and produces cross-platform (Android, iOS, Web) code. It integrates with MongoDB and uses the Distributed Data Protocol and a publish–subscribe pattern to automatically propagate data changes to clients without requiring the developer to write any synchronization code.

MeteorJS

Nest (NestJS) is a framework for building efficient, scalable Node.js server-side applications. It uses progressive JavaScript, is built with and fully supports TypeScript (yet still enables developers to code in pure JavaScript) and combines elements of OOP (Object Oriented Programming), FP (Functional Programming), and FRP (Functional Reactive Programming).

NestJS

TypeScript

In computing, a database is an organized collection of data stored and accessed electronically. Small databases can be stored on a file system, while large databases are hosted on computer clusters or cloud storage. The design of databases spans formal techniques and practical considerations including data modeling, efficient data representation and storage, query languages, security and privacy of sensitive data, and distributed computing issues including supporting concurrent access and fault tolerance.

Databases

SQL ('sequel'; Structured Query Language) is a domain-specific language used in programming and designed for managing data held in a relational database management system (RDBMS), or for stream processing in a relational data stream management system (RDSMS). It is particularly useful in handling structured data, i.e. data incorporating relations among entities and variables.

Microsoft SQL Server is a relational database management system developed by Microsoft. As a database server, it is a software product with the primary function of storing and retrieving data as requested by other software applications—which may run either on the same computer or on another computer across a network (including the Internet).

SQL Server

PostgreSQL, also known as Postgres, is a free and open-source relational database management system (RDBMS) emphasizing extensibility and SQL compliance.

PostgreSQL

Oracle Database (commonly referred to as Oracle DBMS or simply as Oracle) is a multi-model database management system produced and marketed by Oracle Corporation. It is a database commonly used for running online transaction processing (OLTP), data warehousing (DW) and mixed (OLTP & DW) database workloads.

OracleDB

MySQL is an open-source relational database management system (RDBMS).Its name is a combination of 'My', the name of co-founder Michael Widenius's daughter, and 'SQL', the abbreviation for Structured Query Language. 

MySQL

A NoSQL (originally referring to 'non-SQL' or 'non-relational') database provides a mechanism for storage and retrieval of data that is modeled in means other than the tabular relations used in relational databases.

NoSQL

MongoDB is a source-available cross-platform document-oriented database program. Classified as a NoSQL database program, MongoDB uses JSON-like documents with optional schemas.

MongoDB

Redis (Remote Dictionary Server) is an in-memory data structure store, used as a distributed, in-memory key–value database, cache and message broker, with optional durability. Redis supports different kinds of abstract data structures, such as strings, lists, maps, sets, sorted sets, HyperLogLogs, bitmaps, streams, and spatial indices.

Redis

Neo4j is a graph database management system developed by Neo4j, Inc.

Neo4J

There are many tools and technologies available to aid in the software development process

Utility Specialization

Git is software for tracking changes in any set of files, usually used for coordinating work among programmers collaboratively developing source code during software development. Its goals include speed, data integrity, and support for distributed, non-linear workflows (thousands of parallel branches running on different systems).

GitHub, Inc. is a provider of Internet hosting for software development and version control using Git. It offers the distributed version control and source code management (SCM) functionality of Git, plus its own features. It provides access control and several collaboration features such as bug tracking, feature requests, task management, continuous integration and wikis for every project.

GitHub

Bitbucket is a Git-based source code repository hosting service owned by Atlassian. Bitbucket offers both commercial plans and free accounts with an unlimited number of private repositories.

BitBucket

Cloud computing is the on-demand availability of computer system resources, especially data storage (cloud storage) and computing power, without direct active management by the user.

Cloud

Heroku is a cloud platform as a service (PaaS) supporting several programming languages. One of the first cloud platforms, Heroku has been in development since June 2007, when it supported only the Ruby programming language, but now supports Java, Node.js, Scala, Clojure, Python, PHP, and Go.

Heroku

Netlify is a San Francisco-based cloud computing company that offers hosting and serverless backend services for web applications and static websites. The company provides hosting for websites whose source files are stored in the version control system Git and then generated into static web content files served via a Content Delivery Network. Given the limitations of the purely static model, the company later expanded services to include content management systems, and features of serverless computing to handle websites with interactive features.

Netlify

Amazon Web Services, Inc. (AWS) is a subsidiary of Amazon providing on-demand cloud computing platforms and APIs to individuals, companies, and governments, on a metered pay-as-you-go basis. These cloud computing web services provide a variety of basic abstract technical infrastructure and distributed computing building blocks and tools.

Google Cloud Platform (GCP), offered by Google, is a suite of cloud computing services that runs on the same infrastructure that Google uses internally for its end-user products, such as Google Search, Gmail, Google Drive, and YouTube. Alongside a set of management tools, it provides a series of modular cloud services including computing, data storage, data analytics and machine learning.

Microsoft Azure, often referred to as Azure is a cloud computing service operated by Microsoft for application management via Microsoft-managed data centers. It provides software as a service (SaaS), platform as a service (PaaS) and infrastructure as a service (IaaS) and supports many different programming languages, tools, and frameworks, including both Microsoft-specific and third-party software and systems.

Azure

Firebase is a platform developed by Google for creating mobile and web applications. It was originally an independent company founded in 2011. In 2014, Google acquired the platform and it is now their flagship offering for app development.

Firebase

Supabase is an open source Firebase alternative. It provides all the backend services you need to build a product. You can use it completely, or just the services you require

Supabase

Docker is a set of platform as a service (PaaS) products that use OS-level virtualization to deliver software in packages called containers. The service has both free and premium tiers.

Docker

Lead Software Engineer

Software Engineer

Technical Writer

Web Consultant

Lab Assistant/Tutor

I have created a programming/software dev/personal blog as an extension of this website. I am very happy with the result - it uses [NextJS](https://nextjs.org/) with [Sanity](https://www.sanity.io/) as a [headless CMS](https://en.wikipedia.org/wiki/Headless_content_management_system) and a simple webhook setup to automate builds and new deployments as I add content. I have actually written an entire series on my blog detailing the tools I used so if you are interested I would appreciate you [checking it out](https://blog.gregmurray.org/tutorials/diy-blog-part-1-sanity)!

Blog

https://blog.gregmurray.org/

You may have noticed that I have a game linked on this website. If you haven't already, please go check it out! This is one of the most extensive projects I have done that really pushed my boundaries of programming. Long story short, I had the idea of presenting this website to any of my more playfully inclined visitors in video game format. That means a browser based (JavaScript!!), classic 2D RPG style game that contains *all* of the same information that this web page has but in game format. It's possible that you are reading this right now from inside the game which would be incredibly meta. Anyway, I learned a lot about [Phaser](https://phaser.io/) (the game engine I used), programming from a more performant perspective, and simple game theory. Stay tuned as I will be writing a blog post about it all soon...

Game

https://game.gregmurray.org

As I continue to obsess over creating list applications, I decided to recreate a previous app I had created to keep track of my books. I am very happy with the result: an app with some social functionality (simple comments and likes), book tracking and reviews, lists, and list progress. You can share the lists you create with other users so they can read things in your recommended order. This is another one of those apps that I actually use myself so that is a big plus. As usual I have used [NextJS](https://nextjs.org/), [React Material UI](https://mui.com/), and [Netlify](https://www.netlify.com/). Additionally I am using MongoDB for data and I tried out using [Atlas' Data API](https://www.mongodb.com/atlas/app-services/data-api) so that I could properly access MongoDB from a serverless environment. Feel free to check it out and let me know what you think!

Book Critical

https://book-critical.com/

I recently got into the Gunpla hobby (basically model plastic figures from an anime for the uninitiated) and immediately knew I wanted to create an app to help organize and share my collection. Thus, Collectionist was born with the idea of being genre agnostic even though I had Gundam in mind. Some features include collection and collection-item management, wish lists, list sharing, image storage, and simple comments and likes. As usual these days, I built the app using NextJS [NextJS](https://nextjs.org/) with [Firebase](https://firebase.google.com/) for data persistence and auth. Additionally, I used [React Material UI](https://mui.com/) for styling which has become a favorite of mine. The app is deployed on [Netlify](https://www.netlify.com/).

Collectionist

https://collectionist.sense-list.com

This is another one of those apps that I built for family - something I really enjoy doing. My dad has been getting into cooking and therefore recipes but he's printing them out and described how cluttered having physical copies is. He wanted to be able to keep track of recipes on various websites, without needing to print them. I took that opportunity to make this app which is a straight forward recipe book. You can save and preview links to recipes and also add notes to them. I also added a simple dashboard to help each user find their favorite recipes quicker and even help recommend where to find new ones. I used [Next Auth](https://next-auth.js.org/) for authentication/authorization which I have been really enjoying learning lately. It may come as no surprise then that I used [NextJS](https://nextjs.org/) which has become my go to for React development these days. I just love the boilerplate that is taken care of, particularly with routing. I also used [React Query](https://react-query.tanstack.com/) and [Material UI](https://mui.com/) as usual plus [React Final Form](https://final-form.org/react) for easy to set up forms. It is all hosted using [Netlify](https://www.netlify.com/). Feel free to make an account on this app if you want to try it out.

Recipe Book

https://github.com/gmmurray/recipe-book

I always enjoy making apps for work or myself but one of the most satisfying things to do is make something that your friends and family can use. During the 2020 holiday season I made an app called Group Gift to help my family organize wish lists between everyone. This app is the latest iteration of that app which I created in preparation for the 2021 holiday season. Users can create wish lists for themselves by adding gifts that they would like. Every group they join will then provide those group members with access to each user's wish list. Everyone in the group can claim gifts and coordinate to knock out each item in everyone's list. It is a React app that employs [Material UI](https://mui.com/) for styling, [Supabase](https://supabase.com/) combined with [React Query](https://react-query.tanstack.com/) for auth, persistence and querying optimization, and [React Hook Form](https://react-hook-form.com/) for easier forms. I used [Netlify](https://www.netlify.com/) for easy CI/CD.

Gift Time

https://github.com/gmmurray/gift-time

This site is a demo of the type of simple websites I can build. It would be  well-suited for a small business looking to have something online to provide brief information about the businesss. The goal of the website is to create new business by giving users the opportunity to contact the business directly. It could also prove useful for people looking to find information such as contact info or availability/hours, for example. The website was built using [NextJS](https://nextjs.org/), a React framework, which is great for static websites such as this one. NextJS provides great search engine optimization and very quick page loads on top of the great developer experience. The website also uses Typescript, a slightly modified [Bootstrap](https://getbootstrap.com/) for styling, and is hosted on [Netlify](https://www.netlify.com/).

Demo Genius

https://demo-genius.gmurray.dev

I really enjoy the social side of being in tech so I came up with the idea of a platform for software developers to share their experiences in their career. Experiencer is where you can set up a timeline of events in your career as well as show off what experiences you have had. The whole platform uses [GitHub](https://github.com/) as the base of its information, so you can attach your GitHub profile and show off a somewhat fancy overview of it while adding some custom information as well. The app is built using [NextJS](https://nextjs.org/) in addition to [MongoDB Atlas](https://www.mongodb.com/atlas/database) for data persistence and the [React Material UI library](https://mui.com/) for styling. You can see the full list of technologies used [here](https://github.com/gmmurray/experiencer#technologies-used). 

Experiencer

https://github.com/gmmurray/experiencer

Keep track of your fitness journey with this basic weigh logger web app. You can enter weigh-ins and dates to help monitor your progress as you work towards whatever goals you may have. This app is built in React as usual and can be installed as a [PWA](https://web.dev/progressive-web-apps/). To keep things simple, user data is persisted on their own device rather than on the internet. 

Simple Scale

A simple QR generator app. It utilizes the `react-qr-code` package to generate a QR code based on what the user enters.

Categories

Mastering Your Side Projects: Choosing the Perfect Tech Stack

about 1 year ago

in Dev Insights

DIY Blog Part 4: Continuous Integration and Delivery

over 1 year ago

in Tutorials

DIY Blog Part 3: Comments

over 1 year ago

in Tutorials

DIY Blog Part 1: Sanity

over 1 year ago

in Tutorials

Introductions are in order...

over 1 year ago

in Life & Musings