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

In my previous blog post I discussed Sanity, the headless CMS I am using to manage the posts on this blog. Now that that is out of the way, we can talk about how I have built the website itself to actually, you know, display those blog posts. After all, a headless CMS isn’t very useful without a head. In my case, the head will be powered by NextJS. Let’s get started.

Next is a React framework that provides a great developer experience (more on that later) and quick load times - especially when you have many static pages with data that can be retrieved ahead of time. Doesn’t that sound like I am just describing a blog?

I’ve begun to really enjoy using Next even without needing the fast load times. It has great features out of the box, particularly built-in, file-based routing. If there’s one thing that many developers dread about using React (other than state-management), it is routing. With Next, you can simply organize your website’s page structure using the structure of the files in your project. This does limit you to needing a structure that fits with that sort of organization, but realistically that is not a huge limitation.

On top of the straightforward file-based routing, Next also supports dynamic routing. For example, let’s say you have a folder called “posts” and in that folder you have an index.js and a 

 route. Any route that follows the pattern 

 file. Each of those files can simply export a functional component which is what will be rendered when those routes are used. For dynamic routing, the component 

 exports will be given postId as a prop with the value provided in the route. So in the example given, the value of 

 would be “123” which can be used however you wish.

The other feature that Next provides which is particularly useful for blogs is the ability to query for data before a page is built. Basically the way this works is you define a function called 

 if you are doing this on a dynamic route page so that Next knows what routes it will end up creating. Next will create a page for each dynamic route that it retrieves (

) before the page is built and also get the data each page requires (

). For a blog, that would mean retrieving the blog post based on the dynamic path (”123” in the previous example) and also retrieving all of the blog posts and creating dynamic paths for each. Here’s a more specific example using the file structure from before:

 function retrieves all of the appropriate blog posts first and then “populates” the paths with the retrieved ids so that going to those paths will actually correspond with a blog post. Then, for each of those paths which received a postId from the 

 to get that specific blog post and hand that data off to the 

 component’s props. This setup allows Next to build a page for every blog post ahead of time rather than at page load. When the app is built and deployed, all of the blog posts will be retrieved and have pages built for them. This is awesome because each page will be quick to load. The downside is that adding or updating a blog post would require the entire project to be rebuilt. For smaller sites this is not a huge problem but fortunately for larger sites Next already has a solution called Incremental Static Regeneration which you can learn more about in 

Similar to my previous post about Sanity, this is not intended to be a full tutorial for NextJS. My main goal is to give you a taste of what it can do and how I used it to set up this blog. Hopefully you learned something or maybe you were even inspired to start a blog of your own. Either way thanks for reading and feel free to comment or reach out to me if you have any questions. I’ll see you in the next post.

In my previous blog post I discussed Sanity, the headless CMS I am using to manage the posts on this blog. Now that that is out of the way, we can talk about how I have built the website itself to actually, you know, display those blog posts. 

DIY Blog Part 2: NextJS

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

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.sense-list.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://experiencer.dev

Challenge tracker for the Gundam Evolution video game. The game has daily and weekly challenges that you are only able to see between matches (for now) so this app is used to make it easier to keep track during games!

Gundam Evo Challenges

Webpage to link to a family of list apps I have created - dubbed "Sense List" because they are sensible lists. It uses NextJS to generate each list's information page at build time from JSON files which means it is very quick.

Sense List

Simple app to calculate a date in the past in the future based off how many days/months/years it is from now.

From Now

Simple memory matching game, similar to the card based games we all played as children. Players attempt to match image pairs with each other as efficiently as possible. It is built with ReactJS and uses local storage to keep track of a user's best scores.

Memory Match Game

Simple password generator app that utilizes the random.org API to generate truly random strings. I built a ReactJS app that allows you to choose a few different parameters to create a complex password.

Super Secret

Simple link cleaner for social media links built using SvelteJS. I found that when I tried to share a Tiktok or Instagram post, the link included a couple tracking properties on it that I did not like. This tool can help you clean those links before you send them off. It was mainly an opportunity to test out Svelte which was great by the way. I also took the opportunity to set up some unit tests using Jest and Husky.

Categories

DIY Blog Part 4: Continuous Integration and Delivery

2 months ago

in Tutorials

DIY Blog Part 3: Comments

3 months ago

in Tutorials

DIY Blog Part 2: NextJS

3 months ago

in Tutorials

DIY Blog Part 1: Sanity

3 months ago

in Tutorials

Introductions are in order...

3 months ago

in Life & Musings