This is a Next.js project bootstrapped with create-next-app.

Getting Started

First, run the development server:

npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev

Open http://localhost:3000 with your browser to see the result.

You can start editing the page by modifying app/page.tsx. The page auto-updates as you edit the file.

This project uses next/font to automatically optimize and load Geist, a new font family for Vercel.

Learn More

To learn more about Next.js, take a look at the following resources:

• Next.js Documentation - learn about Next.js features and API.
• Learn Next.js - an interactive Next.js tutorial.

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!

Deploy on Vercel

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out our Next.js deployment documentation for more details.

TaskCollab

TaskCollab is a real-time task collaboration app built using Next.js, Socket.IO, and Express.js. It allows users to add, complete, and delete tasks in real time.

---

Getting Started

Follow these steps to set up the project for local development:

Prerequisites

Before you begin, ensure you have the following installed:

• Node.js (use the LTS version)
• npm or yarn
• Vercel CLI (optional for frontend deployment)
• Fly.io CLI (for backend deployment)

---

Setup Instructions

1. Clone the Repository

   git clone <repository-url>
   cd task-collab

2. Use Node.js LTS Version

   Switch to the LTS version of Node.js using nvm:

   nvm use --lts

3. Install Dependencies

   In the root directory, install the required dependencies:

   npm install

4. Set Up the Backend

   Navigate to the WebSocket server directory:

   cd src/websocket

   Install the dependencies:

   npm install

5. Run the WebSocket Server

   Start the WebSocket server:

   npm run dev

   The server will be running on http://localhost:8008 by default.

6. Run the Frontend

   Open a new terminal, navigate back to the root directory, and start the frontend:

   npm run dev

   Access the application at http://localhost:3000.

Deployment

Frontend Deployment (Vercel)

1. Prepare for Deployment

   Ensure your NEXT_PUBLIC_SOCKET_URL environment variable is set to the Fly.io WebSocket URL.

2. Deploy the App

   The app automatically updates to vercel

   npm run build

   The frontend will be deployed and accessible via your Vercel-provided URL.

Backend Deployment (Fly.io)

1. Prepare the Server for Deployment

   Ensure the server runs on port 3000 for production.

   Run the build command to prepare the server for deployment:

   npm run build

2. Deploy the WebSocket Server

   Use the Fly.io CLI to deploy the server:

   flyctl deploy

   The WebSocket server will be available at your Fly.io-provided URL.

   The frontend will be deployed and accessible via your Vercel-provided URL.

Prepare the Server for Deployment

Ensure the server runs on port 3000 for production.

Run the build command to prepare the server for deployment:

Features

• Real-Time Collaboration: Tasks are updated instantly across all connected users.
• Environment-Aware Configurations: Easily switch between local development and production environments.
• Responsive UI: Built with Tailwind CSS for a seamless experience on all devices.