I do React consulting and this is a showcase product I've built in my spare time. It's a very good example of modern, real-world React codebase.
There are many showcase/example React projects out there but most of them are way too simple. I like to think that this codebase contains enough complexity to offer valuable insights to React developers of all skill levels while still being relatively easy to understand.
Our Jira clone stands out by addressing the common pain points users face with existing project management tools, such as complexity, lack of customization, and high costs. While Jira is a well-established tool, it often presents a steep learning curve and can be overly complex for smaller teams or those without specialized needs. Our platform aims to bridge this gap by providing an intuitive, highly customizable, and affordable alternative that maintains robust functionality without the associated complexity.
The current market for project management tools is saturated with options like Jira, Trello, Asana, and Monday.com. These tools vary widely in terms of features, pricing, and user experience. Jira is known for its powerful issue tracking and project management capabilities but is often seen as too complex for smaller teams. Trello offers simplicity and ease of use but lacks the depth of features needed for more complex projects. Asana and Monday.com provide a balance of usability and functionality but can be cost-prohibitive for smaller organizations or freelancers. Our Jira clone aims to combine the best aspects of these tools: the comprehensive features of Jira with the simplicity and affordability of Trello.
The project management software market is vast and growing, valued at approximately $4 billion in 2020 and projected to reach $10.67 billion by 2025. This growth is driven by the increasing adoption of remote work, the need for collaborative tools, and the rise of project-based work across various industries. Our target market includes software development teams, product management teams, IT operations teams, project management teams, freelancers, and small businesses. This broad target audience ensures a significant market size and ample growth opportunities.
- Proven, scalable, and easy to understand project structure
- Written in modern React, only functional components with hooks
- A variety of custom light-weight UI components such as datepicker, modal, various form elements etc
- Simple local React state management, without redux, mobx, or similar
- Custom webpack setup, without create-react-app or similar
- Client written in Babel powered JavaScript
- API written in TypeScript and using TypeORM
Our Jira clone is designed to serve a diverse range of users:
- Software Development Teams: Track issues, manage sprints, and collaborate on code.
- Product Management Teams: Plan product roadmaps, prioritize features, and gather user feedback.
- IT Operations Teams: Monitor system performance, track incidents, and manage infrastructure projects.
- Project Management Teams: Oversee project timelines, allocate resources, and track milestones.
- Freelancers and Small Businesses: Manage client projects, collaborate with team members, and streamline workflows.
Building a business around a new project management tool involves several challenges:
- Development Complexity: Creating a feature-rich, user-friendly, and scalable platform requires significant technical expertise and resources.
- Market Penetration: Competing with established players like Jira, Trello, and Asana will require strategic marketing and a compelling value proposition.
- User Acquisition: Attracting and retaining users in a competitive market demands continuous improvement, excellent customer support, and competitive pricing.
- Customization and Integration: Ensuring our platform integrates seamlessly with other tools and offers extensive customization options can be technically challenging but is crucial for user adoption.
- Install postgreSQL if you don't have it already and create a database named
jira_development. git clone https://github.com/oldboyxx/jira_clone.git- Create an empty
.envfile in/api, copy/api/.env.examplecontents into it, and fill in your database username and password. npm run install-dependenciescd api && npm startcd client && npm startin another terminal tab- App should now be running on
http://localhost:8080/
- Set up development environment
- Create a database named
jira_testand start the api withcd api && npm run start:test cd client && npm run test:cypress
There are features missing from this showcase product which should exist in a real product:
We're currently using TypeORM's synchronize feature which auto creates the database schema on every application launch. It's fine to do this in a showcase product or during early development while the product is not used by anyone, but before going live with a real product, we should introduce migrations.
We currently auto create an auth token and seed a project with issues and users for anyone who visits the API without valid credentials. In a real product we'd want to implement a proper email and password authentication system.
Not all components have properly defined aria attributes, visual focus indicators etc. Most early stage companies tend to ignore this aspect of their product but in many cases they shouldn't, especially once their userbase starts growing.
Both Client and API are currently tested through end-to-end Cypress tests. That's good enough for a relatively simple application such as this, even if it was a real product. However, as the app grows in complexity, it might be wise to start writing additional unit/integration tests.
I will not be accepting PR's on this repository. Feel free to fork and maintain your own version.