OpenAI, Beautiful DND 을 이용해 Next.js 13 App Router 로 구현한 TODO 앱
A comprehensive to-do board application built with modern web technologies.
generateSummary/route.ts: Handles the route for generating summaries.
globals.css: Contains global styles for the application.
layout.tsx: Defines the main layout structure of the application.page.tsx: Represents the main page component.
Board.tsx: Represents the main board where tasks are displayed.Column.tsx: Represents individual columns on the board.Footer.tsx: Component for the footer section.Header.tsx: Component for the header section.Modal.tsx: A generic modal component.TaskTypeRadioGroup.tsx: A radio group component to select task types.TodoCard.tsx: Represents individual to-do cards on the board.
fetchSuggestion.ts: Fetches suggestions.formatTodosForAI.ts: Formats to-do items for AI processing.getTodosGroupedByColumn.ts: Groups to-do items by their respective columns.getUrl.ts: Utility to get URLs.uploadImage.ts: Handles image uploads.
BoardStore.ts: Manages the state of the board.ModalStore.ts: Manages the state of modals.
This project provides a structured way to manage and visualize tasks on a board, with various components and utilities to enhance the user experience. The application is modular, with clear separation of concerns, making it scalable and maintainable.
📦 soom-todo-board
├─ app
│ ├─ api
│ │ └─ generateSummary
│ │ └─ route.ts
│ ├─ favicon.ico
│ ├─ globals.css
│ ├─ layout.tsx
│ └─ page.tsx
├─ appwrite.ts
├─ assets
│ └─ soom_todo_logo.png
├─ components
│ ├─ Board.tsx
│ ├─ Column.tsx
│ ├─ Footer.tsx
│ ├─ Header.tsx
│ ├─ Modal.tsx
│ ├─ TaskTypeRadioGroup.tsx
│ └─ TodoCard.tsx
├─ lib
│ ├─ fetchSuggestion.ts
│ ├─ formatTodosForAI.ts
│ ├─ getTodosGroupedByColumn.ts
│ ├─ getUrl.ts
│ └─ uploadImage.ts
├─ openai.ts
├─ store
│ ├─ BoardStore.ts
│ └─ ModalStore.ts
└─ typings.d.ts