How I created my portfolio website with React, Nestjs, and Prisma using DhiWise
Published: 2022-10-03 11:58:24

---
title: How I created my portfolio website with React, Nestjs, and Prisma using DhiWise
published: true
date: 2022-10-03 08:32:23 UTC
tags: 
canonical_url: https://jscoder13.hashnode.dev/how-i-created-my-portfolio-website-with-react-nestjs-and-prisma-using-dhiwise
series: DhiWise How to
---

![banner](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5zxj7v7mig01ex1stj5g.png)

Hi developer friends,

Sharing a personal story today

For the past two years, I have worked in the industry as a backend software engineer. I have worked on numerous freelancing projects outside of backend software, including social media marketing, content creation, front-end development, and many others. Therefore, I had to be prepared to convey the job I had done thus far.

I then considered creating a website to showcase my work.

As a backend developer, I had experience working with Prisma and Nestjs and wanted to see how React would function with these backend technologies.

So I created my Portfolio website using NestJs, Prisma, and React and built it with [DhiWise](https://app.dhiwise.com/sign-up?utm_campaign=Blog&utm_source=devto&utm_medium=cms&utm_term=30days_30usecases&utm_content=prisma_nestjs).

### I completed the website by following these steps

1. I decided what projects should be on my website, under which category, and what other content should be there.
2. Found the Figma from [Figma](https://www.figma.com/file/7rSTh3w3EF5XVvEbi8BYeA/Portfolio?node-id=4%3A1629) Community and made some changes following requirements.
3. Created the boilerplate of the NestJS Project.
4. I created tables in SQLite and models in Prisma according to the content and design.
5. Added CRUD APIs for models.
6. Used [DhiWise](https://app.dhiwise.com/sign-up?utm_campaign=Blog&utm_source=devto&utm_medium=cms&utm_term=30days_30usecases&utm_content=prisma_nestjs) to convert Figma design into React code.
7. Checked Preview of converted design.
8. Integrated multiple APIs on the page using DhiWise.
9. Downloaded the entire application.
10. I made some required changes, and my website was ready to go live in just 8 hours. Deployed the app on vercel.

### Let me spare you the details

1) On my website, I wanted to add a list of websites, services, blogs, experiences, and education. After searching, I found this Figma from Figma Community, which matched my requirements.

<iframe src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fwww.figma.com%2Fembed%3Fembed_host%3Doembed%26url%3Dhttps%3A%2F%2Fwww.figma.com%2Ffile%2F7rSTh3w3EF5XVvEbi8BYeA%3Fembed_host%3Dshare%26kind%3D%26node-id%3D4%253A1630%26viewer%3D1&amp;display_name=Figma&amp;url=https%3A%2F%2Fwww.figma.com%2Ffile%2F7rSTh3w3EF5XVvEbi8BYeA%3Fembed_host%3Dshare%26kind%3D%26node-id%3D4%253A1630%26viewer%3D1&amp;image=https%3A%2F%2Fapi-cdn.figma.com%2Fresize%2Fthumbnails%2F9f7d9ba4-9ea2-4022-9094-dd71862ff6ea%3Fheight%3D450%26bucket%3Dfigma-alpha&amp;key=a19fcc184b9711e1b4764040d3dc5c07&amp;type=text%2Fhtml&amp;schema=figma" width="800" height="450"><a href="https://medium.com/media/ddfefddfb2d44e0ef9d80990cffb9589/href">https://medium.com/media/ddfefddfb2d44e0ef9d80990cffb9589/href</a></iframe>

2) In building the backend, Using this [Guide](https://docs.nestjs.com/recipes/prisma), I created the NestJS boilerplate with the integration of Prima.

FYI, I had already installed Prisma on my machine. Then created models. Also, I created these tables in sqlite3 using CLI.

Here are the models.

<iframe src width="0" height="0"><a href="https://medium.com/media/334a93d18c8629d30cf540b2e7a45472/href">https://medium.com/media/334a93d18c8629d30cf540b2e7a45472/href</a></iframe>

After creating these models, using the following command, generate a Prisma client to access these models instances in the NestJs project for the REST APIs.

```npx prisma generate```

3) Added CRUD APIs for these models. You can follow this [Tutorial](https://docs.nestjs.com/recipes/prisma) for an example. I must say, NestJS has dope [Documentation](https://docs.nestjs.com/)!!

4) Created React application in [DhiWise](https://app.dhiwise.com/sign-up?utm_campaign=Blog&utm_source=medium&utm_medium=cms&utm_term=30days_30usecases&utm_content=prisma_nestjs) using Figma. Heres the tutorial for the same.

<iframe src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fwww.youtube.com%2Fembed%2FLn3LIKb9TYE%3Ffeature%3Doembed&amp;display_name=YouTube&amp;url=https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DLn3LIKb9TYE&amp;image=https%3A%2F%2Fi.ytimg.com%2Fvi%2FLn3LIKb9TYE%2Fhqdefault.jpg&amp;key=a19fcc184b9711e1b4764040d3dc5c07&amp;type=text%2Fhtml&amp;schema=youtube" width="854" height="480"><a href="https://medium.com/media/c7b97b8e60af3de2323010bfb61e7e52/href">https://medium.com/media/c7b97b8e60af3de2323010bfb61e7e52/href</a></iframe>

Set the Homepage and check the [preview](https://docs.dhiwise.com/docs/react/preview-app).

![homepage](https://cdn.hashnode.com/res/hashnode/image/upload/v1664793763462/djfW6TuSjL.gif)

Set home page

I ship these underrated features of [DhiWise](https://app.dhiwise.com/sign-up?utm_campaign=Blog&utm_source=devto&utm_medium=cms&utm_term=30days_30usecases&utm_content=prisma_nestjs)! Like [setting the home page](https://docs.dhiwise.com/docs/react/edit-and-configure-pages#set-homepage), [adding constants for the app](https://docs.dhiwise.com/docs/appresources/boiler-plate-features/constant), [Exporting single page code](https://docs.dhiwise.com/docs/react/edit-and-configure-pages#export-page), etc. Love them!!

5) Run the APIs locally. Enabled cors and integrated it into the Homepage.

![APIs](https://cdn.hashnode.com/res/hashnode/image/upload/v1664793765960/GWnebvzjO.png)

![Integration](https://cdn.hashnode.com/res/hashnode/image/upload/v1664793767886/VK4x_CPPJ.png)

6) After the integration is completed, [Download the source code](https://docs.dhiwise.com/docs/react/build-app#download-the-source-code-or-sync-it-to-github-or-gitlab).

7) Updated personal details, which are static, on the page.

8) And my portfolio site was ready. Deployed the app on Vercel. Here is the link to check out: [https://saloni-portfolio.vercel.app/](https://saloni-portfolio.vercel.app/)

#### Ending Notes

If you are thinking of creating your portfolio, this is the sign for you to do it now. Go to my [Git](https://github.com/DhiWise/portfolio), and clone the repo.

If you want a new design, you can just use the backend and modify it according to your needs, and you are good to go.

Follow me on [LinkedIn](https://www.linkedin.com/in/saloni-saraiya/) and [Twitter](https://twitter.com/salonii131).

* * *