
# Rentals Full-stack Ecommerce Application

This project was an exciting one as it’s not just a frontend project, but an entire full-stack web application I built along with a database. This application contains all the logic needed for an online rental platform, and it was a lot of fun to build.

Read more about the project at the full-length blog post: [Building a Photography Equipment Rental Platform: A Case Study](/blog).


Rentals Full-stack Ecommerce Application


## Overview

The Wabash Pastoral Leadership Program (WPLP) is a training program for pastors. The program approached me to redesign their website with the goals of improving its usability and modernizing its appearance.

Over the course of several weeks, I worked with the WPLP team to develop a comprehensive plan for the website redesign. We identified several key areas of focus, including the user experience, mobile responsiveness, and integration with the program's digital marketing strategy.

## Project Goals

The primary goals for the WPLP website redesign were:

### 1. Responsive and User-Friendly Design Across Devices

One of the main objectives of the redesign was to improve the user experience across all devices, including desktops, tablets, and smartphones. To achieve this goal, I created a responsive design that adapts to the size and resolution of the user's screen. The new design also features a simplified navigation menu and intuitive page layouts to make it easier for users to find the information they need.

### 2. WordPress CMS with Easy Editing by Staff Members

The WPLP team needed to be able to update the website content regularly, so I chose to build the site using WordPress as the content management system (CMS). WordPress is a powerful and flexible platform that makes it easy for non-technical users to create and update website content. I also provided training to the WPLP team to ensure they were comfortable using the CMS to manage the site on an ongoing basis.

### 3. Integration with Digital Marketing Strategy (SEO, UX, etc)

To support the WPLP's digital marketing strategy, I implemented several features to improve the site's search engine optimization (SEO) and user experience (UX). This included optimizing page titles and descriptions, creating a clear site hierarchy, and implementing responsive images to improve load times on mobile devices.

## The Information Gathering Process

Before starting the redesign process, we needed to gather information about the WPLP's target audience and their needs. To do this, we conducted several exercises, including building out personas and conducting a card sorting exercise. This allowed us to establish the information architecture (IA) for the site and develop a sitemap that accurately reflected the program's offerings.

We also developed funnels and user journeys for each persona to understand their needs and identify the key call-to-action for each page on the site. By developing user flow charts, we were able to illustrate how users would move through the site ecosystem from a cold lead to conversion.

## The Development Process

Once we had gathered all the necessary information and finalized the designs, we moved on to the development process. This involved building out the site designs using front-end HTML and CSS and then building out a custom WP theme.

### Using WordPress CMS

Wordpress allowed us to create entire sections dedicated to content publishing - including articles, videos, testimonials, and more. WordPress also offered strong SEO optimization, which helped us achieve better search engine rankings.

In addition, this content section of the site supported any email announcements, print mailings, and social media promotion the WPLP did. The team could post announcements to the site and include a link in communication pieces.

### Building Additional Functionality

We also wanted to include additional back-end functionality using server-side languages like PHP, including the ability to submit testimonials, register for events, make a donation, and nominate. We also built additional front-end functionality using front-end languages like JS, including interactive elements such as lead magnet popups, buttons, forms, navigation, and more.

### Accessibility

To ensure the site was fully compliant with the Web Content Accessibility Guidelines 2.0, we took a people-centric approach that focused on making the website POUR - Perceivable, Operable, Understandable, and Robust.

### Testing and Feedback

Finally, we set up an external staging site with a private link for testing by the WPLP team and any key constituencies. This allowed us to gather feedback and make any necessary adjustments before launching the site to the public.

## Tech Stack Used

*Wordpress:* As the chosen content management system, WordPress allowed us to create a flexible and scalable website that met the client's requirements. The CMS is user-friendly, which made it easy for the WPLP staff to add and edit content.

*Custom Theming:* I created a custom WP theme for the website that matched the client's branding and design requirements. This theme was designed to be responsive, ensuring that the site looked great on all devices.

*Sass for CSS:* I used Sass, a preprocessor scripting language that compiles into CSS, to write the website's CSS code. Sass allowed us to write cleaner and more organized CSS code, which made the development process smoother.

## Key Takeaways

*Information Gathering:* The information gathering process at the start of the project helped so much - we understood the target audience, their needs, and the goals of the website. It helped us develop a more focused strategy and design a website that met the client's requirements.

*Collaborative Communication:* Effective communication between the client and the development team was crucial to the success of the project. Through regular meetings and feedback, we were able to ensure that the project was on track and that the client's needs were being met.

*Attention to Detail:* Attention to detail is essential in web development, particularly with regard to accessibility and security. By paying close attention to these details, we were able to ensure that the website was fully compliant with accessibility guidelines and that it was secure against potential attacks.

## Conclusion

The WPLP project was a significant website redesign that required a comprehensive information gathering process, collaborative communication, attention to detail, and continuous learning. By using a technology stack that included WordPress, custom theming, custom plugins, and Sass, we were able to build a site that met the client's requirements, was accessible, and was secure. Overall, it was a rewarding project that helped me gain new insights and hone my web development skills.





WPLP Website


## Overview

I am excited to share my latest project - a WordPress website I built for PermanentDesigns, a tattoo and eyebrow artist. The website is designed to showcase the artist's work and to make it easy for clients to book an appointment. As a frontend web developer, I enjoyed working on this project, as it allowed me to improve my design skills as well as practice frontend dev skills. Following is an overview of the project and a look into my process when building the website.

## Project Goals

The main goal of this project was to create a simple, fast website that would allow clients to view PermanentDesigns' work and easily book an appointment. With this in mind, I designed a minimalist layout that allows the artist's work to take center stage. The website is also optimized for speed, ensuring that clients can view the artist's work without any delays. To further simplify the process of booking an appointment, I included a contact form that allows clients to send a message directly to the artist. These goals were critical in ensuring that the website met the needs of the client and provided an excellent user experience for visitors.

## Tech Stack Used

### Next.js

For this project, I decided to use Next.js, my preferred React framework. With Next.js, I was able to build a statically generated site that loads quickly and doesn't require server-side code. This approach was essential to creating a website that would load quickly for users and ensure that the website remained fast and responsive even as traffic increased.

### TailwindCSS

To streamline the design and development process, I chose to use Tailwind CSS, which I have been loving lately. With Tailwind CSS, I was able to quickly create a clean and minimalist design. Using Tailwind also made it easy to create a responsive design that looks great on a wide range of devices.

### Netlify

Finally, to deploy the website, I used Netlify, a cloud-based hosting service that offers automatic deployment from a GitHub repository. This allowed me to push changes to the website quickly and easily, as the changes are automatically deployed to the live site without any additional effort on my part. Netlify also provides features like HTTPS, continuous deployment, and version control, making it my go-to choice for hosting static websites.

## Lessons Learned

One key lesson from this project was the importance of image optimization for load times. Since the website was designed to showcase the artist's work, I knew that high-quality images were critical. However, I also knew that large image files could slow down the website's load time, negatively impacting the user experience. This project provided good practice in optimizing for load time. Fortunately, Next.js has built-in image utilities that automatically generate various sizes of images that the browser can choose from. I also used the .webp format to further decrease file size. This optimization process was crucial in ensuring that the website remained fast and responsive even with high-quality images.

## Summary

I’m very happy with how this project turned out. By using Next.js, Tailwind CSS, and Netlify, I was able to create a website that is fast, responsive, and does what it set out to do. In addition, the minimalist design hopes to highlight the artist’s work. In summary, this project was a great experience that allowed me to practice my skills as a frontend web developer and create a website that met the client's needs while providing a great user experience for visitors.


PermanentDesigns Website


## Introduction

TasKonnect is a simple app showcase website I built using Next.js, TypeScript, and Tailwind CSS. While it’s a very simple site, I was able to use the development process to learn and further hone several frontend skills. Overall it was great practice for me. In this post I’ll share a few lessons I learned along the way.

## Technology Stack

When starting this project, I chose the following technologies based on their ability to create a robust, fast, and efficient website:

- Next.js - my React framework of choice recently. For simple websites you can’t beat its out-of-the-box configuration.
- TypeScript for adding type safety and easier debugging
- Tailwind CSS for fast styling and responsive design, based off a UX mockup

## Skills Acquired

Throughout the project, I learned and practiced several valuable skills.

First, I created an Infinite-scroll logos loop. You can see this on the Customers page. I created a smooth, infinite-scrolling loop of partner logos using pure CSS animations, which enhanced the visual appeal of the website. At first I looked into doing this in a react component using JS to move the elements as needed - but after playing with it for a few hours, I figured out how to do it with pure css.

Accessibility improvements: The goal for every website is a 100% accessibility score!

Tailwind CSS: In each project in which I use Tailwind, I try to learn a little more about it. I became more comfortable using custom and one-off classes this time, among many other things. This is helping me become faster and faster at translating mockups into code.

React state management: I surprised myself by how quickly and easily I built the features I needed, which relied mainly on handling state management in React.

In addition to practicing these skills, I prioritized mobile responsiveness to ensure a seamless browsing experience across various devices. With Next.js and React, the site turned out very performant too:

## Deployment

To deploy the website, I used Netlify, which allows for a Git-based continuous deployment pipeline. This streamlines the build process and allows you to automatically push updates and ensure the latest version of the site is always live. I love it!

## Summary

Although this website was a very simple build, it was a rewarding experience that helped me develop and practice core skills. As I continue to work on new projects, I'm confident that the skills and lessons learned from this experience will serve as a solid foundation for future growth and success. Thanks for reading!


TasKonnect App Website


Building this website helped me gain familiarity with PostgreSQL and AWS RDS.

It's built on React using Next.js and Tailwind, with custom API endpoints in Node for the backend. It's hosted on Vercel for quick and flexible deployment.

Some of the things I learned or improved while building this project:

- In React, avoid using state unnecessarily. If something can be calculated from the current props and/or state, just do that and keep it as a constant in your component. Adding additional state variables will unnecessarily increase complexity and create more room for bugs.
- Setting up a Postgres database and making queries to it.
- Working with AWS more, especially RDS which hosts the Postgres database for the site.
- Filtering a list of products on the /shop page using multiple factors such as categories and sort method.
- Using Redux for state management - I'm very familiar with Redux as I've used it for many projects in the past, but in this implementation, I became more comfortable with shopping cart implementation in addition to more basic data structures.


I'm James~

Recent Projects.

Rentals Full-stack Ecommerce Application

Get in touch.

You can reach out to me via email: