TRPC Todo App

A full-stack Todo application built with the T3 Stack, featuring a comprehensive suite of tools designed to showcase a modern web development workflow.

✨ Live Demo

Ver la aplicación en vivo

🚀 Features

• Full CRUD Functionality for Todos: Create, read, update, and delete todos with a user-friendly interface.
• Advanced Data Table: A custom-built, reusable data table component using @tanstack/react-table with the following features:
  • Column Sorting: Sort todos by any column.
  • Column Filtering: Filter todos by task, priority, and status.
  • Faceted Filtering: Advanced filtering with faceted search capabilities.
  • Row Selection: Select and perform bulk actions on multiple todos.
  • Pagination: Paginate through large sets of data.
  • Column Resizing: Adjust column widths for a personalized view.
• User Authentication: Secure authentication with NextAuth.js, including email/password and OAuth providers.
• Profile Customization:
  • Image Uploads: Users can upload their own profile pictures.
  • Image Cropping: An image cropper with react-image-crop allows users to crop their profile picture.
  • UploadThing Integration: Seamlessly handles image uploads and storage with UploadThing.
• Project Management: Organize todos by projects.
• End-to-End Type Safety: Guaranteed type safety from the database to the client with tRPC and Zod.

🛠️ Tech Stack

• Framework: Next.js
• Styling: Tailwind CSS
• UI Components: Shadcn/UI
• API: tRPC
• Authentication: NextAuth.js
• ORM: Drizzle ORM
• Database: PostgreSQL
• Validation: Zod
• File Uploads: UploadThing
• Deployment: Vercel

📦 Getting Started

To get a local copy up and running, follow these simple steps.

Prerequisites

• Node.js (v20 or later)
• pnpm
• Docker (for running a local PostgreSQL database)

Installation

1. Clone the repo

   git clone https://github.com/DiegoxK/TRPC-Todos.git

2. Install NPM packages

   pnpm install

3. Set up environment variables

   Create a .env file in the root of the project and add the following variables:

   # Drizzle
   DATABASE_URL=""
   
   # Next Auth
   # You can generate a new secret on the command line with:
   # openssl rand -base64 32
   # https://next-auth.js.org/configuration/options#secret
   NEXTAUTH_SECRET=""
   NEXTAUTH_URL=""
   
   # Next Auth Discord Provider
   DISCORD_CLIENT_ID=""
   DISCORD_CLIENT_SECRET=""
   
   # Next Auth Email Provider
   EMAIL_SERVER_USER=""
   EMAIL_SERVER_PASSWORD=""
   EMAIL_SERVER_HOST=""
   EMAIL_SERVER_PORT=""
   EMAIL_FROM=""
   
   # UploadThing keys
   UPLOADTHING_SECRET=""
   UPLOADTHING_APP_ID=""
   
   #Auth roles
   USER_ROLE=""
   ADMIN_ROLE=""

4. Run database migrations

   pnpm db:push

5. Run the development server

   pnpm dev