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.
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.
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.
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.
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.
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.
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)
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
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.
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.
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.
This project is too big to describe in a single post, so stay tuned – lots more is coming!