tda-project-planner

TDA Project Planner: A Full-Stack Application for Project Management and Collaboration

The TDA Project Planner is a robust, scalable web application designed to help teams manage projects, collaborate on tasks, and stay organized. This detailed breakdown provides insights into the project's architecture, its underlying technologies, and its components, explaining how everything ties together to create a powerful productivity tool.

Project Overview

The TDA Project Planner is built using Next.js, a React-based framework, and leverages Convex for the backend API and data management. The application uses modern libraries and frameworks like Tailwind CSS for styling, Jotai for state management, and Radix UI for accessible UI components. The overall goal of the project is to facilitate real-time communication, task management, and collaboration among team members within workspaces.

Features

User Authentication: Built with Convex's authentication package and Next.js Auth to manage user sign-ins, sign-ups, and OAuth integration.
Workspaces & Channels: Team members can create and join workspaces and channels for structured communication.
Messages & Reactions: Real-time messaging functionality, including emoji reactions, to promote quick and effective conversations.
File Uploads: Integrated file upload system for sharing resources and documents.
Modals and UI Components: A suite of Radix UI-based modals and components for easy interaction within the app.

Folder Structure Breakdown

The following is an in-depth explanation of the project's folder structure:

Root-Level Files

README.md: Project documentation.
bun.lockb: A lock file generated by the Bun package manager, ensuring consistent installations across environments.
components.json: A configuration file possibly used to store UI component data.
tailwind.config.ts: Tailwind CSS configuration file, defining custom styles, themes, and utility classes.
tsconfig.json: TypeScript configuration file for ensuring type safety across the project.
next.config.ts: Custom Next.js configuration for optimizing the build and enabling features like turbopack.

`convex` Directory

This is the most crucial part of the backend logic of the application.

_generated: Automatically generated files that contain TypeScript definitions and JavaScript code for the API (e.g., api.d.ts, server.js). These files abstract the database schema and API logic.
auth.config.ts: Configuration related to user authentication.
channels.ts, conversations.ts, messages.ts: Modules for managing specific data entities in the app such as channels, conversations, and messages.
upload.ts: Manages file uploads to the server.
workspaces.ts: Defines workspaces and manages their lifecycle within the app.

These files interact with Convex's database and backend services, which facilitate the real-time data synchronization across clients.

`src` Directory

The src directory holds the main application code for the front-end, including pages, components, features, hooks, and more.

`app` Directory

The app directory follows a feature-based folder structure, focusing on specific aspects of the app like authentication, workspaces, and channels.

auth: Contains pages and components related to user authentication, such as login, sign-up, and user authentication screens.
layout.tsx: Layout components shared across multiple pages.
page.tsx: The default entry page for the application (home page).
workspace: Manages workspace-related components, such as workspace creation, switching between workspaces, and workspace navigation.
channel: Includes chat functionality, including the channel header, input fields, and message history.
member: Manages member-specific pages, such as profiles and their respective data.

`components` Directory

The components directory contains reusable UI components like:

Message List: Displays a list of messages within a channel or conversation.
Editor: A rich-text editor for creating messages and posts.
Modals: A variety of modal components used for UI popups like creating channels, uploading files, etc.
UI Elements: Includes buttons, cards, tooltips, avatars, and other building blocks for creating the app's user interface.

These components are composed using Tailwind CSS, which allows for rapid styling and customization.

`features` Directory

The features directory contains logic for handling specific aspects of the app:

auth: API calls and UI components related to user authentication.
channels, conversations, members, messages: Handle the core functionalities such as creating channels, posting messages, managing team members, and managing conversations.
upload: Handles the logic for uploading files to the server.
workspaces: Contains all the logic for managing workspaces and user workspaces.

`hooks` Directory

Custom React hooks to manage state and facilitate data fetching:

use-confirm.tsx: A hook used for confirmation dialogs.
use-panel.ts: Likely used for handling panel state (e.g., collapsible panels).
use-workspace-id.ts: A custom hook to fetch and manage workspace-related data.

`providers` Directory

This directory contains custom context providers to manage global state and context for specific features:

convex-client-provider.tsx: A provider for integrating the Convex client, ensuring the app can interact with Convex's backend.
jotai-provider.tsx: A provider for managing global state using Jotai, a minimal state management library.

`lib` Directory

Contains utility functions and libraries to support various tasks within the app:

fonts.ts: Fonts configuration or font loading utilities.
utils.ts: General-purpose utility functions used across the app.

Key Technologies

Convex

Convex is used for the backend in the TDA Project Planner. It provides real-time database synchronization and simplifies interactions between the frontend and backend. It integrates with TypeScript, offering type-safe API interactions, which significantly reduces the chances of errors.

Next.js

Next.js is used to build the web application. It is configured with Turbopack, a new bundler for React, to optimize build times. Next.js's file-based routing and dynamic pages make it easy to create a scalable, maintainable web application. Additionally, Next.js's support for API Routes and static site generation (SSG) ensures that the app is both performant and dynamic.

Tailwind CSS

Tailwind CSS is used extensively throughout the application for utility-first styling. It allows for rapid development and easy customization of UI components, making the app visually appealing and responsive. Tailwind’s integration with JIT (Just-in-Time) mode enhances its performance.

Jotai

Jotai is used for state management in this project. It's a minimalistic state management library that provides atomic state updates and is simpler to integrate with React compared to more complex libraries like Redux.

Radix UI

Radix UI is a low-level component library that provides fully accessible and customizable UI primitives. It is used to create components such as avatars, dropdowns, modals, and tooltips, ensuring a consistent, accessible experience.

Sonner

Sonner is used for creating non-blocking notifications, ensuring users are updated about actions like message posting or file uploading without interrupting their workflow.

Conclusion

The TDA Project Planner is a well-structured, modern application that incorporates state-of-the-art technologies for full-stack development. By combining Next.js, Convex, Tailwind CSS, and other powerful libraries, the app offers a seamless user experience for teams to communicate, collaborate, and stay organized. The architecture, with its clear separation of concerns, makes it easy to scale and maintain. This project is a great example of how modern web technologies can be used to create a highly interactive and responsive application.

Notes & Tips

Next.js with Convex: When building real-time apps, Convex is a great choice due to its type-safe API and seamless integration with Next.js.
Tailwind CSS: Leverage utility-first CSS frameworks like Tailwind for rapid development and customization. Consider using the @tailwind-merge library to handle class conflicts.
Jotai for State Management: For small to medium-sized projects, Jotai is an excellent alternative to more complex state management libraries like >> Redux. Its atomic updates and minimalistic approach make it easy to use and scale.

If you've never heard of convex checkout this video

Github Repository URL and Project Preview URL is on the card that led you here on the projects page

tda-project-planner