Build developer portfolio with Reactjs, Nestjs, Prisma, and DhiWise.

• Building a developer portfolio is like building a house: you need to lay the foundation first and then add layers of structure.
• You can’t just start throwing up walls and hoping they’ll stay standing. You need to establish a solid -base before adding anything else.
• You’ll need to consider the content you want people to see on your site and what kind of content they’re likely interested in.
• You’ll also want a consistent look and feel across all your marketing materials so that everything looks professional.

The first step in building a developer portfolio is ensuring you have suitable materials.

The second step is to research how other developers have built their portfolios, so you know where you can start.

The versatility of a portfolio matters. The variety of the work that you have done will speak for itself in the portfolio. In addition, the content related to a position you are looking for should be well captured in your portfolio.

Once it is determined what type of material will fit the position and industry, it’s time to start! You’ll first want to ensure that all your materials are organized in a way that makes sense from an organizational perspective. Then it’s time to start adding content!

There are numerous potential solutions to this situation. Here are several ideas and a concrete example:

1. Choose a design that shows the best of your work. As a front-end developer, you might be familiar with colors, sections, designs, etc. However, if you are a backend developer, you need to go with a simple yet elegant look and feel.
2. Choose a Tech-stack to build your site. You might want to go ahead with a static site, or you can go with dynamic content where you need a database and APIs to access your content.
3. It is crucial to use the proper phrases because it serves as a showcase for your written and visual work.

‍

Let’s understand with an example.

We at DhiWise, have created a possible developer portfolio to highlight DhiWise’s capabilities using the developer’s preferred tools and libraries.

1. Design with Figma
2. Front-end with React
3. Database management with Prisma
4. Backend with NestJs
5. Application development with DhiWise

‍

Implementation

1. Database Schema in Prisma

To showcase everything in the best possible way, Schema was created. The models were Category, Site, Service, Education, and Experience. Prisma ORM is used with SQLite for database operations.

‍

2. Backend with NestJs

To Access the Data of Prisma models, the backend was built with NodeJs Framework - NestJs.

Prisma and NestJs are one of the most acceptable combinations when it comes to the backend and database.

‍

3. Front-end development with DhiWise React Builder

After the database and APIs were ready, with DhiWise’s Figma to React builder, the design was converted into a React Application.

After that, all the APIs were integrated into different sections of the page using DhiWise’s API integration feature on the “On mount” method.

And then lastly, the code was downloaded and organized for both Frontend and Backend projects to run together. The static content on the site was changed, and the website was ready to go live in 16 hours.

‍

Features of DhiWise

1. Figma to Code and its Accuracy

As the grouping and components were properly designed in Figma, Design was converted to React-code with 99% accuracy.

‍

2. Multiple API Integration on page load

As the backend was ready with APIs, with DhiWise’s API Runner, all the APIs were added quickly with requests and responses into DhiWise and then integrated into different sections using API Integration on the “On mount method” feature, so when the page loads, APIs get called and data will be filled.

‍

3. Navigation of different sections on a page

As this was a single-page application and with the menu on the side, It was required to add navigations on the different sections of the page, which also was added directly from DhiWise using its Section Navigation on the “On click method” feature.

‍

4. Git sync and deployment on Vercel.

After the completion of integration and adding navigation, the code was directly synced to GitHub from DhiWise itself, making it easy to merge changes. Then making the website ready with front-end and backend, it was deployed on Vercel.

‍

Summing Up

Developing portfolios take a lot of time. And choosing the right template takes even more time. With DhiWise, those hurdles are deprecated now.

BYOD. Bring Your Own Design and get the code.

DhiWise generates the code, which helps to customize the application how the developer wants it to. Defining a new component to modifying the generated code is extremely easy. And as and when required, a developer can update the portfolio with minimal effort.

The portfolio website, built with Prisma, NestJs, and DhiWise, is now live on Vercel and is accessible here: https://saloni-portfolio.vercel.app/.