Socialify

Inspiration

Hackers love building projects! However, it requires way too much time and design knowledge to create a social preview image for every project. That's where Socialify comes into rescue!

What it does

Socialify let’s you easily create social preview images for GItHub projects with minimal effort to make sharing your projects easier. It comes with a ton of beautiful presets and options including custom logo, description, badges, and many handpicked fonts and backgrounds to choose from.

How We Built It

The frontend of the application is built on React with TS. The application uses Relay and GraphQL to communicate with GitHub API which is proxied through Lambda functions. Finally, the image service is also built on a Lambda function to dynamically serve images.

Technologies

Open Source Tie-In

• React
• Relay
• Enzyme
• Jest

Other Tooling

• Coding Style: ESLint, Prettier, Standard, Gitmoji
• Design Framework: ant-design
• Icons: devicon
• Project Management: GitHub Projects
• Code Review: GitHub Pull Request, VSCode Live Share
• CI: GitHub Actions
• CD/Hosting: Netlify
• Cloud Functions: Netlify
• CDN: CloudFlare

Challenges We Ran Into

One challenge we faced was setting up the image service, which can be quite resource intensive requiring a chromium instance to run. Instead of dealing with poor performance running chromium inside lambda, we opt to use Screenshotter - Screenshot as a service to handle image generation.

Another challenge we faced was performance degradation while maintaining certain application state inside url parameters which we resolved using a debouncer solution.

Accomplishments that We're Proud of

The simplicity of the application in its concept and design is definitely something to be proud off, it does one particular task and does it well.

What We've Learned

This project heavily leveraged open-source best principles in terms of Project Management, CI/CD, Code Review, Style Guidelines, etc. This was definitely a good learning experience in terms of open-source best practices and rapid development.

What's Next for Socialify?

Socialify in its core functionality is completed, there are definitely areas for growth and improvement especially on the image-service side to further improve loading speeds. Future growth on the Socialify will be based on community feedback

Team

Pod 1.0.6 - Gull Requests

• Rahul Tarak
• Wei He

Built With

• css
• html
• javascript
• jest
• netlify
• react
• relay
• typescript