🎉 Next.js + Replicache + Gel Todo App Template

This starter template is crafted to help developers build and deploy applications using Next.js, Replicache, and Gel. It includes essential functionalities for real-time collaboration with offline capabilities and a ready-to-use API setup.

🚀 Features

• Next.js for building the React frontend.
• Replicache for enabling real-time collaborative features and offline capabilities.
• Gel as the backend database to store and sync data efficiently.
• TypeScript for static type-checking along with modern JavaScript features.
• Tailwind CSS for utility-first CSS styling.

Data Synchronization and Conflict Resolution

This project implements Replicache's "reset strategy" for data synchronization and conflict resolution.

For more details on the reset strategy and other synchronization approaches with Replicache, visit the synchronization strategies overview on their documentation site.

🧐 What's Inside?

This project follows a structured approach typical of Next.js applications with additional directories specific to Replicache and Gel:

🏁 Getting Started

1. Clone the repository

2. Install dependencies

3. Set up Gel

Run the Gel project initialization:

4. Set up environment variables

Create a .env.local file in the root directory and add the following environment variables:

You can get your Replicache license key by running:

Replace the Replicache key in the page.tsx file with your license key.

5. Start the development server

Open http://localhost:3000 with your browser to see the app.

🔧 Extend and customize

Modify the schema

Adjust the schema in dbschema/default.esdl to meet your application's needs. For example, add new types or extend existing ones with additional properties.

Update data fetching

Modify data fetching logic in the lib directory to enhance or alter how data interacts between the client and the database.

Enhance styles

Update the global CSS styles in app/globals.css or add new styles using Tailwind CSS utility classes.

🌐 Deployment

Deploy your application to production using Vercel:

👀 Learn More

• Next.js Documentation
• Replicache Documentation
• Gel Documentation