Skip to content

Latest commit

 

History

History
165 lines (121 loc) · 4.77 KB

README.md

File metadata and controls

165 lines (121 loc) · 4.77 KB
Raw

Here's a comprehensive README.md file for your website FlowMate.

FlowMate - Let's Collaborate

Welcome to FlowMate, a powerful team collaboration tool designed to help teams manage projects, track tasks, and communicate effectively. With FlowMate, teams can boost productivity, streamline workflows, and stay connected from anywhere!

Live Demo

🌐 Live Site

Table of Contents

About the Project

FlowMate is a project management and team collaboration tool that simplifies task management and tracking. Inspired by platforms like Trello, FlowMate aims to make project collaboration intuitive and effective, allowing teams to easily organize tasks, assign responsibilities, and monitor progress.

Features

  • Task Management: Create, edit, and delete tasks, organized by different stages (To-Do, In Progress, Completed).
  • Drag-and-Drop Interface: Easily move tasks between different stages using drag-and-drop functionality.
  • Real-Time Updates: Instantly updates task status, ensuring all team members are informed.
  • Role-Based Access Control: Access management for different roles - Admin, Manager, and Member.
  • User Authentication: Secure login and registration using Firebase.
  • Subscription Plans: Multiple subscription options with Stripe for secure payments.
  • Responsive Design: Optimized for all devices, from desktops to mobiles.

Built With

  • Frontend: React.js, React Beautiful DnD, React Router DOM
  • Backend: Node.js, Express.js, MongoDB
  • Authentication: Firebase Authentication
  • Payment Integration: Stripe API
  • State Management: Redux
  • CSS Frameworks: Tailwind CSS
  • Hosting: Firebase Hosting (Frontend), Vercel (Backend)

Getting Started

To set up a local version of this project, follow these steps.

Prerequisites

  • Node.js (v14 or higher)
  • npm or yarn
  • MongoDB (for backend data storage)
  • Firebase account for Authentication and Hosting
  • Stripe account for Payment Integration

Installation

  1. Clone the repository:

    git clone https://github.com/NabilaFerdousPrapty/flowmate.git

  2. Navigate to the project folder:

    cd flowmate

  3. Install dependencies for both frontend and backend:

    • Frontend: 
      cd client
npm install
    • Backend: 
      cd ../server
npm install

  4. Set up environment variables:

    • In the client and server directories, create .env files with required variables: 
      REACT_APP_FIREBASE_API_KEY=your_firebase_api_key
REACT_APP_STRIPE_API_KEY=your_stripe_api_key

  5. Run the application:

    • Frontend: 
      npm start
    • Backend: 
      npm run server

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

Usage

Once your local environment is set up, you can explore the following functionalities:

  • User Registration and Login: Register as a user to gain access to the app.
  • Create and Manage Tasks: Create tasks and manage their stages.
  • Drag-and-Drop: Use the drag-and-drop feature to update task stages.
  • Upgrade Subscription: Choose a subscription plan via Stripe for added features.

Project Structure

flowmate/
├── client/          # Frontend code
│   ├── public/
│   ├── src/
│   │   ├── components/
│   │   ├── hooks/
│   │   ├── pages/
│   │   ├── App.js
│   │   └── index.js
├── server/          # Backend code
│   ├── config/
│   ├── controllers/
│   ├── models/
│   ├── routes/
│   ├── server.js
├── .gitignore
├── README.md
└── package.json

Contributing

We welcome contributions to FlowMate! To contribute, follow these steps:

  1. Fork the Project.
  2. Create your Feature Branch (git checkout -b feature/AmazingFeature).
  3. Commit your Changes (git commit -m 'Add some AmazingFeature').
  4. Push to the Branch (git push origin feature/AmazingFeature).
  5. Open a Pull Request.

License

Distributed under the MIT License. See LICENSE for more information.

Contact

Nabila Ferdous Prapty

Thank you for using FlowMate! Happy collaborating!