Since I started my journey as a software developer, writing articles is something that I've always wanted to do. Almost 3 years on the road, I realized the time was passing and I was losing the opportunity to use a great tool for my development. So, I finally decided to create my own website and start blogging.
Building it from scratch was about having complete control and learning cool new stuff like Tailwind, Contentlayer, MDX, and more. Now I have my own space where I can experiment with techs I don't get to use at work and improve my learning skills by writing articles about the subjects I'm studying.
Stay with me, I'd like to share with you how I built it, the tech choices I made, decisions, mistakes and next steps for it.
Tech Stack
Next.js
Next.js is a framework for building web applications using React components.
I've already used it to build other projects so I knew exactly the developer experience I was going to have and knew that it provides me with great features to work the performance and user experience of my website.
This first version was the perfect opportunity to get my hands dirty with the new concepts and features the Vercel team introduced:
- Integration with React server components
- Entire new project structure and file-system based router
- Font optimization, etc.
Although they don't recommend to use the new version in production, I'm doing it to know first hand how it's working and to learn and apply advanced front-end concepts.
TypeScript
TypeScript is a highly typed language built on top of JavaScript and basically ensures me in the editor that what I'm writing is working without the need to run and get the error on the browser.
My code gets a bit more extense and it takes more time to write, but using TypeScript brings me several benefits that justify this "time loss":
- Speed up the process of finding errors like typos and other common mistakes
- Great integration and intelligent code completion feature with VS Code
- Improved my level of perception of what I'm writing as I started to better analyze and organize the code.
Tailwind
Tailwind is an utility-first CSS framework that helps me build user interfaces using predefined classes. I have used it a few times and knew that it could speed up my development process if I got more practice.
Also, it's great integration with VS Code, well organized documentation and straightforward way to start using with Next.js made easy to choose Tailwind as my styling tool.
MDX
MDX is a JavaScript library that allows me to create markdown content with JSX components.
So far, its been a great development experience. Easy to start using it with Next.js, great support from the community with enough guides and examples and the possibilities of use seems to be limited by my imagination.
Also, it's worth mention that its integration with Contentlayer made pretty easy to use MDX with Next.js 13 and React server components.
Framer Motion
Framer Motion is a simple yet powerful animation library for React.
Honestly, animation was never the focus when studying front-end concepts. I don't have much knowledge or experience but with Framer Motion was easy to start implement some animation on my website.
The idea to use Framer Motion came from Zeno Rocha's website, but there are other reasons of why I continued to use:
- Documentation - well organized and full of great examples
- Developer Experience - easy to start using and great features available
Vercel
Vercel is a deployment and collaboration platform for front-end developers.
It has the best support for Next.js available out there and other reasons of why I chose Vercel are:
- Full infrastructure available to deploy with just a few steps
- Automatic CI/CD with GitHub's integration
- Free plan to work with personal projects
By using Vercel I'm free to focus on the development of my website and let them handle in the best way the complexities that comes with deploying a front-end project.
Design
My main focus when thinking about the website design was simplicity. I wanted it to be minimalist, feature focused and to have space to add new ideas in the future.
Working with design isn't one of my best skills. So, I started to search for good references on the internet and used them to create a prototype in Figma.
In the end, 2 websites were used for inspirations:
- Color scheme and animations were inspired by Zeno Rocha's website
- Elements and content structure were inspired by Delba Oliveira's website
Content
Initially, my content is focused on developers and tech recruiters. This is the place where I have the freedom to show my skills, share my knowledge and experience and also have the opportunity to improve my learning skill.
Lessons
I think it's important to discuss the main lesson I learned from this project. Leave it registered here for future reference. Maybe also help others to avoid making the same mistake.
Planning
I have no doubt that a big part of the mistakes I made could have been avoided by investing more time in planning and giving more attention to details. Sometimes I let other reasons a part from my goals with the project be the X factor when deciding something.
#1 Start a course about testing and use the project as a playground for practice
Testing was something that I had wanted to learn for a long time. Although using the project to learn about it had its benefits and the result was that I did learn a new concept and gained experience in writing unit and integration tests with Jest and Testing-library, starting a new course while working on it was bad decision.
Along the way, the difficulties we all face when learning something started to come. Using my project goals as a guide for decision-making, the time I invested in overcoming those difficulties could've been better used improving the user experience, adding other features, or completing the project sooner. In the end, most of the tests I wrote went to the trash (another mistake, shouldn't have done that hehe).
#2 Use Prismic to manage content instead of MDX + Contentlayer
Using Prismic as my content management system was also about learning a new concept - Headless CMS. It's an interesting tool to learn and I could see the benefits of using something alike to improve the work between the development and the marketing teams.
But, again, what needs do I have to consider when thinking about the goals I had with the project? I need to ensure a good writing experience for the articles and great performance for the user experience.
For a project with a single person handling development and writing the articles? MDX + Contentlayer is a better solution. It's more developer-friendly and offers better performance by loading the content statically stored within the project.
Next Steps
I don't know about you, but as I developed the project, new ideas would always come and scream inside my head, boosting my drive to continue to add features and other improvements.
The truth is that if I continued to work on the project, I'd always find things to change and would never be satisfied with the result. But that's the beauty. This website is something I don't want to be fully satisfied with. Everytime I look at it, I want to spot something to improve, a new idea to try, a new way to work on the user experience.
Hopefully, I will be able to do that, but for now, I'm happy with how it is and what I really want to work on is improving my ability to write articles and share with the world the things I'm learning as a software developer.
If you have any questions, feedback or suggestions for this site, feel free to reach out to me on Twitter, GitHub or Linkedin. I’d love to meet you!