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
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-limitto 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.