A Simplified Jira Clone Built with React/Babel and Node/TypeScript
github.com
github.com
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/ :)
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.
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.
Does it look good? Nah, not particularly.
- 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
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.
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.
What we need is Jira and Trello to have a baby
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.
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.
And since most people will be inspecting the code on Github, I thought it was worth switching.
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. :)
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 ;)
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.
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.
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.
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.
Brand it differently and build something really cool here
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.
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.
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.
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
Unless it was changed since your comment: that is the UI, the project literally is a clone.
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.
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 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?
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.
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 :)
> The "features" here are technologies used.
let _count = 0;
function Component() {
return (
<div>
<div>{_count}</div>
<button onClick={() => { _count++; render(); }}>Increase</button>
</div>
);
}
function render() {
React.render(<Component />, root)
}
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>
);
}
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>
);
}
Here's a codepen: https://codepen.io/lxe/pen/RwbXPKo
... 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... :)
Just don’t allow companies to add an infinite amount of plugins and fields which would likely bring the system to a crawl.
That's an oxymoron.
* 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.