
A Simplified Jira Clone Built with React/Babel and Node/TypeScript - mariuz
https://github.com/oldboyxx/jira_clone
======
oldboyFX
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](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/](https://boxd.ivorreic.com/) :)

~~~
brenden2
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.

~~~
silicon2401
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

~~~
montroser
We've been using [https://subtask.co](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

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

~~~
clbecker
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.

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

~~~
kiliankoe
Or, you know, you accidentally create Slack ;)

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

~~~
j45
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.

~~~
areactnativedev
Mind the "What is this and who is this for"
[https://github.com/oldboyxx/jira_clone#what-is-this-and-
who-...](https://github.com/oldboyxx/jira_clone#what-is-this-and-who-is-it-
for-%EF%B8%8F).

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.

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

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

Brand it differently and build something really cool here

~~~
xyst
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.

~~~
willio58
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.

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

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

~~~
jschwartzi
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.

~~~
jitix
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.

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

~~~
burnJS
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.

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

------
a_humean
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?

~~~
oldboyFX
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.

~~~
a_humean
That is as good a reason as any.

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

~~~
LrnByTeach
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://github.com/saltyshiomix/ark)

[https://nestjs.com/](https://nestjs.com/)

[https://nextjs.org/](https://nextjs.org/)

------
enra
(shameless plug):

We are building a new issue tracker for software teams.
[https://linear.app](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.

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

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

~~~
Scarbutt
To get a job.

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

------
romellem
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](https://github.com/lerna/lerna)

~~~
brod
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/](https://yarnpkg.com/en/docs/workspaces/)

------
nlh
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 :)

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

------
ooooak
it's already way better than Jira.

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

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

~~~
mirekrusin
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.

~~~
LrnByTeach
Well said !!!

> The "features" here are technologies used.

------
rezz
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)

------
cow9
I suppose this is intentional?
[https://www.ivorreic.com/](https://www.ivorreic.com/)

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

~~~
lxe
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](https://codepen.io/lxe/pen/RwbXPKo)

~~~
scient
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

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

------
headgasket
nice work! license?

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

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

------
sourcedToRobots
Those are some massive git commits.

------
DictumMortuum
Does/will it support an API?

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

------
mikehacker
Nice work man.

------
pmlnr
> simplified > React/Babel

That's an oxymoron.

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

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

