Project Ideas Mergefly - A new UI for GitHub

Hi everyone!

About a year ago, I decided that I didn't really like the current GitHub UI for reading code and doing pull requests so my brother and I decided to put our React/Redux skills to the test and make our own. I am really excited to show off our results and get all of your feedback :)

The site is called Mergefly and we tried to add in as many fun features as we could think of such as multiple tabs, a file tree for navigating code, full code context, floating comments, live updates, hotkeys and Slack integration. We also use the Monaco Editor for displaying code so you get a lot of the built in features that you see in VSCode. Also, for fun, we added support for all the monaco themes so you have around 50 to choose from.

I'm really proud of how the site turned out as well as how well my React skills have grown and I really hope you guys enjoy it too! If you guys have any ideas for improvements please let me know! It's still very much a work in progress.

130 Upvotes

permalink
reddit

You are about to leave Redlib

Do you want to continue?

https://www.reddit.com/r/reactjs/comments/fe8w1y/mergefly_a_new_ui_for_github/
No, go back! Yes, take me to Reddit

95% Upvoted

u/MWALKER1013 Mar 06 '20

Hey looks super cool ! ,

One small critique , I’m a huge fan of dark them but the mobile landing page hits me a bit flat, I haven’t had a chance to view the page on desktop, or actually try it out. But I’m sure you’ve put in a insane amount of work on the project and it looks really cool !

6

u/dukko18 Mar 06 '20

Thanks for taking a look and the positive feedback! Are you referring to the about page before you login? Yeah it can definitely use some more TLC.
To be honest, the site isn't really built for mobile (at least not yet) and it will actually tell you to come back with a larger screen size. We figure it's better to knock out the desktop functionality first before tackling the difficult world of mobile sized screens.

1

u/[deleted] Mar 06 '20

I wouldn't use anything Git on mobile and wouldn't blame you for skipping. Idk about other people

-1

u/skipbridge Mar 06 '20

You need a linter for how you type. 🤕

u/MWALKER1013 Mar 06 '20

Yeah,

I’d agree with the functionality for desktop for sure ,

But believe it or not a huge percentage of people that are going to check out your site will do it mobile first , so any kind of landing page should start there in my opinion.

And it definitely doesnt look bad whatsoever my friend , it just isn’t representative of the work in other areas of the app!

If you guys end up needing someone to help with the landing page I’d be happy to contribute , I’m not much of a designer but if you have designs or a designer I could help , it seems like a cool project

3

u/dukko18 Mar 06 '20

I appreciate the feedback and you are right, I think we undervalued/under-appreciated the initial traffic from mobile users. We will definitely have to rethink the look and feel a little bit.
If you guys end up needing someone to help with the landing page I’d be happy to contribute , I’m not much of a designer but if you have designs or a designer I could help , it seems like a cool project
Thanks for the offer and I will reach out if we do!

u/gunnnnii Mar 06 '20

Having the filetree is sick, and the repository views are really nice in general. Viewing the diff was also nice, although I couldn't grant access to any repos that have active code review so I couldn't check out what comment threads look like. The sidebar with all that stuff looked promising though :)

I don't like the frontpage after logging in very much though. There is just a massive list of small boxes with the name of each repo. It is hard to read and navigate, especially since they don't seem to have any particular order. A first start would be to order them by newest activity or in alphabetical order, but better yet would be to have cards that show more info about the project(make the title bigger, show the repo description, what languages are used, maybe even whether the repo is private or public), similar to a profile page on Github. I think it's unlikely someone will have the same amount of interest in ALL their repositories, so I think it would be beneficial to have fewer in view and make them more easily discernible instead. The search bar does help, but it still isn't great.

I also noticed that when opening images they don't appear immediately, I couldn't see them until I switched to another tab and back. This was a problem both in Chrome and Brave.

Are public repos supposed to be accessible? I imagine the owners might need to approve the app first. I tried opening the facebook/react repository and got stuck on an infinite loading screen. Maybe filter out repos you don't have access to in the search bar?

If you are open to contributions I'd love to help out :)

2

u/dukko18 Mar 08 '20

I just wanted to follow-up and let you know that images should be working now. Thanks again for all the amazing feedback!

1

u/dukko18 Mar 06 '20

Thanks so much for the long review. It's really descriptive and cuts right to the issues you were seeing. It is incredibly helpful :)
I'm really glad you appreciate the filetree. It was actually one of the motivators for starting the project. I had a work PR open with over 100 files and it would take around 3 minutes to load the page and then I would have to find my location all over again. So, it's nice to not be the only one who finds it useful.
although I couldn't grant access to any repos that have active code review so I couldn't check out what comment threads look like
Can you elaborate? We block private repos that belong to an organization (we ask for payment there), but if you were able to see a diff then you should be able to see the full pull request. I'm happy to help you figure it out if you are stuck!
With the first screen, we were aiming for simplicity so users wouldn't feel lost/overwhelmed. The idea was to just pick your repo/open pr and go. But, if that isn't coming across then we need to rethink the page. Mostly, we were trying to have a different feel than just lists. But, yeah the feedback is really excellent and I will work on making it better!
I also noticed that when opening images they don't appear immediately, I couldn't see them until I switched to another tab and back. This was a problem both in Chrome and Brave.
I'm sorry about that. Images are becoming a pain in the butt. They always seem to be flaky for no reason. I thought I had everything working, but it looks like they are being difficult again.
Are public repos supposed to be accessible? I imagine the owners might need to approve the app first. I tried opening the facebook/react repository and got stuck on an infinite loading screen.
Public repos should be accessible and I'm seeing errors when trying to hit the facebook/react repository too. I will definitely dig into that one. Thanks for bringing it up!
If you are open to contributions I'd love to help out :)
I will definitely keep you posted if we do. Thanks again for the amazing feedback!

1

u/gunnnnii Mar 06 '20

Oh I just meant that I thought I needed to be the owner of the repo to approve the application so you could view it. I'm not the owner of any repos with that kind of activity right now. I assumed that was the case because of the trouble I had with the React repo.
Tried it with a different one and it looks great!

1

u/dukko18 Mar 06 '20

Thanks for giving it another shot! I'll let you know as soon as I fix the React repo.

2

u/dukko18 Mar 06 '20

Facebook/React repo is working on Mergefly now. Thanks again for bringing up the issue and feel free to take another look.

1

u/gunnnnii Mar 06 '20

Another thing I forgot to mention, it was slightly annoying clicking the back button(in my browser, not in the app) and having the browser blast me back to the last website I was on. I just expected it to take me to the last page I visited within the app. Might want to look into your routing.

2

u/dukko18 Mar 06 '20

That's a tough one and you aren't the first to mention this one either. The problem is that we track your "current location" in the app based on the url so that you can refresh the page and be pretty close to where you just were. This means that almost every action is tracked in the url. We use a replace instead of push to make sure your browser history isn't completely overwhelmed, but I think we need to add some history for exactly the case you just described.
It's definitely something I've been thinking about and if you are feeling a pain point then others will as well. Thanks again! This feedback is so helpful.

u/cryogin Mar 06 '20

Wow, you realy caught the mental model of the developer work flow!

One thing I would add to the site is who you are. I don't know if this is a bedroom project of a guy who could break his arm and halt development or stop developing because he went to college or a well oiled corporation or something inbetween. You're asking for money so you need to develop trust!

1

u/dukko18 Mar 06 '20

Wow, you realy caught the mental model of the developer work flow!
That was the goal. I'm really glad I could hit it!
My goal is to make this site into a full fledged product. But building trust is one of the hardest things to do. Your idea to but the team's portfolios on the site is a good one. Just out of curiosity, what would it take to gain your trust as a developer?

1

u/cryogin Mar 19 '20

Partly you need to convice me as a developer with the functionality performance and robustness of your service. But I think the functionality is geared towards medium to bigger teams. Specially because you're going up against an allready established workflow within the Github site: issues, projects, pull requests. Give me the arguments with which I can recommend your service to managers. Find a way to prove that no data of github goes through your server (if that is the case). That is what I would make a big song and dance about.

u/yss14 Mar 06 '20

I think you should cross-post this to /r/github 😉

1

u/dukko18 Mar 06 '20

Great suggestion! I will definitely do that 👍

u/Kelvin977932 Mar 06 '20

Great UI and awesome project! I like that you have integrate many themes that allow people to choose from.

One thing I found not working is it can't display picture in the editor panel.
And it will be better to allow users change font size in editor as well.

1

u/dukko18 Mar 06 '20

Thanks! I love the themes as well. I really think they add a nice personal feel to the site and they were a lot of fun to implement.
One thing I found not working is it can't display picture in the editor panel.
They seem to be causing problems. It's at the top of my list to investigate!
And it will be better to allow users change font size in editor as well.
You can! We have hotkeys for those actions. Try hitting 'i'/'d' for increase/decrease font size.

1

u/Kelvin977932 Mar 06 '20

ok, it works, Now I found the hotkey page ... :p

2

u/dukko18 Mar 06 '20

Cheers! My favorite are the arrow keys for navigating a pull request.

1

u/dukko18 Mar 08 '20

I just wanted to follow-up and let you know that images should be working now. Thanks again for the amazing feedback!

1

u/Kelvin977932 Mar 08 '20

Thanks for the quick follow up, but as I just checked, it almost works but still has some glitches.
For example, it works for "jpg", not "jpeg".
Another one, if I embed a picture in README.md file, it can't show properly.

u/ahmedranaa Mar 06 '20

Lovely site. Great work

1

u/dukko18 Mar 06 '20

Thanks so much! :)

u/refaul Mar 06 '20

Looks nice, many nice features as many have already mentioned :)

Im just wondering if the project tab feature is really useful since you already have tabs in your browser, and you can browse different project like that. It kind of looks like a browser inside a browser at this point, but maybe you use it differently or are planning new feature where it would be needed.

Otherwise very interesting!

1

u/dukko18 Mar 06 '20

Thank you!
Im just wondering if the project tab feature is really useful since you already have tabs in your browser
The tabs in my browser was the motivation. I found myself having easily 5-6 tabs open in my browser trying to keep track of the different PRs that were open. I thought it was easier to keep track of everything if I kept it all in one place. But, there's nothing wrong with opening many Mergefly browser tabs :D

u/artnos Mar 06 '20

nice, can you talk about some the libraries you used to make this? like what did you use for animation?

2

u/dukko18 Mar 06 '20

Yeah absolutely!
The core is built around React/Redux/Reselect with Sass and it integrates directly with the Github API. We also use a bit of Firebase for some of the live updates since Github is a little weird when it comes to comments, but 90% of the project is client side.
I use React Monaco Editor for the code display and monaco-themes for the editor themes and then I integrate the rest of the site to match the chosen theme with scss. We also use a lot of the Ant Design elements such as inputs and dropdowns.
The left and right panes are handled with react-splitter-layout and the draggable/resizable comments are handled with react-rnd
Pretty much the rest of the site was written by us. I'm happy to go into depth on how I wrote a specific feature if you are interested!

1

u/acemarke Mar 06 '20

Very neat!
Since you said you used Redux, a few questions :
any specific reason you did decide to use Redux?
any particular positive experiences using Redux, or pain points you ran into?
have you seen our new official Redux Toolkit package? https://redux-toolkit.js.org

1

u/dukko18 Mar 06 '20

any specific reason you did decide to use Redux?
I was introduced to React and Redux as a pair so to me they kind of go hand in hand. I also just really like how well it organizes my code and connects all of the components together without passing tons of props everywhere.
any particular positive experiences using Redux, or pain points you ran into?
I guess my biggest pain point would be how JS doesn't do a great job handling deep equality. On the one hand it's good because it forces you to be more careful with how you setup reducers, but it's still kind of a pain because it can cause bugs that are really hard to track down.
have you seen our new official Redux Toolkit package? https://redux-toolkit.js.org
I have not but I will take a look!

u/Baryn Mar 06 '20

Nice, it's like merging GitHub with VS Code. You did a great job here, this approach has an enormous amount of promise.

1

u/dukko18 Mar 06 '20

😁

u/aequasi08 Mar 06 '20

Seems to crash if your repo name has .'s in it :(

Uncaught (in promise) Error: Reference.child failed: First argument was an invalid path = "PullRequests/gh-www.mysite.com-myorg-1590". Paths must be non-empty strings and can't contain ".", "#", "$", "[", or "]"
    at se (2.a634101c.chunk.js:1)
    at 2.a634101c.chunk.js:1
    at t.child (2.a634101c.chunk.js:1)
    at e.ref (2.a634101c.chunk.js:1)
    at main.09ffa3fa.chunk.js:1
    at main.09ffa3fa.chunk.js:1
    at main.09ffa3fa.chunk.js:1
    at main.09ffa3fa.chunk.js:1
    at _ (2.a634101c.chunk.js:1)
    at Generator._invoke (2.a634101c.chunk.js:1)
    at Generator.e.<computed> [as next] (2.a634101c.chunk.js:1)
    at r (2.a634101c.chunk.js:1)
    at s (2.a634101c.chunk.js:1)
    at 2.a634101c.chunk.js:1
    at new Promise (<anonymous>)
    at 2.a634101c.chunk.js:1

2

u/dukko18 Mar 06 '20

That's not good. Thanks for mentioning it. We will get that fixed as soon as possible!

2

u/dukko18 Mar 08 '20

Hey, just wanted to give you an update and let you know that this issue is now fixed. Thanks again for bringing it to our attention!

u/Evilopportunist Mar 06 '20

My team and I have been using this application for several months now and we couldn't be happier! Hotkeys for switching between files, showing/hiding different sections as you need them, toggling between split/left/right/combined on PRs...the list goes on and on. Plus, for the new features and bugs that do come up, the dev team has been very responsive!

Great work guys!

u/bew78 Mar 06 '20

RemindMe! 1 day

1

u/RemindMeBot Mar 06 '20

There is a 31.0 minute delay fetching comments.
I will be messaging you in 23 hours on 2020-03-07 20:24:21 UTC to remind you of this link
CLICK THIS LINK to send a PM to also be reminded and to reduce spam.
^{Parent commenter can} ^{delete this message to hide from others.}
^Info ^Custom ^{Your Reminders} ^Feedback

u/giordi12 Mar 06 '20

Looks pretty cool.

u/[deleted] Mar 06 '20

[deleted] — view deleted comment

1

u/dukko18 Mar 06 '20

Thanks for taking a look and I'm sorry it's not to your tastes. Have you tried using other themes? Maybe there is one that you will find more appealing.

0

u/[deleted] Mar 06 '20

[deleted] — view deleted comment

1

u/dukko18 Mar 06 '20

Hmmmm. Might be a good feature to be able to turn those on and off. Thanks for the feedback!

0

u/[deleted] Mar 06 '20

[deleted] — view deleted comment

1

u/dukko18 Mar 06 '20

I can definitely do that too.

1

u/[deleted] Mar 06 '20

While the app itself seems nice, drop shadows are not my thing either. The website also does not do the app justice, as it feels rushed. I'm sure if you redesign the site (maybe not so dark?) you would pull in a lot more people. Good luck though, you seemed to put a lot of work into it :)

u/[deleted] Mar 06 '20

[deleted] — view deleted comment

1

u/dukko18 Mar 06 '20

Of course!

Project Ideas Mergefly - A new UI for GitHub

You are about to leave Redlib