I decided to revamp my old monochrome, text-based website using React and Motion. Despite initial challenges with learning React, component-based architecture, and a deeper understanding of TypeScript and JavaScript, tools like the React Tic-Tac-Toe tutorial, Storybook, and GitHub Copilot significantly boosted my productivity and understanding. These resources helped me transition and effectively build my new, more vibrant website, which now includes animations and a pleasing aesthetic. Although there's still work to be done in terms of content, the development process has been enjoyable and rewarding.

The Idea

I’ll cut straight to the point: I wanted to revamp my old website.

You can see I went with a monochrome theme, and it is heavily text-based except for my photo gallery. While it served its purpose for several years, I was getting into React and Motion. It was time for an upgrade.

The Hardest Barriers

The initial roadblocks were immense. I’ve coded throughout my life with HTML/CSS and some light JavaScript, but I haven’t kept up with the times since my primary career took up a bulk of my time and energy. I was so used to hardcoding everything into place.

The basic difficulties I ran into were:

• Transitioning into a component-based architecture/mindset

• Learning React

• Learning about routes

• Much deeper working knowledge of TypeScript and JavaScript

What Helped Me Overcome These Barriers

React Tutorial: Tic-Tac-Toe

True story here. The very first code I wrote using React was their Tic-Tac-Toe tutorial. As a newcomer to React, it really helped me learn and understand the foundation, including passing props and making sure components don’t modify them. It’s a top-down data flow with a bottoms-up architecture. I think of it as playing with Legos. The bricks are your components, and what it does supports the whole structure.

If you’re also starting off with React, I recommend completing the tutorial with minimal copy-paste as possible.

Storybook

I’ve mentioned before that I used Storybook, and I still recommend it. Using Storybook has helped me overcome the primary barrier: thinking with components. It allowed me to design and test components in isolation, away from all the other code. I think if I hadn’t used Storybook, I wouldn’t have written this article today.

GitHub CoPilot

As I started my foray into React and designing and building my new website, I came across GitHub Copilot (I’m going to call it GC from now on to save typing). At first I was a little wary. I know there are limitations to AI and what it can do for you. It makes a lot of mistakes, too. However, GitHub was offering a free 30-day trial (of which I still have two weeks left), so I thought why the hell not?

Using GC for two weeks straight, I can tell you that it boosted my productivity by about 3 times. I was able to design, develop, and code the foundation for my website in about 2 weeks. This includes becoming used to the new system. What I learned is similar to what I’ve concluded about AI in general: it cannot do everything. If you ask it to make you a whole website with a few requirements, then expect it to vomit clean, pristine, and functional code in a matter of seconds, you’re going to have a bad time.

With GC, and I believe AI in general, you have to be very specific and granular about what you ask it. For example, if you ask it to review your code and suggest improvements or a quick debug, it’s great. It’ll do that within the context of your entire workspace, which I thought was absolutely stellar. In addition, I used it a lot to help me code very specific functions to achieve an effect. It’s a bit like component-based thinking: start small, then add functions cumulatively.

In the example above, I’ve asked GC to help me with a math function, which allows me to concentrate on coding, rather than the small, fine details. In my case, it was a big productivity boost.

Here’s another example:

Here, I’ve asked GC to look at a certain function and consolidate and remove redundant or unnecessary code. It makes it cleaner, which is one of my obsessions. I really like clean code.

The Results So Far…

I’ve been very happy with the way my website is developing so far. It’s got color, some light animations to give it life, and a pleasing aesthetic. At least I think so.

It’s far from done, but I’ve reached a point now where it’s mainly about populating content and pages. I’m having a lot of fun.

Check it out at https://www.StephenJLu.com