T3-Flow Project

Project Overview

A full-stack web application ideologically inspired by Trello, developed using Next.js for the frontend and Nest.js for the backend. The project provides a convenient platform for individual task and project management, enabling users to create, organize, and efficiently track their work.

Table of Contents

1. Requirements
2. Dependencies
3. Project Structure
4. Installation
5. Running the Project
6. Testing
7. Deployment
8. Updating Dependencies
9. Contributing
10. License

Requirements

• Node.js: v14 or higher
• pnpm: for package management

Dependencies

Frontend Dependencies Overview

• Next.js: Core framework for server-side rendering, routing, and frontend logic.
• React: UI library for building interactive components.
• Material UI: Pre-built components for responsive, accessible design.
• React Query: Data fetching and state management with server synchronization.
• Axios: HTTP client for making API requests.
• Dnd Kit: Drag-and-drop library for task reordering and sorting.
• Lexorank: Implemented for dynamic task ranking and smooth reordering within lists.
• Emotion: CSS-in-JS library for styling React components.
• Tailwind CSS: Utility-first CSS framework for efficient UI design.
• React Hook Form: Library for managing form state and validation.

These technologies handle the essential aspects of routing, UI, data fetching, and task management for the frontend.

Backend Dependencies Overview

• Nest.js: Framework for building scalable, server-side applications with TypeScript.
• Prisma: ORM for database management and querying, used for interacting with the database.
• JWT: JSON Web Token library for authentication and authorization.
• Passport: Middleware for managing authentication strategies, integrated with JWT.
• Argon2: Library for password hashing to ensure secure user authentication.
• RxJS: Reactive programming library for managing asynchronous data streams.
• Class Validator & Class Transformer: Libraries for validating and transforming data transfer objects (DTOs).
• Cookie Parser: Middleware for parsing cookies in requests.

These dependencies form the backend architecture for handling authentication, database interactions, and business logic.

Project Structure

t3-flow/
│
├── back-end/               # Nest.js backend
│   ├── ...
│
└── front-end/              # Next.js frontend
    ├── ...

Installation

To set up the project, follow these steps:

1. Clone the repository:

   git clone [email protected]:Rewwoken/t3-flow.git
   cd t3-flow

2. Install dependencies for both frontend and backend:

   cd back-end
   pnpm install
   cd ../front-end
   pnpm install

Running the Project

Frontend (Next.js)

1. Run the Development Server:

   pnpm dev

2. Build the Project for Production:

   pnpm build

3. Start the Production Server:

   pnpm start

Backend (Nest.js)

1. Run the Development Server:

   pnpm start:dev

2. Build the Project for Production:

   pnpm build

3. Start the Production Server:

   pnpm start:prod

Root package.json Scripts

In the root directory, you can use the following scripts to manage both the client and server:

• Run Development for Both Server and Client:

  pnpm run dev

  This command runs the server and client concurrently.

• Build Both Server and Client:

  pnpm run build

  This command builds both parts of the application for production.

• Start Production for Both Server and Client:

  pnpm run start:prod

  This command starts the production server and client concurrently.

• Format Code for Both Server and Client:

  pnpm run format

  This command formats the code for both parts of the application.

Testing

To run tests, use:

pnpm test

Deployment

Instructions for deploying the project will depend on your hosting provider. Generally, you will need to:

1. Build the application using the build scripts.
2. Upload the built files to your server.
3. Configure your server to serve the frontend and connect to the backend.

Updating Dependencies

To update dependencies, run:

pnpm update

Contributing

Contributions are welcome! Please feel free to submit a pull request or raise an issue.

License

This project is licensed under the MIT License.