Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/khelsai01/t3_todos_app
T3 todos app build by T3 stack
https://github.com/khelsai01/t3_todos_app
next-auth nextjs prisma supabase t3-stack tailwindcss trpc-server vercel
Last synced: 22 days ago
JSON representation
T3 todos app build by T3 stack
- Host: GitHub
- URL: https://github.com/khelsai01/t3_todos_app
- Owner: khelsai01
- Created: 2024-03-17T05:33:59.000Z (10 months ago)
- Default Branch: main
- Last Pushed: 2024-04-12T06:42:00.000Z (9 months ago)
- Last Synced: 2024-04-12T14:40:22.408Z (9 months ago)
- Topics: next-auth, nextjs, prisma, supabase, t3-stack, tailwindcss, trpc-server, vercel
- Language: TypeScript
- Homepage: https://t3-todos-app-xaf5.vercel.app
- Size: 581 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# T3 Todos App
## Introduction
This project is todos app. That can help to manage your todos for the day or week. In this todos you can mention the your todo tile, description, status of the todo. And when your task or todo completed the you can mark as completed. And you want to delete the todo you can delete and reflect at real time on the your UI and delete from database as well.This todos app solve the problem to manage your daily todo list.
## Project Type
Fullstack## Deployed App
[https://t3-todos-app-xaf5.vercel.app](https://t3-todos-app-xaf5.vercel.app)## Directory Structure
t3_todos_app/
├─ .next/
├─ node_modules/
├─ prisma/
├─ public/
├─ src/
├─components/
├─ pages/
├─ server/
├─ styles/
├─ utils/
├─ env.js## Video Walkthrough of the project
[Appliction Video](https://drive.google.com/file/d/1_L_LZHosLnmztHKpaZ9V8yMN98LqC-OM/view?usp=sharing)## Video Walkthrough of the codebase
[Code base video](https://drive.google.com/file/d/1_edaIeyRJ55lSeZWCA4zLagiH4lk-AuP/view?usp=sharing)## Features
- Create todo
- Toggle the todos as Complete or Incomplete
- Detele todo from database as UI## design decisions or assumptions
List your design desissions & assumptions## Installation & Getting started
Detailed instructions on how to install, configure, and get the project running. For T3 todos app projects, guide the reviewer how to check supabase database etc.***For local***
```bash
git clone `https://github.com/khelsai01/t3_todos_app.git`
```**GO to app**
```bash
cd t3_todos_app
```**Install node_module**
```bash
npm install
```**Start Application**
```bash
npm run dev
```## Usage
1. Create todo by todo name and Detils and after click on Add Todo.
2. It will shown on UI.
3. Toggle checkbox for completed or incompleted the status.
4. Detele the todo to by clicking the Delete button then todo deleted and shown on UI as well.
5. You can edit the todo title and detail as well as.```bash
title - Reactjs
Description - This tech stack I was done in today.
```![pg1](https://github.com/khelsai01/t3_todos_app/assets/119441119/bff5814d-86f6-4efb-8ad6-dc968c9d50f6)
### Create todo without sign in
![pg2](https://github.com/khelsai01/t3_todos_app/assets/119441119/d7b2a252-cf41-4286-b570-d89dc9a9ddf5)
### Sign in by Google
Click on top right corner **Sign in** button![signin1](https://github.com/khelsai01/t3_todos_app/assets/119441119/8017e868-5518-4554-bc41-60b7519163f7)
**Take valid gamil creditional**
## CredentialsEmail - [email protected]
![selete google account1](https://github.com/khelsai01/t3_todos_app/assets/119441119/b81a24a8-db56-4eb8-adfb-331014fde279)
![del](https://github.com/khelsai01/t3_todos_app/assets/119441119/4717e719-61b0-4f5a-b803-0149394e129d)
**After toggle the complete checkbox and Delete button**
![complete](https://github.com/khelsai01/t3_todos_app/assets/119441119/9eeeca58-88a8-43b5-be86-0c14ff80fab8)
![del](https://github.com/khelsai01/t3_todos_app/assets/119441119/4717e719-61b0-4f5a-b803-0149394e129d)
***Edit the Todo***
*The todo can be selected for edit after clicking on edit button and input field automatic filled*
![edit before](https://github.com/khelsai01/t3_todos_app/assets/119441119/28a7ed62-72ba-4a7a-b420-c75314199f19)*After the input edit details and title *
![edit input](https://github.com/khelsai01/t3_todos_app/assets/119441119/c5663054-8c26-4284-97bb-57f5637e29ad)
*Afet the clicking on edit save button todo will be change or edited shown below*
![afer edit](https://github.com/khelsai01/t3_todos_app/assets/119441119/06024596-2d6d-4cf2-adbf-1975fbe15abf)
***Responsive***
![tab](https://github.com/khelsai01/t3_todos_app/assets/119441119/e8daf5fa-56d2-414b-849a-9e15385fc194)
![air](https://github.com/khelsai01/t3_todos_app/assets/119441119/704b5416-faeb-44ec-b8e3-872a664cbd6c)
![air2](https://github.com/khelsai01/t3_todos_app/assets/119441119/95d21cd6-e71d-47ef-8541-f8bb6a05eac0)
![mo](https://github.com/khelsai01/t3_todos_app/assets/119441119/535644c1-0607-4961-b398-0566fdc48872)
## Technology Stack
- T3 stack
- Next.js
- Typescript
- tRPC
- Prisma
- supabase
- Nextauth
- Tailwind
- Github
- Vercel