TasKonnect App 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!