guieiras.dev

Building my page and presenting MaterialUI Personal page

Tuesday, July 21st, 2020

Start a blog and a profile page was a long time dream. As a developer, I decided to develop the entire project and use it as a portfolio.

Initially, I chose the pages to compose the application:

  • Home page, with the introduction of my profile

  • Curriculum

  • Portfolio

  • Blog

Besides the page, I wanted to learn something different. So, I added some challenges to make funnier the project building.

  1. Integration with a SAAS Headless CMS

  2. Static page generation

  3. Support to internationalization

  4. Write the least amount of hardcoded text as possible

First, I chose the CMS. Contentful proved to be an excellent option, with good limits at the free tier, native support for internationalization, and enough resources for the content production.

Then I choose the technology. I chose material-ui for the component library as a personal preference. My most interesting decision was for the base framework. I had two options on my mind and I'd like to test both: gatsby and Next.js.

The project's first version was with gatsby: with the available plugins, it was easy to integrate with Contentful and deploy the main page.

In this project, I didn't like the page's design, it was very polluted and I was not happy at all with the result. In terms of developer experience, I was very satisfied, everything worked very well and the framework was very flexible to comply with all my purposes.

As I was going to remake application from scratch because of the design, I thought it would be a good time to test the second option, Next.js. I also added a new challenge to the project, Typescript.

As a result, material-home-page was created: a flexible, localized, and production-ready system to build a page in a few minutes.

I want to thank my friend Wendler Eis. He helped me a lot with this project. While I was developing the application, every day I used to send him a message to tell the news and ask him for feedback.

Cool Stuff

  • Typescript allowed me to change the CMS modeling several times without worrying about application exceptions during runtime. Reflect CMS modeling in the main interface was enough to let me know exactly where I should change. It was extremely productive.

  • Creating providers for content and language management ​​allowed me to create very clean components. Read components in the /pages folder is easy and develop a new page too.

  • The Next.js <head> abstraction allowed a nice working with SEO.

  • Support for multiple languages ​​was very centralized at a single point, avoid exposing too much to the components. Hardcoded texts were few and it's easy to add support for new languages.

Next Steps

  • Improve more pages' SEO

  • Improve how internationalized links are built (remove the dependency on currentLanguagePath inside component props)

  • Allow entire pages to be created through Contentful entries

  • Allow theme and color configuration through CMS

PRs and Issues are super welcome! Repository Link