After delays due to personal activities, I have completed the website for my brand TAG Designz.
You can visit it here: https://tag-designz-site.vercel.app/
Some weeks back, I posted an update video and today, I’ll give a deep dive of what I’ve learnt from this project.
Please note: this project isn’t 10/10. I’m still learning new technologies and plan on adding new features later in the future.
With that being said, let’s take a deep dive into the tools used and lessons learnt.
1. Next.js
Prior to this project, I had never used Next.js in a project.
I have come to see the advantages of Next, including having its own routing system, UI and API routes, customization and more.
For example, previously I didn’t always use an alt tag in my images, but with the next/link component, I was forced to do so. And that’s very helpful because alt tags plays a huge role in SEO and for accessibility features.
My favourite feature so far has been the Pages routing system. No need for React Router anymore :)
2. React Transition Group
I have always been frustrated since I started learning React due to one reason. That was because I didn’t have a way of adding smooth transitions between states.
As a person who loves adding motion in certain components, I was stuck. Until I read about React Transition Group.
I used React Transition Group in certain accordion components on the website.
I’m looking forward to using more of it.
3. Tailwind CSS
I have been using Tailwind in all but one of my React projects. However, using Tailwind with Next.js was a little bit difficult to set up.
But with help for various blog articles, I was able to set it up and created some styled components to use throughout the website.
4. Nodemailer
I don’t use tools like Nodemailer often but I had to for this project.
Following some tutorials and help from the good ol’ pal, ChatGPT, I was able to make email sending work via Gmail.
I am aware that Nodemailer might not be the best secure method of sending emails, but until I improve my backend skills, I’ll have to make do with it.
5. ChatGPT
What would this list be without the one and only?
ChatGPT helped me revise my code and suggested changes to make it better.
It helped a lot with major Nodemailer and React Transition Group issues I had.
6. Figma
Planning the design in Figma before starting the development process structured my workflow.
I didn’t have to start guessing layouts, thus extending the time to finish up the project.
From now on, every project I take on will be planned, designed and prototyped in Figma before developing.
It also aids with getting exact dimensions for assets used in the project, so the design looks identical to the live version.
Personal lessons learnt
i. Progress: Life happens and this could affect a project. The key is to keep pushing and trying to move forward, learning new things and practising. Also, having an optimistic mindset helps.
ii. Procrastination: This isn’t new to me, it’s a constant battle. But what helped me reduce procrastinating in this project was looking back at the progress made — not only on this project but also my coding journey. It might not be the most impressive, but personally, I know what it took to reach where I am today.
From coding almost daily, to losing hope in coding, to needing to restart learning fundamentals, it hasn’t been an easy journey and it also won’t be all smooth sailing going forward. But progress and consistency, to me — is key.
iii. Reading: I read lots of articles and documentations during this project, and I’ve come to see firsthand, reading technical articles regularly not only keeps a developer abreast of new trends, but also improves creative thinking and appreciation for code written by others.
There are other lessons learnt but I think it’s best to stop here.
Please let me know in the comments any feedback you have after visiting the site.
More projects with Next.js and Chakra UI (which I’m excited about) coming soon.
Massive thanks to: freeCodeCamp for their Next.js courses. Danny Thompson_ ,_ David Herbert for their inspirational posts.
Thanks for viewing, I appreciate you.
Top comments (0)