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