Salena Xu is a UI/UX designer who needed to bring her portfolio website design from Figma to life. In the end of the project, I transformed her Figma design to a live website as well as adding a Content Management System (CMS) for her to add and update content in her website.

Visit her website: salenaxu.com

Development . Deployment . Maintence

Initially, Salena only wants to have her portfolio website design in Figma brought to live as a single website. But after thinking through about the use cases that she might need in the future, I proposed to add Strapi CMS that she can use to add and update contents in her website, especially the portfolio part. By having CMS up and running, she won't need to tinker with the website source code and focus on editing content of her website through the CMS interface. This brings efficiency on her side as well as avoids technical errors that might happen due to changing the website's source code.

One page of her website design is a contact page. To make it easier to implement emailing system, I decided to use EmailJS API. The great thing about using EmailJS is automating replies and saving contacts. These contacts can then be used by Salena to track leads.

ReactJS . EmailJS . Strapi (CMS)

Before hosting her website, I suggested her to buy a domain name for her site in NameCheap. They usually offers the best prices for domain names and they have a dashboard to manage all domain names users have bought in NameCheap as well.

The most affordable hosting option with the best flexibility is Linode. The most affordable tier was under $6/mo and it's more than enough to host 2 projects. Since Linode gives SSH access to their server, I figured it would be best to setup Docker Compose for both the website project as well as Strapi project. Docker Compose makes it easier to deploy and run projects with a consistent environment. After running both Docker containers in the Linode server, her website is now live alongside with CMS dashboard.

Docker Compose . Linode . NameCheap