Readme.md file updated

README.md

@@ -1 +1,77 @@
-# Team-Management-App
+# Team Management App
+
+## Overview
+
+The Team Management App is a web-based application designed to facilitate team collaboration and project management. It provides a platform for users to create teams, manage projects, assign tasks, share files, and communicate with team members. The app is hosted on Vercel for the frontend and Render for the backend.
+
+## Live Links
+
+###### Socket.io and Redis will not work on Free hosting
+
+- [Frontend](https://team-management-app-client.vercel.app/)
+- [Backend](https://team-management-app-server.onrender.com/)
+
+###### Login to website
+
+1. email: [email protected]
+2. password: 1234567
+
+## Local Setup
+
+### Prerequisites
+
+- Node.js
+- Docker Desktop (for Docker setup)
+
+### Steps
+
+1. Clone the repository:
+
+git clone https://github.com/Md-Rubel-Ahmed-Rana/Team-Management-App
+
+2. Install dependencies:
+
+npm install && cd frontend && npm install && cd backend && npm install
+
+3. Update `.env.example` with accurate credentials and rename it to `.env`.
+
+4. Run frontend and backend locally:
+   run: npm run dev
+5. Open your favorite browser and navigate to [http://localhost:3000](http://localhost:3000).
+
+## Docker Setup
+
+### Prerequisites
+
+- Docker Desktop
+
+### Steps
+
+1. Build Docker image:
+   run: npm run docker-build
+
+2. Run the container:
+   run: npm run docker-start
+3. Open your favorite browser and navigate to [http://localhost:8080](http://localhost:8080). It will redirect you to [http://localhost:3000](http://localhost:3000) with a reverse proxy, or you can directly visit [http://localhost:3000](http://localhost:3000).
+
+## Key Features
+
+1. **Team Creation:** Users can create a team at any time, allowing for easy collaboration among members.
+2. **Project Management:** Projects must be created under a team, ensuring organization and accountability.
+3. **Task Assignment:** Users can create tasks under a project, ensuring that all tasks are associated with a specific project.
+4. **Member Assignment:** To assign a task to a member, that member must be part of the project, ensuring that tasks are assigned to relevant team members.
+5. **User Invitation:** Users can invite any other user of the website to join their team, facilitating collaboration with external parties.
+6. **Invitation Response:** Invited users can either accept or reject the invitation, giving them control over their participation in the team.
+7. **Task Tracking:** Users can track the progress of tasks, ensuring that projects stay on schedule.
+8. **File Sharing:** Users can share files within the team, making it easy to collaborate on documents and resources.
+9. **Notification System:** Users receive notifications for new tasks, comments, and other updates, ensuring that they stay informed about project developments.
+10. **Group Messaging:** Users can create group chats for team-wide discussions, ensuring that all team members are kept in the loop.
+11. **Message Editing and Deleting:** Users can edit or delete their own messages, allowing them to correct mistakes or remove outdated information.
+
+## Contributors
+
+- [Md Rubel Ahmed Rana](https://github.com/Md-Rubel-Ahmed-Rana)
+
+## License
+
+This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.

backend/.env.example

@@ -0,0 +1,34 @@
+# DATABASE_URL = mongodb://localhost:27017/team-management-app?retryWrites=true&w=majority
+DATABASE_URL = ""
+
+# app
+FRONTEND_DOMAIN= ""
+NODE_ENV=development
+PORT=5000
+
+# JWT credentials
+JWT_ACCESS_TOKEN_SECRET=asd12321hd45h1wf757437v8n4fh5nf5cg55734cn9vhg75t384cmd8h1
+ACCESS_TOKEN_EXPIRES_IN=3d
+
+
+# Stripe secrets
+STRIPE_PUBLISH_KEY= ""
+STRIPE_SECRET_KEY= ""
+SUCCESS_URL=http://localhost:3000/success
+CANCEL_URL=http://localhost:3000/cancel
+
+# google oAuth credentials
+GOOGLE_CLIENT_ID= ""
+GOOGLE_CLIENT_SECRET= ""
+GOOGLE_CALLBACK_URL=http://localhost:5000/google/callback
+GOOGLE_REDIRECT_URL=http://localhost:3000/dashboard
+
+# google mail creadentials
+GOOGLE_APP_USER= ""
+GOOGLE_APP_PASSWORD= ""
+
+
+# cloudinary
+CLOUDINARY_API_NAME= ""
+CLOUDINARY_API_KEY= ""
+CLOUDINARY_API_SECRET= ""

frontend/src/components/pages/LandingPage/features/FeatureCard.tsx

@@ -1,6 +1,10 @@
 /* eslint-disable @next/next/no-img-element */
 import { IFeature } from "@/interfaces/feature.interface";
 import React from "react";
+import { SwiperSlide } from "swiper/react";
+import "swiper/css";
+import "swiper/css/pagination";
+import "swiper/css/navigation";
 
 type Props = {
   feature: IFeature;
@@ -9,11 +13,11 @@ type Props = {
 const FeatureCard = ({ feature }: Props) => {
   const { title, description, image } = feature;
   return (
-    <div className="features-card p-6 rounded-lg shadow-md lg:flex flex-col gap-4">
+    <SwiperSlide className="features-card p-6 rounded-lg shadow-md lg:flex flex-col gap-4">
       <img className="w-full h-60 rounded-lg" src={image} alt={title} />
       <h3 className="text-xl font-bold">{title}</h3>
       <p>{description}</p>
-    </div>
+    </SwiperSlide>
   );
 };
 

frontend/src/components/pages/LandingPage/features/FeaturePage.tsx

@@ -4,6 +4,10 @@ import featureData from "@/constants/featureData";
 import Link from "next/link";
 import { IFeature } from "@/interfaces/feature.interface";
 import useCardAnimation from "@/hooks/useCardAnimation";
+import { Swiper } from "swiper/react";
+import { Pagination } from "swiper/modules";
+
+import "swiper/css/bundle";
 
 type Props = {
   limit?: number;
@@ -22,11 +26,13 @@ const FeaturesSection = ({ limit = 3 }: Props) => {
       <h2 className="lg:text-3xl text-xl font-bold mb-8">
         Powerful Features Tailored for Effective Team Management
       </h2>
-      <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
-        {featureData.slice(0, limit).map((feature: IFeature, index) => (
-          <FeatureCard key={index} feature={feature} />
-        ))}
-      </div>
+      <Swiper pagination={true} modules={[Pagination]}>
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
+          {featureData.slice(0, limit).map((feature: IFeature, index) => (
+            <FeatureCard key={index} feature={feature} />
+          ))}
+        </div>
+      </Swiper>
       {limit <= 3 && (
         <button className="bg-blue-500 text-white py-2 px-4 rounded-full mt-8 hover:bg-blue-700">
           <Link href={"/features"}>Explore Features</Link>

package.json

@@ -4,7 +4,7 @@
   "description": "",
   "main": "index.js",
   "scripts": {
-  "dev": "concurrently \"cd frontend && yarn dev\" \"cd backend && yarn dev\"",
+    "dev": "concurrently \"cd frontend && npm run dev\" \"cd backend && npm run dev\"",
     "docker-build": "docker-compose rm -f && docker-compose pull && docker image prune -f && docker-compose build",
     "docker-push": "docker-compose images && docker tag team-management-app-backend:latest rubel49882/team-management-app-backend:latest && docker tag team-management-app-frontend:latest rubel49882/team-management-app-frontend:latest && docker tag team-management-app-nginx:latest rubel49882/team-management-app-nginx:latest && docker login && docker push rubel49882/team-management-app-backend:latest && docker push rubel49882/team-management-app-frontend:latest && docker push rubel49882/team-management-app-nginx:latest",
     "docker-start": "docker-compose up -d",