Introducing Devport - a mini portfolio maker
Tags: atlashackathon22
Published: 2022-12-08 15:33:34

## What I built

I built the web app which is [Devport](https://devport.me), A stunning portfolio maker. It's help you specially developer to make the collection of their social media and showcase them with top notch customization. It has 7+ theme which you can try in your portfolio. 


### Category Submission:

Choose Your Own Adventure

### App Link

Devport 👉 [devport.me](https://devport.me)


### Screenshots

#### Home page

![Home page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8h87z2aec9sy06emrwe8.png)

#### Feature page

![Feature page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r4p54ar8oyfq8l9jqu0x.png)

#### Dashboard Page(Set up Link)

![Dashboard Page(Set up Link)](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cwrnvmmi9hqvpkrudr6p.png)

#### Customization page
![Customization page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/132cdix13xqwaplvut11.png)

#### Profile page

![Profile page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0rymkjquz7xkmogzl7t4.png)

#### Search page

![Search page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hg9v768r64bhy9g8ab4v.png)

#### Portfolio page


![Portfolio page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nx3lg6802y4ei1wvu16n.png)

### Automated mail

![mail](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hyiwl3m20zgv2dzuik2f.png)

### Description
 
[Devport](https://devport.me) is the MIT licensed open source project that helps you specially developer to make stunning dev portfolio with top notch customization and good looking UI. You can also switch the status of your portfolio to active or offline. And One last thing, You can also subscribe to our newsletter to get engagement update of your portfolio.

### Features

- **Create Portfolio** - You can create your portfolio with your own information in just a few minutes.

- **Top notch customization** - You can use any of the 7+ pre-built themes to customize your portfolio.

- **Active/Offline status** - You can switch the status of your portfolio to active or offline.

- **Newsletter** - You can subscribe to our newsletter to get engagement update of your portfolio. There is a automated auto running in server which track the views of every user whose newsletter is enable.

- **SEO friendly** - This website is SEO friendly. You can easily rank your portfolio on google.

- **JWT based login system** - Devport is fully optimized by jwt due to which It has secure environment. 


### Link to Source Code

{% embed https://github.com/utsavbhattarai007/portfolio-maker %}

### Video
{% embed https://www.youtube.com/watch?v=VAnqkfuUf04 %}

### Permissive License

[MIT](https://github.com/utsavbhattarai007/portfolio-maker/blob/main/LICENSE)

## Background
I got inspiration from [Linktree](https://linktr.ee/), where user can make collection of their social media and showcase them to others but I don't like the classy design of linktree. So, I decided to make the one with modern design and top notch 
customization. In this way, **Devport** has been immersed.

### How I built it

I usually used Mongodb as the primary database and I love it. So, Using It as a hackathon project, enhance my backend skill. MongoDb database was my first non-sql database that I learned due to which it been easy to use it.

![mongo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sonu3ru7ndx60snxvqm4.png)

I used the basic crud functionality of Mongodb to make the backend of the devport. There are 4 schema. They are:

1. For user
2. For portfolios
3. For bot to count views
4. For token (JWT)

![mongo1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z927ghrtkysd0ogc0489.png)

### Additional Resources/Info

- MongoDb 👉 [docs](https://www.mongodb.com/docs/)

- React js 👉 [docs](https://reactjs.org/docs/getting-started.html)