I decided to write a detailed article describing my entire journey creating my portfolio with Antigravity.
The sequence:
- Idea
- Approach / Strategy
- AI Choice
- Key concepts and choices for the frontend app
- Experience / Journey
- AI workflow
- Result
- Final thoughts
1. Idea
While I was searching for opinions about the WeAreDevelopers event, which I would like to participate in one day, I found an interesting opinion on the dev.to website. After reading it, I came across a pop-up from the dev.to promoting a Frontend challenge using AI.
I already wanted to create my portfolio and understand AI better, so it was a perfect opportunity to kill two birds with one stone.
2. Approach
My idea was to use the learn by doing method. I didn't want to spend many hours learning about the AI, instead, I wanted to see how intuitive my chosen AI is and how far I could go without having to provide very technical prompts.
3. AI Choice
In the challenge, we had three AI options (from Google), and I chose Antigravity. I'm going to be honest here: I chose it because I liked the name (you've probably done something similar at some point in your life, so don't judge me).
I watched the introduction video on the Antigravity website, and they presented the following method:
- Implementation plan
- Pre-requisites
- Proposed Architecture
- Implementation steps
- Verification plan
4. Key concepts and choices for the frontend app
Frontend:
- Next.js (I don't have much familiarity with it, so that's why I chose it)
- TypeScript
Key concepts:
- Easy to change
- Separation of concerns
- MVC Architecture
- Pretty UI
- Feature-based layout (
atomic design)
5. Experience / Journey
I will highlight some moments in the process of creating the portfolio that made me reflect on certain AI approaches.
- Downgrading Node version
In order to use the latest version of Next.js, the node version installed on my machine was not compatible. Instead of suggesting an upgrade, the AI decided to downgrade Next.js (I stopped it before that).
This caught my attention: why didn’t the AI suggest upgrading Node.js instead?
- Accessing web pages
During the process of creating my portfolio, I gave the AI some public links to my GitHub and LinkedIn profiles. The AI opened up a browser and fetched the information.
That was pretty impressive, and it was interesting to watch the steps it took.
- All the entities in a single file
The AI's first choice was to create all the entities inside a single file. Although this is a very basic issue, I often notice the AI choosing the most "cheap" and "compact" solutions. We need to pay attention to that. AI can read an entire codebase easily, we cannot.
- Atomic design... literally
This one is kind of funny. In the prerequisites I provided to the AI, I defined the Atomic Design, but it turns out the AI built the following structure:
Well, that was not my intention. I wanted to use Atomic Design, but not the literal folder names. I preferred a more organic separation instead of using concept names for each folder.
- Component delegation
I don't know Next.js very well, so it was not clear to me how things were working. After some back and forth with the AI, we came up with the idea of component delegation, which I really enjoyed.
6. AI workflow
I really liked Antigravity's approach. It consists of two or three steps, depending on the prompts you provide. These steps are represented as markdown files and require your approval.
- Proposal
The AI provides a markdown file containing some ideas and options you can choose from, followed by the pros and cons of each choice.
- Implementation plan
Before getting your hands dirty, the AI shows you the plan, the steps, and the goal for the action it is trying to implement.
Having this step gave me a really good feeling about what the AI is thinking and how it plans to achieve the result. It is much better than letting the AI do everything and reviewing the output only at the end.
- Walk Through
After you approve the implementation plan proposed by AI, you can see what has been implemented and the final result.
Overall, this is a pretty good idea.
7. Result
This is my application, and I'm going to break down the architecture and explain my choices.
- app: It contains the pages
- components: related to the UI and the feature-based approach
- models: entities representing the domain
- services and data: I decided to mock a JSON file with the resume structure as follows:
Resume
- Basic info
- Experiences
- Education
- Extras
For this section, I mocked the file with my data, but I kept it this way because, in the future, it can retrieve data from an API and generate the profile automatically.
8. Final thoughts
In the end, it was a really fun experience. I was able to learn more about Antigravity AI, Next.js, and Google Cloud Run. I believe that the more we expose ourselves to challenges, the more we sharpen our minds and skills.
Antigravity surprised me. It was a good experience using it, especially with the implementation plan, which was a really cool idea.
I bought a domain, and it was pretty easy to link it to my portfolio using Google Cloud. Check it out: (https://raffaeleloi.dev)
Also, I was able to learn more about the turbo pack (a really fast compiler written in Rust).
I didn't spend a lot of time on this challenge, but even so, I had fun and managed to build my portfolio, which has been on my to-do list for a long time.
Before I forget, I have been searching for a text editor that would help me avoid distractions, and I found this one zenpen.io. I used to write down my ideas, and I really recommend it.
My repo: https://github.com/Raffael-Eloi/portifolio-updated
Any comments or suggestions are welcome.
Top comments (1)
Excellent text. I felt experiencing this journey with you. Thanks for sharing!