Hacker Newsnew | past | comments | ask | show | jobs | submitlogin
A Simplified Jira Clone Built with React/Babel and Node/TypeScript (github.com/oldboyxx)
286 points by mariuz on Jan 27, 2020 | hide | past | favorite | 97 comments


Creator of "Jira Clone" here.

First of all I want to make it clear that this is just a showcase/demo product. It's definitely not something I'm planning to sell.

Additionally, it's not even remotely production ready, and it's missing about a zillion features that would make it a full-fledged project management software.

The main reason I built this was to have a good showcase for potential future clients.

The second reason was to share with the community. More specifically to show how to organize non-trivial React projects and to provide folks with a bunch of React code to learn from.

The third reason was to improve my skills and get better at working with hooks, TypeScript, and a couple of other things.

Back when I was learning React (4 years ago) I was a bit frustrated by the lack of non-trivial example projects. It was either a bunch of to-do lists, or hugely complex codebases like https://github.com/Automattic/wp-calypso.

I like to think that this Jira Clone presents a nice middle ground.

Bonus: Here's a Trello clone I built while learning React four years ago: https://boxd.ivorreic.com/ :)


Fewer features sounds great. I personally loath Jira, and avoid using it whenever possible, but your clone looks really nice. You can improve 100x on Jira just by making it faster, simpler, and easier to use.

One suggestion: it looks too similar to Jira, you might want to change the design a bit so that Atlassian doesn't try to sue you or something.


JIRA is great but only in an enterprise where there's a team to manage it, I've moved on from it and I miss the flexibility that it offers - but that flexibility comes with extreme complexity. Most small to medium sized businesses don't need it and can make do with something with less features.


As a counterpoint to this, jira is _not_ great in any environment precisely because it is so flexible and requires a team to manage it.

If a job needs to exist purely to maintain a third party tool that you pay for, you probably should find a new tool or make the tool yourself so that the employees work value is retained. It's the equivalent of doing a complete kitchen renovation on an apartment that you rent.


But jira isn't the problem that's being solved - a person hired full time would be a project manager, who in the absence of jira, would solve the project management problem with different tools.

Jira is not perfect. But the atlassian suite as a whole, with integration between CI, PM and version control, is quite powerful and more than adequate in many cases.

That said, boy have I seen it used terribly. It's double edged for sure.


> JIRA is great but only in an enterprise where there's a team to manage it

If you have a team to manage it then you may as well use that team to write your own, then you truly get the flexibility with none of the performance downside and having to program in crappy languages with crappy tools. Plus it can grow and evolve with your organization, for a start up a couple of cgi scripts on a rasberry pi are enough, for a large enterprise those cgi scripts are probably still 10 times faster than JIRA.

JIRA has become the SAP of bug of issue trackers and no one can use it well out of the box.


I agree.

What we need is Jira and Trello to have a baby


That thought is going to haunt my dreams tonight, thanks! If I wake up screaming in horror, I’m blaming you.


Everyone says fewer features sounds great until the missing features includes the one they reeeeaaaallly need.


What do you prefer to Jira? At a former workplace we used Gitlab, which was a pleasant suite to use. These days we use Atlassian and often find myself incredibly frustrated by their products


We've been using https://subtask.co -- it has 3 pretty awesome features which I'm baffled why Trello doesn't have:

- You can break down tasks into subtasks and those subtasks into subtasks themselves, etc

- You can dynamically group task columns by who's working on them, what is their status, what is their goal, etc

- You can arrange what's to be done on an effort-value grid, which helps immensely when choosing what to take on next


Looks good but I can't find anything on their pricing..?


Hi - (creator of subtask.co here) - Noticed a few signups coming from hn and thought I'd pop in. We're still in an early beta phase now and so pricing is still TBD - we're happy to have any input on what would work for folks though.


I did a six month contract at Apple Retail Software Engineering back in 2013, and was introduced to Pivotal Tracker. I always thought that tool worked pretty well.

I've heard good things about Rally.

Trello was good and simple, back when it wasn't owned by Atlassian (the makers of JIRA).

So far as I know, that's about it.


Request Tracker (RT) is awesome.

Does it look good? Nah, not particularly.


I have fond memories of RT, but it seems like it has largely been forgotten. It was very simple. One of the best things about it was that it could largely be used via email. The web interface was very fast and efficient compared to JIRA. One major downside: Its search feature was not great, so I would usually search in my mail client.


Check out Hive. Really nice for medium sized projects.


IMO this "Jira clone" is way beyond the middle ground, it's way too complex for that. Might be a lot closer to a product than you think. ;)

For technology showcases the RealWorld example is pretty popular: https://github.com/gothinkster/realworld. Showcasing your tech prowess is quite a bit different, I get that.

Kudos for readable hook-based code. :)


A bit off-topic: I checked out your personal website, and wow that's great! Design is simple and beautiful, copy is clear and to the point. Well done!


Missing a zillion features might not be terrible.


The whole point would be to not have a zillion features. Project management is to serve projects, not to become a thing of its own.


Thanks for sharing! You've got some nice patterns and utils in that repo.

Random question: I noticed you switched from shorthand `<>, </>` to `React.Fragment` elements. Did you have a need to use keys somewhere and decided to update them all to be consistent? Just curious.


I switched because `</>` breaks syntax highlighting on Github for `.jsx` files.

And since most people will be inspecting the code on Github, I thought it was worth switching.


Makes sense, thanks for answering! :)


You have built something very cool.

Just like Gitlab in early days. Please create a GitHub org around it and see if people want to contribute.

Only - brand it differently. Don't call it jira or clone. You'll be surprised on what a project can grow into if you paint the doors correctly.

Maybe call it Arij ;)


hey @oldboyFX, thank you very much for doing this. I really appreciate the effort and the fact that I can validate/calibrate my own skills looking at someone else's non-trivial codebase.


One of my pet theories is that if you are building a software engineering product, you should never write your own tools. You can't sell them, and you'll just be learning lessons completely unrelated to your product.

However; if you are building a software engineering culture, you should write as many of your own tools as you can get away with. Nothing builds culture like a shared unique experience.


Or, you know, you accidentally create Slack ;)


That's an interesting insight.. I found this to be true in practice too.


The real issue with jira is how unresponsive the backend feels.


I used it (Jira) for a short period of time a while back. I seem to recall that it's performance was highly influenced by non-obvious JVM parameters, and bits of the system would stall or crash without a clear pattern until a bit of trial & error with parameters solved it. It wasn't very "turn key" and the out-of-the-box config were... less than ideal. This was for a single user (me) so it's not like there was a much of a resource crunch.


Most pages take 10+ seconds to load for us and we are using Atlassian's hosting.


Opening up the Network Inspector when loading a single issue in the "new" UI shows a dumpster fire of 128 requests, 5 MB transferred. It's like the paradox of the heap: No one request is abnormally slow (although a 1.1MB slug of unminified JS from jiraplugin.zendesk.com sure isn't helping things) but the whole thing combines to give JIRA a reputation it surely deserves.


We have 'macros' in https://www.cloudsynth.com to create issues on the various issue systems (jira/github/etc) and it it is actually pretty impressive how slow JIRA is compared to the rest of them. It's like theres a sleep loop or something.


First, this clone looks very nice and worth trying if your workflow fits it.

If this tool is still needing some feature you want, Do you run JIRA cloud? Jira by no means is perfect. It's one of the few tools that can handle complexity.

I noticed a huge leap in JIRA speed in switching from cloud hosted Jira to self-hosting.

On Cloud, Atlassian is mischievous and aggressively optimizes and constrains the resources.

If you don't use Jira often enough on cloud, it will be slow. The more it is used, the faster it gets.

One way to speed up JIRA Cloud is to hit the urls regularly with a script, keeps them cached.


Mind the "What is this and who is this for" https://github.com/oldboyxx/jira_clone#what-is-this-and-who-....

Looks to me like the OP developed this to showcase his skills and get hired, not for production use by other people or with any intent of maintaining it.


I'm not one to tell anyone what to run in production or not :)


This may be so, but while I find the web app appalling, the mobile app is perfectly usable, so I am not sure it can all be the back end.


I suspect it's because the mobile app does a bunch of device-side caching and the web doesn't. Definitely their front end performance is nothing to call home about, I remember filing a ticket about slowness and being replied that 4 seconds to start painting the screen (not done loading) was "excellent performance" according to their metrics.


That's disappointing. I've always had self-hosted Jira and was hoping Jira Cloud would be more performant.


I've found ram is JIRA's friend.

One nice thing about the jvm is performance issues could be reaonsably tuned.

I have paid Jira way too much money for cloud, if I added up the 5-10s I wait for one screen to load at any given time.. It's likely a productivity hit.


maybe dont call it jira_clone. People dont like installing something called a "clone".

Brand it differently and build something really cool here


I don’t think people like using JIRA in general, especially after companies bloat it with a number of useless plugins that only certain teams will use.


After being forced to switch from Jira to a much less capable system, I now wish nobody had complained about Jira. Grass is always greener.


I would much rather not deal with jira tbh. Some companies take it too far and use jira as a micromanagement tool.


I’ve found jira dysfunction often reflects the dysfunction of the underlying corporate structure.


Yeah, any time someone complains about how many FEATURES JIRA has, it's actually an issue with how their company's management team uses JIRA to micromanage the shit out of them and aggressively optimize metrics that don't matter. But that would be an issue with the organization instead of the tool. And those are much harder to fix.


I agree. I use JIRA at work (cloud hosted) with all kinds of plugins (TestRail, Aha, etc.) and its a horrifying experience, on top of that all the fields that are used for (micro?)managing people and work is cumbersome to work with.

For my personal projects I use JIRA server (solely because its cheap at $10 and has a decent mobile app to capture ideas in tickets/boards on the move) and my experience has been pretty good.

That being said if Github had a good mobile app I'd switch in a minute. My main problem with Github issues is that you cannot edit milestones in the mobile web app.


to be fair JIRA does throw the kitchen sink in at the beginning and for effective use of JIRA, your team needs to 1) pick what to use and pick what not to use, 2) commit to it, and 3) have an experienced JIRA person that knows how to turn off everything else, and also 4) pray that JIRA doesn't suddenly turn your preferred usage mode into "legacy" which you can't use in new projects moving forward.


Sounds more like some companies you’d rather not deal with then.


relatively new DevOps user here - I miss Jira too...


But it is a (superficial) jira clone. As it stands, it's just a fun project with no commercial value


Call it simplified_jira

And stop adding features unless 90% of customer demands it. Sometimes it’s worth it to tell other people: you don’t need this feature.


But this time it's literally a Jira clone.


A bugzilla clone please. Jira is not designed to be used by software devs imho.


Jira is garbage. Its slow, clunky, and its UI doesn't lend itself to a providing users with a small learning curve. I'll take Asana over Jira because it's fast, simple, and has a low learning curve.


Really minor feedback, but I reacted almost viscerally negatively to the tickets "rotating" when you drag and drop them. Looks super unprofessional. The box-shadow and the basis of the interaction already made me know I was dragging it.


What motivated you to develop your own query and mutation hooks? Was there something unsatisfying with things like swr and react-query, or were you motivated to demonstrate/learn how to do it yourself?


I wanted to get better at writing hooks and working with hooks. Learning was one of the reasons for creating this in the first place.


That is as good a reason as any.


Good to see someone working on this. Jira is awful but they have a strong enterprise hold with a bazillion switches.

It’s slow as hell and even the simplest things in their UX takes multiple clicks. Like resolving a ticket should be as simple as dragging it to done column but JIRA makes brings an additional popup for resolution type. Annoying UX like that.

Definitely a big opportunity to make a dent here.

Feedback: don’t use Atlassian JIRA’s screenshot on the main repo page. Have a screenshot of the UI you’ve actually built.


This is a great learning project for patterns & Best practices on so many aspects TypeORM, Hooks, React, NO-Redux ... as the Author mentioned already.

I am recently using a Next & Nest combination, Combining some of the good patterns of this project with Next&Nest combination would be great. Here is a good Next/NEST starter project https://github.com/saltyshiomix/ark

https://nestjs.com/

https://nextjs.org/


> don’t use Atlassian JIRA’s screenshot on the main repo page. Have a screenshot of the UI you’ve actually built

Unless it was changed since your comment: that is the UI, the project literally is a clone.


(shameless plug):

We are building a new issue tracker for software teams. https://linear.app

Especially making the UX feel fast, we since the slowness is really annoying in software that you use daily. The app built more like native client, caching the data locally and syncing the transactions the the background. That way it also supports offline use.


Starred. Well done, I think this would be a good codebase to learn react.js from


JIRA's UX is horrible, why would you want to make a clone of that?


To get a job.


Looks great, two suggestions:

First, I wouldn't call it JIRA clone, because JIRA is a registered trademark by Atlassian and they might sue you for using it.

Second, I wouldn't call it JIRA clone because most people rightfully hate JIRA and at least to me your issue tracker seems to be simple, fast and user-centric, which is exactly what JIRA isn't.


I’ve found that keeping separate ‘package.json’ files in a client/ and server/ directory (and thus, having separate node_modules/ directories) leads to some annoying issues down the road.

I’ve heard that lerna[0] is maybe one tool that can help avoid this type of setup: does anyone have experience with this or recommend any other ways to organize separate dependency configurations within one mono-repo?

[0]: https://github.com/lerna/lerna


IME, using a single package.json is a harmful and naive practice, in abstract it results in a single product version and leads to poor separation between the client(s) and server(s) codebases.

It falls apart especially quickly when adding an iOS, TV (JS) or other client (or server) codebase.

To resolve the multiple node_module directories you can use tooling like Workspaces[0] (with both npm and yarn) which hoists the node_modules to a "workspace level".

I'd be interested in hearing other annoying issues you have with multiple package.json files.

[0] https://yarnpkg.com/en/docs/workspaces/


Not sure if this is your project OP (can’t tell from a quick bio check) but if so, GREAT idea!

I love the idea of having an open-source showcase project to help with consulting client development. It’s awesome on multiple levels - shows potential clients how you think / how you work, gives a nice resource to those learning React, etc. etc.

Nicely done :)


This is great! Really like the modern react/babel + node implementation - should make for a great reference


it's already way better than Jira.


Impressive! Just curious - how long did it take you to build this?


Just a suggestion after skimming the README: the technologies something was built with are not its features. Features are the things the software can do for the end user.


Seriously are you and many commenters here missing the point? Author says several times this is not a product, it's a showcase of his skills as well as a reference codebase for people wanting to learn how to use ts/react/hooks/whatever in medium-size complexity project. The "features" here are technologies used.


Well said !!!

> The "features" here are technologies used.


Really great, I think something like style-dictionary, or similar token manager could help remove your use of magic numbers in your styles (padding: 13px, margin-top: 7px)


I suppose this is intentional? https://www.ivorreic.com/


Just randomly reading into React over this example, I'm surprised by how React itself confused me with the useState function.


useState is a memoization technique and an abstraction to hide global state. You can do:

    let _count = 0;

    function Component() {
      return (
        <div>
          <div>{_count}</div>
          <button onClick={() => { _count++; render(); }}>Increase</button>
        </div>
      );
    }

    function render() {
      React.render(<Component />, root)
    }
Or you can abstract it:

    let _count;

    function useCount(initialValue) {
      return [_count, (value) => { _count = value; render(); }]
    }

    function Component() {
      const [count, setCount] = useCount(0);

      return (
        <div>
          <div>{count}</div>
          <button onClick={() => setCount(count + 1)}>Increase</button>
        </div>
      );
    }
And then generalize it and make each state dependent on the order of useState calls:

    const states = [];

    function useState(initialValue) {
      const state = states.shift() || { value: initialValue }; // Pop or create
      setTimeout(() => states.push(state), 0); // Defer the push
      
      return [state.value, (value) => { state.value = value; render(); }];
    }
    
    function Component() {
      const [count, setCount] = useState(0);
      const [name, setName] = useState('World');

      return (
        <div>
          <div>{count}</div>
          <button onClick={() => setCount(count + 1)}>Increase</button>
          <h1>Hello {name}</h1>
          <input value={name} onChange={(e) => setName(e.currentTarget.value)} />
        </div>
      );
    }
Actual hooks also track the component that's being rendered, and don't just call the global render function, but that's pretty much the whole useState implementation.

Here's a codepen: https://codepen.io/lxe/pen/RwbXPKo


For a developer who has not done React before - this looks super convoluted for some reason. Global functions with constants defined in another function, that act as ... methods? I'm lost :D


Global functions? It's just an example -- real world applications are more complicated.


Does that render() call in the useState function would still render the changed elements only?


No, render is global in this example. If you need to only render the component wrapping the useState, you have to track the caller (See https://github.com/facebook/react/blob/master/packages/react...)


(shameless plug!)

... or you can use something like Statium's ViewModel, which is basically a hierarchically linked, locally scoped state container component: https://github.com/riptano/statium

RealWorld example: https://github.com/nohuhu/react-statium-realworld-example-ap...

Sorry... Just... Couldn't... :)


That is interesting, earlier I enabled flash painting in your codepen and it only re-rendered/flashed the specific component that has a value changed. Maybe that was a browser feature (safari) I will look into tracking to understand what you mean.. (or maybe it's a coincidence it works as expected)


nice work! license?


https://github.com/oldboyxx/jira_clone/blob/master/package.j... claims MIT but I don't know how binding that is without an actual license file or explicit mention in anything user-facing.


Pretty cool bro. Not usually a fan of side scrolling when on mobile because it makes dragging and dropping difficult. But on mobile dragging over multiple columns is very smooth.

Just don’t allow companies to add an infinite amount of plugins and fields which would likely bring the system to a crawl.


Those are some massive git commits.


Does/will it support an API?


mate - this is super cool. Love how you structure your project (very similar to mine).


Nice work man.


> simplified > React/Babel

That's an oxymoron.


I believe they meant simplified in the sense that it isn't full-featured.


Some suggestions that may or may not be good

* Sentry.io for error tracking

* add dark mode. In fact, just let your users choose from any of the generic bootswatch css files. Use a cookie or something to remember which one so it sticks around longer than their user session. If your not using bootstrap 4 usually other popular framework's have something like bootswatch.

* use crystal lang instead of typescript or expresses for the server. You'll have a codebase that's faster and safer than typescript. You'll also be able to ship a binary to customers that don't pay the open source price.

* trello app for android has a bug where if I turn my screen off, it'll delete any text I've written but not yet saved. Don't do that.




Guidelines | FAQ | Lists | API | Security | Legal | Apply to YC | Contact

Search: