# Devcover - Easiest way to generate a developer portfolio Building a developer portfolio can be a difficult task, we have to think of a good design, show our best projects, our last posts blogs, talk about ourselves, offer contact details and then write the code, but as least in my case, this was very complicated to do because I didn't have enough time to dedicate it or I simply had other side projects that I was working on, leaving aside the creation of my portfolio. That is why I decided to create a tool that does all this for you with just your [Github](https://github.com) or [Hashnode](https://hashnode.com) username. [Github Repository](https://github.com/jrgarciadev/dev-cover) / [Demo](https://devcover.vercel.app) ## Inspiration I was thinking about how I could help the developer community, so the first thing I did was explore my experience as a developer and make a list of projects that could save me time. One of the items on the list was my portfolio, It was there when I realized that as developers we have what it takes to build a portfolio with just our **username** since we have enough information on platforms like [Github](https://github.com), [Hashnode](https://hashnode.com) and [Devto](https://dev.to) to show our projects, talk about us, show our latest blogs and offer contact details. But I had a problem, how do I get developers to publish their portfolios in their own domains? One word [Vercel](https://vercel.com) ## Video Demo %[https://player.vimeo.com/video/508521951" width="640" height="357" frameborder="0" allow="autoplay; fullscreen; picture-in-picture] ## Features Creating your portfolio with [Devcover](https://devcover.vercel.app), you are going to get: - Good designed and customizable portfolio - Google Analytics support to track user events - SEO friendly implemented with your data - Mobile friendly portfolio - High performance portfolio - Your latest [Hashnode](https://hashnode.com) and [Devto](https://dev.to) blogs sorted by reactions count and publish date - Your best [Github](https://github.com) projects sorted by stars count and forks count - About section from your [Github](https://github.com) **README.md** - Possibility of placing your email so that they contact you - Availability to be hired - And much more... ## Next features - Edit About section (Markdown style) - Edit and add new social networks to contact - Edit limit of blogs/projects to show - Sort manually blogs/projects - Light mode - Set default theme dark/light - Time to re-fetch data ex: every day at 24hrs ## Design Process I like to have a clear design of what I'm going to do before starting to write code that is why I started with a simple **low-fidelity** design on [Invision](https://www.invisionapp.com/) Home Design: ![dev-cover(1).png](https://cdn.hashnode.com/res/hashnode/image/upload/v1612452207639/ETl-zeuzo.png) Portfolio Design: [Click to see it](https://cdn.hashnode.com/res/hashnode/image/upload/v1612452277477/4hBXJl9KF.png) After that, I made a **high-fidelity** design on [AdobeXD](https://www.adobe.com/la/products/xd.html) Home Page: ![Dev Cover - Generator.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1612452641910/Ak8xbY7T2.png) Portfolio Design: [Click to see it](https://cdn.hashnode.com/res/hashnode/image/upload/v1612452652841/HuQLe9yTt.png) ## Challenges I had many challenges throughout the development process, such as avoiding the appearance of repeated blogs if the user has the same blogs published in [Hashnode](https://hashnode.com) and [Devto](https://dev.to), allowing the user to publish their customized portfolio, among others, in the following table I detail which they were some of them and how I solved them: | Challenge | Solution | | ------------- |-------------| | Repeated blogs | Used a library called [string-similarity](https://www.npmjs.com/package/string-similarity#for-nodejs) to detect the percentage of similarity between **Hashnode** and **Devto** posted blogs| | Clean Github readme.md | Created a custom function to format Github user Readme.md data | | Organized data from multiple sources | Used **lodash** library functions to order blogs, projects, unified data and make validations | | Save user data | Implemented a small API to save user preferences in a MongoDB database thanks to [Next.js API Routes](https://nextjs.org/docs/api-routes/introduction) and Vercel Serverless functions | | Generator mode and Portfolio mode in the same project | Local environment variables and validations to detect mode in use | | Styled Components theme and preferences dynamic changes | I used React Context API to save customizer, UI, and User data when the application is in generator mode | | Page favicon | If the user has a favicon configured on his **Hashnode** blog the application fetches it using **icons.duckduckgo** API, otherwise a favicon is created with his name initials using **dicebear** API and his primary colour preferred | ## How I create it The first thing I did was analyze all the APIs that I was going to use, [Hashnode](https://hashnode.com), [Github](https://github.com) and [Devto](https://dev.to) to verify if it had the minimum user data to build a portfolio. Then I chose tech stack to build the project, I decided to use [Next.js](https://nextjs.org) because I really like it and it's an excellent framework to build a React application for production, I used [styled-components](https://styled-components.com/) for application styles, [Apollo Client](https://www.apollographql.com) for [Hashnode](https://hashnode.com) API communication, [react-iconly](https://react-iconly.jrgarciadev.com) for Icons and other libraries that helped me a lot like that [react-markdown](https://github.com/remarkjs/react-markdown) to render Github user **readme.md** If you want to know more about project implementations and how works it here the repository: [Devcover Repository](https://github.com/jrgarciadev/dev-cover) Is open to receive contributions 🙋‍♂️ ## Usage Process Create your portfolio with [Devcover](https://devcover.vercel.app) is quite straightforward. In just a few clicks you can deploy your own portfolio. 1 . First we have to open [Devcover](https://devcover.vercel.app) website and write our Hasnode or Github username, press **Enter** or the submit button and wait while generating your portfolio it takes not much than 1-2 minutes ![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1612487987868/n4ay2GoE8.png) 2 . If you want to customize your portfolio you can open the customizer and change your name, email, your preferred colour, your page title even you can set your Google Analytics code to see users behaviour on your portfolio, I created a set of events to track as that social network link clicked, scroll events, **Show More** button clicked and blog or project clicked. ![Screenshot_2021-02-04 Junior García Web Mobile Developer.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1612488615333/RkSCakiCX.png) 3 . The when you are ready, just click on **Deploy on Vercel** button ![Screenshot_2021-02-04 Junior García Web Mobile Developer(1).png](https://cdn.hashnode.com/res/hashnode/image/upload/v1612488889182/628KRNq-y.png) 4 . You will see a screen like this, write the name of your project that you prefer (I assumed that you already have a Vercel account, but if you don't you can create one [here](https://vercel.com/)) ![Screen Shot 2021-02-04 at 22.35.57.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1612488961676/DjnT8TBa4.png) 5 . Then choose your preferred Git provider to save your portfolio project, basically what this does is clone the [Decover](https://github.com/jrgarciadev/dev-cover) and save it into your Git provider as a new project. ![Screen Shot 2021-02-04 at 22.43.22.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1612489406934/eG4GymTA5.png) 6 . Choose a project name or leave the default name ![Screen Shot 2021-02-04 at 22.43.59.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1612489446033/aAKE5aKVe.png) 7 . Then you must put your username in the **NEXT_PUBLIC_USERNAME** value ![Screen Shot 2021-02-04 at 22.45.39.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1612489774100/M6IXQfyuS.png) and VOILA! you have your portfolio deployed on your own domain 🥳🥳 ![Screen Shot 2021-02-04 at 22.49.43.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1612489954847/c4ye5geUE.png) ## Deploy your own Portfolio on Vercel If you want to customize your portfolio colours, name, bio a put your Google Analytics code, I suggest you create your portfolio from [Devcover](https://devcover.vercel.app) website. If you prefer to go faster and accept the default parameters you can click on the following button and the only thing you have to do is put your [Github](https://github.com) or [Hashnode](https://hashnode.com) username in the **NEXT_PUBLIC_USERNAME**. [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https%3A%2F%2Fgithub.com%2Fjrgarciadev%2Fdev-cover&env=NEXT_PUBLIC_USERNAME&project-name=my-awesome-portfolio&repository-name=my-awesome-portfolio&envDescription=&envDescription=Enter%20your%20Github%20or%20Hashnode%20username%20.&demo-title=APM%20Story&A%20statically%20generated%portfolio%created%20using%20Devcover) Feel free to ask in the comments or mentions me on my [Twitter](https://twitter.com/jrgarciadev). #### I hope this helps you and I would like to see your portfolio results! 👋