Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

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

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**
## Credentials

Email - [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