Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ciphertron/git-ship-done
A to-do application to manage all your issues on GitHub
https://github.com/ciphertron/git-ship-done
fastify jetstream nextjs octokit prisma pusher replicache shadcn-ui supabase tailwindcss turborepo typescript
Last synced: 4 months ago
JSON representation
A to-do application to manage all your issues on GitHub
- Host: GitHub
- URL: https://github.com/ciphertron/git-ship-done
- Owner: CIPHERTron
- License: gpl-3.0
- Created: 2024-07-25T09:59:29.000Z (6 months ago)
- Default Branch: dev
- Last Pushed: 2024-07-30T12:24:42.000Z (6 months ago)
- Last Synced: 2024-10-11T02:42:11.032Z (4 months ago)
- Topics: fastify, jetstream, nextjs, octokit, prisma, pusher, replicache, shadcn-ui, supabase, tailwindcss, turborepo, typescript
- Language: TypeScript
- Homepage:
- Size: 1.42 MB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Git Ship Done - a real-time sync todo app
![Screenshot 2024-07-29 at 10 13 27 PM](https://github.com/user-attachments/assets/5e651adc-e79e-4134-a68f-3a61508e7db7)
Git Ship Done is a low latency todo application built with modern web technologies to ensure seamless real-time synchronization and efficient task management. Utilizing Replicache for real-time data sync, Fastify for a robust backend, Next.js for a dynamic frontend, and Turborepo for efficient monorepo management, this application offers a smooth and interactive user experience. Manage your tasks effortlessly with real-time updates, ensuring your to-do list is always up-to-date across all your devices.
## Key Features:
- Real-Time Sync: Instant updates across all your devices using Replicache.
- GitHub Issues Integration: Create and manage GitHub issues directly from the application. Each todo can be linked to a GitHub issue, allowing you to keep track of your tasks and their corresponding issues in one place.
- Efficient Monorepo Management: Leverage Turborepo for streamlined project organization and build processes.## Architecture:
![Screenshot 2024-07-29 at 10 58 22 PM](https://github.com/user-attachments/assets/540c73e5-c8ce-4117-8708-99240ad4e580)
## Tech Stack
- Turborepo - monorepo tooling
- Frontend
- Next.js
- Typescript
- Shad CN
- Tailwind CSS
- Replicache
- Backend
- Fastify
- Typescript
- Replicache
- Nats Jetstream
- Pusher.js
- Supabase
- Prisma
- Octokit API
## Setup Instructions
- fork & clone the repo
- run `yarn install` in the root dir of the project. This will install both BE & FE deps
- run `npx replicache@latest get-license` to create replicache license key
- add `.env` file locally with all your secrets
- Client secrets:
```txt
REPLICACHE_LICENSE_KEY=your license key
```
- Server secrets:
```txt
DATABASE_URL="your db url"
DIRECT_URL="your direct url"
GITHUB_API_URL=https://api.github.com
GITHUB_TOKEN=your PAT
REPO_OWNER=owner
REPO_NAME=repo
PUSHER_APP_ID=app id
PUSHER_KEY=key
PUSHER_SECRET=secret
PUSHER_CLUSTER=cluster
```
- Run `yarn dev` in the root to spin up both the client & the server
- Client will be running in port 3000 & server in port 8888
- Go to HTTP://localhost:3000## Development Process
- Setup Monorepo with Turborepo:- Initialize a monorepo using Turborepo to manage the frontend and backend projects.
Create two main workspaces: apps/ui for the Next.js frontend and apps/api for the Fastify backend.
Frontend Development:- Next.js Setup:
- Initialize a Next.js project in the apps/ui workspace.
- Configure TypeScript for type safety and improved development experience.
- Styling and UI Components:
- Integrate Tailwind CSS for utility-first styling.
- Use ShadCN for custom UI components, including checkboxes for todo items.
- Real-Time Sync:
- Initialize Replicache using `useReplicache` to enable real-time synchronization of todo items across devices.
- develop ui components for todo app
- Backend Development:
- Initialize a Fastify server in the apps/api workspace.
- Configure TypeScript for backend development.
- Use Supabase or any db of your choice as the SQL database for storing todo items.
- Set up Prisma ORM for database interactions and schema management.
- Define the Prisma schema for the Todo model & run migrations.- Real-Time Sync:
- Integrate Replicache on the backend to handle real-time data sync operations.
- Ensure you write controllers that'll handle the creation, updating, and deletion of todos.
- Create endpoints for Replicache push and pull to synchronize data.
- Use NATS JetStream for event handling and message streaming.
- Integrate Pusher.js to send real-time pokes to the client to let it know to pull patch from server.- GitHub Issues Integration:
- Use Octokit API to create and manage GitHub issues from the application.
- Develop endpoints to handle the creation and linking of GitHub issues to todo items.- Connect the Next.js frontend with the Fastify backend through API calls.
---
*Built with* <3 *by [Pritish](https://pritishsamal.xyz) .aka CIPHERTron*