https://github.com/sebastianfdz/jira_clone

This is a Jira clone built with React and Next.js 13, featuring modern development practices and a range of powerful features. It explores React Server Components together with client side fetching and caching with React Query, among many other cutting edge technologies.
https://github.com/sebastianfdz/jira_clone

clerkauth lexical nextjs prisma radix-ui react tailwindcss tanstack-react-query typescript upstash-ratelimit zod

Last synced: 3 months ago
JSON representation

This is a Jira clone built with React and Next.js 13, featuring modern development practices and a range of powerful features. It explores React Server Components together with client side fetching and caching with React Query, among many other cutting edge technologies.

• Host: GitHub
• URL: https://github.com/sebastianfdz/jira_clone
• Owner: sebastianfdz
• License: mit
• Created: 2023-04-10T18:45:13.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2024-07-18T01:24:58.000Z (4 months ago)
• Last Synced: 2024-07-27T08:32:43.354Z (3 months ago)
• Topics: clerkauth, lexical, nextjs, prisma, radix-ui, react, tailwindcss, tanstack-react-query, typescript, upstash-ratelimit, zod
• Language: TypeScript
• Homepage: https://jira.sebastianfdz.com
• Size: 1.14 MB
• Stars: 123
• Watchers: 7
• Forks: 38
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
Jira Clone built with React and Next.js 13 (app dir)


![Tech stack](./assets/readme/tech-stack.png)

![App screenshot](./assets/readme/backlog-screenshot.png)

## Features

- Written in modern React

- Uses Next js 13.4 app directory structure

- Explores basic React Server Components

- Full user authentication lifecycle with Clerk

- Rate limiting with upstash to avoid spamming

- Modern data fetching using React-Query

- Simple local React state management, without redux, mobx, or similar

- Uses Radix UI library for unstyled components and Tailwind for styling

- Uses Prisma ORM for database modeling

- Entire app written with typescript

- End to end type safety with Zod

## Setting up development environment

- Project uses Prisma, you can decide which database to use. \*By default it uses the 'mysql' provider

- `git clone https://github.com/sebastianfdz/jira_clone`

- Create an empty `.env` file inside the root dir `/`, copy `/.env.example` contents into it, and fill in the variables needed.

- `npm install`

- `npx prisma db seed`

- Lookup 'USE THIS IF RUNNING LOCALLY' inside the project and follow the instructions.

- `npm run dev`

- App should now be running on `http://localhost:3000/`

## What's Pending?

There are features pending from this showcase product which should exist in a real product:

### Unit/Integration tests

Unit and integration tests are currently in progress... The app will be using [Vitest](https://vitest.dev/) and [React Testing Library](https://testing-library.com/docs/react-testing-library/intro/).

### End to end tests

End to end tests are currently in progress as well... The app will be using [Cypress](https://www.cypress.io/).

## Contributing

Contributions to this project are welcome. Feel free to submit bug reports, feature requests, or pull requests to help improve the app.

## Acknowledgements

- Inspired by @oldboyxx's https://github.com/oldboyxx/jira_clone

- App was initially bootstrapped with T3's [create-t3-app](https://create.t3.gg/)

## License

This project is licensed under the [MIT](https://opensource.org/licenses/MIT) license.