git renderer

Inspiration

Inspired from seeing lots of github previews that doesn't show website ,but shows a flowchart .

What it does

1)Its a a web service that generates live previews and screenshots of GitHub repositories without requiring users to clone them locally 2)It automatically detects project type (React, Vue, static HTML, etc.) and sets up the appropriate development environment 3)It provides both visual previews and live URLs for instant access

How we built it

1)Frontend was build using react 2)Backend was built using Express.js with git integration for repository cloning, playwright for, automated screenshot capture, Dynamic project type and configuration

Challenges we ran into

1)compatibility: Supporting different project types (React, Vue, static sites) and Handling various dependencies. 2)performance: Managing memory usage for multiple previews 3)Process Management : Handling concurrent repository clones

Accomplishments that we're proud of

Seamless Integration: One-click preview generation, Automatic project type detection, Clean modern UI with real-time feedback User Experience: Real-time status updates, Detailed error messages, Mobile-responsive design

What we learned

Advanced Node.js process management Git repository handling Browser automation with Playwright React state management pattern

What's next for git renderer

1)Support for private repositories 2)Multiple branch preview 3)Custom domain support 4)Preview sharing capabilities 5)Preview history 6) Customer Usage statistics 7)Performance metrics 8)Error tracking 9)User behavior analytics by Artificial Intelligence

Built With

• cors
• express.js
• fs-extra
• git
• html/css
• javascript/node.js
• nodemon
• npm
• package.json
• playwright
• react
• vite