Inspiration

We were inspired by sites such as Resume.io that make creating professional resumes easy. So, we decided to create a similar service - but for developer portfolio websites.

What it does

Genfolio serves as a no-code platform that has a minimal interface for simple design. Users submit their GitHub profile, along with relevant information and keywords to show on their page. Genfolio fetches and lists out their GitHub repositories so they can choose their most impressive work to display on the site.

How we built it

Some of our team was already experienced with the Svelte frontend and Express.js backend API stack that we settled on for this project, so we quickly spun up a framework repository so we could get to our respective tasks. The Svelte frontend was constructed over a VSCode Live Share, which was committed under Leonid’s account. Some of the Express backend was written by David on his own local IDE and clone of the repository, as he was unable to get onto the Live Share. The backend interfaces with the GitHub APIs to read in public repositories and profiles, so we can display them for the user. Our frontend team consisted of John and [Gus] who created the landing page and UI for creating a website on the platform. We used raw html, javascript, and CSS to create the templates.

We deployed our services onto a Vultr VPS, and used an NGINX reverse proxy to handle and encrypt requests to our .xyz domain from gen.xyz, genfolio.xyz. To further ensure the performance and integrity of our services, we used Cloudflare DNS with its own encrypted proxy servers on the edge, which also protects against DDoS attacks on our service.

Challenges we ran into

Since we were using a remote Live Share for most of our development, forwarding ports in order to test the site was going to be inconvenient. Thankfully, we were able to quickly set up an easily accessed tunnel using ngrok Something about making the templates actually generate Originally, when we registered the genfolio domain, it took quite a while for our DNS records to populate, and we were unable to get Let’s Encrypt to verify and sign an SSL certificate for us to secure our site with HTTPS. After we migrated to Cloudflare from the default nameservers from gen.xyz, we were able to get much faster DNS propagation and Cloudflare-signed SSL certificates.

  • Creating a UI that flows well given the time constraint
  • Learning the nuances of Svelte while trying to quickly implement changes
  • Communicating with backend developers to test changes during development
  • creating a editor experience that feels responsive and fast

Accomplishments that we're proud of

  • Finding a balanced workflow that allowed for all of our team members to contribute code simultaneously
  • Managing to wrangle DNS records to properly deploy our domain
  • Implementing rate limiting using express-rate-limit to further guard our servers from spam/flood attacks

What we learned

Our frontend devs gained quite some experience with Svelte, and some of the libraries that can be used alongside it. Our backend developers gained expertise with the GitHub APIs and wrapper libraries, and our work on the deployment helped them learn how to register and set up a domain’s DNS records via Cloudflare nameservers, along with deploying SSL through an NGINX reverse proxy. Further, our use of Ubuntu Linux servers via Vultr gave us an opportunity to explore SSH key authorization.

What's next for Genfolio

Some good additions would be adding more templates. 3 may be good for now, but it could definitely be way more, with a far more diverse array of design languages and concepts. We could also add an OAuth2 authentication flow to make it easier for users to autofill their data from GitHub and other social media, and verify that they have permission to edit and access their site.

Built With

+ 4 more
Share this project: