WorkHQ

Overview

This project came from one of my long-term clients. The goal was to create a landing page from Figma design, using the following technologies:

• React.js
• Typescript
• Next.js
• Tailwind CSS

Workflow

Unlike most of my projects, I didn't start working on this project from scratch. There were already a few pages built from Figma design and I was hired to build the rest. And as any responsible developer, I had to follow the existing convention. The code was clean and although this website is pretty simple, one could tell right away that the Senior web developers has been working on it.

However... Working on this project had once again make me realize that the barrel exports using index.tsx just aren't working for me. Don't get me wrong, I use barrel exports all the time, but I always make the extra step of creating a file with the same name as the directory. Let me demonstrate what I mean by that.

A barrel export that uses index file as a root component (index.tsx)

MyComponent/
    components/
    lib/
    index.tsx

If we open up that index.tsx component, we'll see a root React component:

export function MyComponent() {
    return null
}

So far so good, but if we open up a few similar components, we'll be met with this madness (and it doesn't look better when searching for a component):

Ughhh...

Normal barrel export (index.ts + an extra file)

MyComponent/
    components/
    lib/
    MyComponent.tsx
    index.ts

MyComponent.tsx looks like it normally would:

export function MyComponent() {
    return null
}

And index.ts now looks like this:

export { MyComponent } from './MyComponent'

Which makes orientating between tabs and search results much easier! 🎉

Challenges

Since this project is a simple landing page with no dynamic elements, API calls or complex library implementations, I haven't faced any challenges while working on it.

API

As much as I love using React Query any chance I get, this project used third-party CMS as a lead-generation solution, and because of that, there was no need to implement any internal APIs.

Conclusion

Overall, it was an interesting project to work on and I'm very happy with the results.

Thanks for reading this case study!

Want to see how I helped other businesses? Head back to the Homepage to find more case studies just like this one!

✌️