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.
- Requirements
- Dependencies
- Project Structure
- Installation
- Running the Project
- Testing
- Deployment
- Updating Dependencies
- Contributing
- License
- Node.js: v14 or higher
- pnpm: for package management
- 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.
- 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.
t3-flow/
│
├── back-end/ # Nest.js backend
│ ├── ...
│
└── front-end/ # Next.js frontend
├── ...
To set up the project, follow these steps:
-
Clone the repository:
git clone [email protected]:Rewwoken/t3-flow.git cd t3-flow
-
Install dependencies for both frontend and backend:
cd back-end pnpm install cd ../front-end pnpm install
-
Run the Development Server:
pnpm dev
-
Build the Project for Production:
pnpm build
-
Start the Production Server:
pnpm start
-
Run the Development Server:
pnpm start:dev
-
Build the Project for Production:
pnpm build
-
Start the Production Server:
pnpm start:prod
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.
To run tests, use:
pnpm test
Instructions for deploying the project will depend on your hosting provider. Generally, you will need to:
- Build the application using the build scripts.
- Upload the built files to your server.
- Configure your server to serve the frontend and connect to the backend.
To update dependencies, run:
pnpm update
Contributions are welcome! Please feel free to submit a pull request or raise an issue.
This project is licensed under the MIT License.