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.

An e-commerce website using React, Redux, AWS, Node.js, and PostgreSQL.

85 & Realm: E-commerce Store

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.

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.

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.

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.

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.

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.

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.

A simple static website built with Next.js and Tailwindcss.

PermanentDesigns Website

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.

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. 

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.

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.

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.

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.

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.

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.

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.

 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.

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.

 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.

 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 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.

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.

A corporate Wordpress theme, built completely from scratch with PHP and JavaScript.

WPLP Website

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.

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

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

 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.

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

: In each project I try to learn more about Tailwind CSS. 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.

: 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:

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!

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!

A simple app website built with Tailwind and React.

I'm James~

Recent Projects.

85 & Realm: E-commerce Store

Get in touch.

Send me an email.

Or find more contact info on my resume.