⚡ Project Title

Taskify

A web application that provides scheduling management and sharing features.

⚡ Project Overview

Reason for Selection

• Real-time data synchronization
• Intuitive and manageable UI/UX

Key Features

• Login: Authenticate users and store session data in cookies or local storage.
• Logout: Clear session data on logout to securely end the session.
• Dashboard
  • Create Dashboard: Users can create a new dashboard.
  • Vertical and Horizontal Drag-and-Drop: Users can freely drag and drop items or cards within the dashboard both vertically and horizontally to change their position.
  • Column-Card Create, Edit, Delete Modals: Users can create, edit, or delete columns and cards.
  • Infinite Scroll for Cards: If there are many cards in the dashboard, load more cards through infinite scroll.
  • Card Preview: When users click a card, they can preview the contents of the card.
  • Comment Creation, Edit, Delete: Users can add, edit, or delete comments on cards.
• Invite Members: Users can invite others to their dashboard or project.
• Edit Profile: Users can edit their profile information.
• Sidebar Dashboard List: Users can view the dashboards they have created or been invited to in the sidebar and easily access the desired dashboard.
• Responsive Design: Supports desktop, tablet, and mobile views.

📅 Development Timeline

2024.11.14 ~ 2024.12.02

👊 Team Members

김지윤	👑 김희진	나승엽	나지원
@21ow	@devmanta	@najitwo	@naseungyeop

📚 Tech Stack

Environment

• 
• 
• 
• 

Config

• 
• 

Development

• 
• 
• 
• 
• 
• 
• 

Major Libraries

• 
• 
• 
• 

Project Management

• 
• 

Design

• 

Hosting

• 

Communication

• 

🗂️ Project Structure

/public
  ├── /icons                  # Icon folder
  └── /images                 # Image folder

/src
  ├── (page folders)          # Page folders
  │   ├ folder                # Specific page component folder
  │   ├── layout.module.css   # Layout styles
  │   ├── layout.tsx          # Layout component
  ├── /api                    # API-related files
  │   ├── accessToken.ts      # Access token handling
  │   └── login.ts            # Login API
  ├── /app                    # App-wide files
  │   ├── /fonts              # Font files
  │   ├── layout.tsx          # App layout component
  │   ├── page.tsx            # Main page component
  │   ├── reset.css           # Global CSS reset
  │   └── variables.css       # Global CSS variables
  ├── /components             # Reusable components
  ├── /constants              # Constants
  │   ├── cookies.ts          # Cookie constants
  │   └── urls.ts             # URL constants
  ├── /hooks                  # Custom React hooks
  ├── /store                  # State management
  ├── /types                  # Type definitions
  └── /utils                  # Utility functions

📄 Usage

git clone https://github.com/najitwo/10-Sprint-Taskify
cd 10-Sprint-Taskify
npm install
npm run dev

📌 References

• 🔗 Deployment Link: Live demo of Taskify project.
• 🗒️ Notion Link: Comprehensive development documentation.