11.1K ·GitHub
What is this?
A simplified Jira clone: a web app with a React/Babel client and a Node/TypeScript API. A React consultant built it as a showcase of a modern, real-world React codebase to read and learn from, not as a production product.
A simplified Jira clone: a web app with a React/Babel client and a Node/TypeScript API. A React consultant built it as a showcase of a modern, real-world React codebase to read and learn from, not as a production product.Is it a working app I can run, or just a code sample?It's a fully working app you run locally: the client and the API start as two separate npm processes, backed by your own PostgreSQL database. The author still frames it as a showcase product, though — several things a real product needs are deliberately missing.
It's a fully working app you run locally: the client and the API start as two separate npm processes, backed by your own PostgreSQL database. The author still frames it as a showcase product, though — several things a real product needs are deliberately missing.How do I get it running?Install PostgreSQL and create a database named jiradevelopment, clone the repo, create /api/.env from .env.example with your DB username and password, then run npm run install-dependencies. Start the API with npm start in /api, and the client with npm start in /client in another terminal tab.
Install PostgreSQL and create a database named jiradevelopment, clone the repo, create /api/.env from .env.example with your DB username and password, then run npm run install-dependencies. Start the API with npm start in /api, and the client with npm start in /client in another terminal tab.What do I need to have installed first?PostgreSQL, plus Node and npm for both apps — nothing else. No Docker or external services are involved; you just put your database credentials into the /api/.env file.
PostgreSQL, plus Node and npm for both apps — nothing else. No Docker or external services are involved; you just put your database credentials into the /api/.env file.What's missing compared to a real Jira?Four things, per the author: no migrations (TypeORM auto-creates the schema on every launch), no real authentication (anyone hitting the API without credentials gets a token and seeded demo data), incomplete accessibility, and no unit/integration tests — only Cypress end-to-end tests.
Four things, per the author: no migrations (TypeORM auto-creates the schema on every launch), no real authentication (anyone hitting the API without credentials gets a token and seeded demo data), incomplete accessibility, and no unit/integration tests — only Cypress end-to-end tests.What makes the React codebase worth studying?Only functional components with hooks, simple local state management without redux or mobx, custom light-weight UI components like a datepicker, modal and form elements, and a custom webpack setup instead of create-react-app — plus a project structure the author calls proven and scalable.
Only functional components with hooks, simple local state management without redux or mobx, custom light-weight UI components like a datepicker, modal and form elements, and a custom webpack setup instead of create-react-app — plus a project structure the author calls proven and scalable.How is it tested?End-to-end with Cypress. You create a second database named jiratest, start the API with npm run start:test, and run npm run test:cypress from the client folder.
End-to-end with Cypress. You create a second database named jiratest, start the API with npm run start:test, and run npm run test:cypress from the client folder.Why did the author build it?He does React consulting and felt most showcase React projects are too simple; he wanted a codebase with enough complexity to offer valuable insights to React developers of all skill levels while staying relatively easy to understand.
He does React consulting and felt most showcase React projects are too simple; he wanted a codebase with enough complexity to offer valuable insights to React developers of all skill levels while staying relatively easy to understand.What are similar projects?realworld, todomvc, TypeScript-React-Starter, open-saas, react-starter-kit, js-stack-from-scratch, core, wasp
realworld, todomvc, TypeScript-React-Starter, open-saas, react-starter-kit, js-stack-from-scratch, core, waspWhich topics is it in?cypress, showcase, project-management, full-stack, hooks, webpack, state-management, examples, ui-components, testing, postgresql, backend
cypress, showcase, project-management, full-stack, hooks, webpack, state-management, examples, ui-components, testing, postgresql, backend