WordPress Site – gregandnicki.com

This custom WordPress website was created for my upcoming wedding from a blank underscores theme and serves as a central point for visitors to get information about the big day, send their RSVP’s, and find gifts from a Gift Registry.

Invited visitors are able to RSVP to the event through a plugin I created from the ground up that lets them enter their information by searching their postal code. Once there, guests can edit the individual attendees in case someone cannot make it or we need the name of a guest, and add dietary restriction information, or decline the invitation altogether.

As well, the Gift Registry is hosted directly on the site, and was created by modifying the posts and comments features of WordPress itself. Each item in the registry is its own post, and once a registry item is to be marked as purchased, the guest clicks the item which then sends WordPress a comment on that post. If a single comment exists within that post, the gift is marked as purchased. With the help of the Advanced Custom Fields plugin, it became easy to add links to the actual items, indicate if they are available in-store or online, and how many of the items were requested.

Visit This Project | View Project on GitHub

View more project posts in the WordPress category.

Store System – Sign Making Package

As part of the Retail IT Package I had been working on, I wanted to take MongoDB Collection Data and have an easy method to turn that data into printable customer-facing signage.

Using this program, a store employee could simply type the UPC or PLU code of the item they wished to make a sign for into an input field. If necessary, the customer could add a “Country of Origin” label, as mandated by the government. The user would then hit enter to send that data to a locally stored data array, which would then be used to collect data for any additional signs by storing that data in several JavaScript Objects.

As the signage is made, the store employees can see which signs are already queued up to be printed. Once sign data is all ready to be printed, the employee clicks a button that allows them to bring a properly formatted full-page sign for each PLU or UPC code they entered. The program uses a media query to print that data to a physical paper or to a PDF document and then allows the user to delete all signage after printing is done.

Visit This Project | View Project on GitHub

View more project posts in the JavaScript category.

GatsbyJS Personal Site

In November of 2020 I was forced to self-isolate as my Covid Alert app notified me of potential exposure. It was a great time to learn something new, and I decided to tackle GatsbyJS and its GraphQL image lookup.

This site functioned as a personal brochure website for roughly seven months, outlining my skills while still directing people who wanted to see my portfolio projects to a WordPress site for which I had created a custom theme.

Visit This Project | View Project on GitHub

View more project posts in the React category.

WordPress Personal Website – July 2021

After creating a previous version of my personal website using the GatsbyJS framework, I decided the time had come to give myself another WordPress development experience. I wanted my new site to have static pages, an area for ongoing project updates, and to be able to use and update the site to showcase my skills with ease. It’s the sort of thing any business owner or client would expect their site to do, in addition to having it deliver on its stated purpose.

This site’s purpose is simple – showcase talents and skills, and allow users to get to know me on a more technical level, as well as on a personal level. This is a site that showcases knowledge of WordPress development, Visual Design ability, Prototyping of conceptual website designs, the ability to deliver a site that can work responsively on all screen sizes, and an awareness of website accessibility for those with visual impairments.

I’ll be honest – I’ve been back and forth between learning WordPress development and React development for quite some time – heck, I’ve done plenty of projects using both – but with WordPress, your customers can do more, and since I’ve spent good time learning and practicing WordPress, this was the best option for the next version of my personal site.

Visit This Project | View Project on GitHub

View more project posts in the WordPress category.

grocerystoreinsider.com WordPress Theme and Blog Site

As I was hunting for ideas for a project, I checked to see if the domain grocerystoreinsider.com was available. To my surprise, not only was it available, it was affordable! I snapped it up and began mocking up the site in Adobe XD and choosing design elements while beginning to create blog content for the site itself.

As a web design and development project, grocerystoreinsider.com was created as both an example of my web development and WordPress custom theme-building skills, and also a platform to share my experiences and knowledge of the grocery industry that I’ve been part of for a long time. The site uses a handful of plugins – Yoast SEO, Google Site Kit, and a custom-made plugin to display thumbnail images of recent posts/articles that I have written for the site.

Visit This Project | View Project on GitHub

View more project posts in the WordPress category.

React Store Map/Shopping List App

This is a new version of a Store Map App I built a year ago with Vanilla JavaScript, this time built with React.

The application is custom-built for an unidentified store in Kitchener. It makes shopping easier by allowing customers to create and organize their shopping lists, and find where their list items are on a map of the store’s layout, just by pressing a button and rotating their device by 90 degrees. Because their lists are stored on the device’s local storage, their items are automatically saved and shown on each new visit to the app.

How it is built:
☑️Store Map in HTML & CSS
☑️React controls Shopping List and Item Locator
☑️React Beautiful DnD package added for user to arrange list items
☑️Item Locator finds list items using CSS
☑️Over 400 items and growing in the data set
☑️Item Locator, Searched Item, and Shopping Lists are all stored in State.
☑️Shopping List is saved for future use in Local Storage, retrieved in ComponentDidMount lifecycle method

Use cases:
☑️Retailers looking to make shopping easier using branded applications
☑️Events looking to showcase vendor locations
☑️Locate a vehicle in a large parking lot (using numbers on light posts to search)

Visit This Project | View Project on GitHub

View more project posts in the React category.

React Visual Weather Forecast App

WeatherONE is a React-based local weather app that uses visual cues to tell you about current, hourly, or seven-day weather forecasts before you actually read temperature values.

Temperature values in this app are presented in Celcius and are matched up to a colour; the warmer it gets, the warmer the colour. This allows for easy and visually appealing scrolling, allowing the user to quickly find the warmest or coolest part of the day, or warmest or coolest day of the coming week. WeatherONE also uses colour to inform users of the severity of the day’s UV index, and to easily say if current conditions are cloudy or sunny – indicated by a grey or blue background during daylight hours.

In plain text, WeatherONE will also tell you if you need an umbrella that day, if you should wear a jacket, or if it’s a perfect day to wear sandals, right from the home screen. Changing colour contrasts with text was considered in the design and changes to text colour happen when necesssary to maintain readability.

WeatherONE lets you save your current location in your device’s local storage. By default, WeatherONE loads information from its current location, but allows you to save locations you’ve visited in the past.

How it works:
☑️Location coordinates come from device GPS or IP address

☑️Allows you to remember your current location for later browsing
☑️Javascript chained promises used to get weather data and location name
☑️Unique colours matched up temperature values from +30C to -30C in CSS
☑️Component classnames matched up to colour names given to temperature values
☑️Hourly Data for 48 hours and Daily Data for 7 days available.
☑️For Long-Range Forecast, click “down” arrow for more detailed information about that day’s forecast
☑️Conditionals used to create plain-text versions of upcoming weather details, such as needing to bring an umbrella or coat
☑️Built using a combination of Class and Functional components, including UseState hook

Visit This Project | View Project on GitHub

View more project posts in the React category.

NodeJS Store System – Store Website

To be able to use the data from the database in a meaningful way, I chose to simulate a store website which populated its pages using the MongoDB Data.

To achieve this in a meaningful way, using JavaScript, I wrote a code that looped through all documents in the database to display every category of merchandise. From there, I wrote another script that created a new data set from the old one, this time with only one of each department, and one of each category in each data array. At that point, another script running the forEach function would then loop through each of the keys in the new category list, and display on the page every item in the department organized by category. For instance, it would return an assortment of apples in a section titled apples, before starting to return different banana types in the banana section.

Each item in the assortment then builds out a new form on the page. If you wish to add the item to your order, you simply type in how much you’d like, and hit “add to cart”. The page also renders different wording if your item is sold by the pound or individually.

The site also adds easy navigation between categories within the department you’re in, as well as an easy way to jump to another department. It is also fully responsive and works across all devices.

Visit This Project | View Project on GitHub

View more project posts in the JavaScript category.

NodeJS Store System – Data

To an average outside, one of the big parts of web development that doesn’t get noticed is information design – how the pages flow, how the data is stored, and how you access said data.

A price tag in a store is the culmination of a whole bunch of different factors. For every document stored in the MongoDB Database used in this project, there are fields for item codes, item names, item regular and sale prices, and Booleans for whether or not the item is on sale or is taxable, among many other attributes. When I took this project from a small experiment to a large full-stack endeavour, I already had stored data in JavaScript Objects. The good news here was in order to take this full-stack, these objects had to be converted to JSON format, and then uploaded to MongoDB Atlas – their cloud-based storage system. Once there, it could be accessed from any site if it were to run from an actual retail location for a multitude of purposes.

Visit This Project | View Project on GitHub

View more project posts in the Data category.

NodeJS Store System – Introduction

During the creation of my Produce Code PLU Database, I was making use of JavaScript Objects to hold the data needed for the project. This data at the time included the Item Code, Item Category, and Item Name – perfect for a code lookup tool! But I got wondering – could you sort out the data by category using an array method? And upon realizing that I indeed could, I started writing code that could easily sort out large amounts of JavaScript Objects by category, which made it easier to add even more data since it would be even easier to browse through. Within a couple of days, I had code that ran through all the JavaScript Objects that had all the item information, which now included filepaths to product images, pricing, tax information, unit of measurement information (each, or by weight), and if the item would be sold at a feature retail price. I also used this code base to build a point-of-sale system which would use another array method to calculate costs – including taxes.

All of this programming happened in a handful of hours, which is good – except it didn’t seem like as big of a challenge as it could be. It also wasn’t something that could be scaled across multiple hypothetical retail store locations very easily as it was all written in client-side JavaScript. So, with scaleability in mind, I decided to take this small retail store application and turn it into a Full-Stack NodeJS MongoDB application – one which held item data which would be used to populate a store website, but also allowed people to use that website to place an order for pickup, allowed a staff member to select the items ordered and prepare them for pickup, as well as other store functions such as signage creation.

This project is too big to describe in a single post, so stay tuned – lots more is coming!

Visit This Project | View Project on GitHub

View more project posts in the JavaScript category.