Git Ship Done - a real-time sync todo app
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:
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
REPLICACHE_LICENSE_KEY=your license key
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 .aka CIPHERTron