Evogym

This was a quick project I used to familiarize myself with the ins and outs of both TypeScript and Tailwind CSS.

Project Built With
React
TypeScript
Tailwind CSS
Technologies

About the project

This project allowed me to get my feet wet so to speak using TypeScript and Tailwind CSS, two technologies I've been wanting to try out for some time now. I learned the basics of TypeScript of course along with several more complicated topics including enums, array and object typing, and implicit types. While completing this project I was also able to learn and practice several more topics of interest:

  1. While I'm getting more comfortable all the time replicating layouts some of the layouts for this site are fairly complicated. I worked through how to generate them on my own (using a combination of research and trial and error) utilizing a mobile first approach.
  2. While I'm no expert with Tailwind CSS, I do now love it and am excited for the next project where I'll get to use it. I was able to play around and figure out what can be done and implemented a few of the more advanced capabilities of Tailwind in this project including implementing media queries, using pseudo-elements and pseudo-classes, and imbedding image URLs in the tailwind config file.
  3. I implemented a side scroller from scratch, something I had never done before. I used this in combination with a some pseudo-classes to create a really cool hover effect for the images in the side scroller.
  4. I created a usable form using a combination of React Hook Form and FormSubmit.io. I had noy yet created a form in this way and I'll definitely be using this on future projects.

What was the goal of the project?

I completed this project to get more familiar with writing React apps that incorportated some of the more professional and enterprise level technologies in demand today. It is important to me to be as up to date as possible with the industries needs from developers.

Shot of the image slider created for this project.

Project execution

This project was created using an online tutorial as a guide. I completed it in sections, doing as much as I could on my own, then following up afterward to ensure I hadn't made any mistakes. I've grown more comfortable using React and was able to knock those sections out pretty quickly. The real reason for using the tutorial was to learn TypeScript and how to implement it in a project.

Project results

I loved doing this project becuase I discovered that I absolutely love both TypeScript and Tailwind CSS. I'll be using Tailwind now on every project and I've got a few ideas for some larger projects I'll be using TypeScript on in the future. I really like the idea of TypeScript because it fits in perfectly with my own personal philosophy; a little bit of extra work now can save you a mountain of work later!

Project completed on:

January 26, 2023