Code Monkey home page Code Monkey logo

rishabhjain2404 / taskify-app Goto Github PK

View Code? Open in Web Editor NEW
1.0 1.0 0.0 203 KB

Built Taskify, a dynamic project management app inspired by Trello. Users can collaborate in workspaces, organize tasks across boards and lists (with drag-and-drop!), and manage individual tasks (create, edit, delete, reorder) - all powered by Next.js, React, TypeScript, and Prisma.

Home Page: https://taskify-app-virid.vercel.app

TypeScript 99.06% CSS 0.72% JavaScript 0.23%
nextjs postgresql prisma reactjs redux tailwindcss typescript

taskify-app's Introduction

Taskify: A Project Management App

Built with: Next.js, React, TypeScript, Prisma, Supabase, PostgreSQL, Tailwind CSS, Clerk, and Stripe (for optional premium features)

Live Demo: Link to my deployed project

Screenshot (225)

Features:

  • Collaboration: Organize projects with teammates in dedicated workspaces.
  • Boards & Lists: Create and manage boards for different project stages. Organize tasks within boards using customizable lists with drag-and-drop functionality.
  • Task Management: Create, edit, delete, and reorder individual tasks within lists.
  • Visual Appeal: Enhance your project boards with beautiful cover images powered by the Unsplash API.
  • Activity Tracking: Maintain transparency with comprehensive activity logs for workspaces and individual boards.
  • Member Roles: Manage user permissions within workspaces by assigning member roles.
  • Subscription-based Upgrades: Offer premium features like unlimited boards through Stripe integration.

Walkthrough:

1. Landing Page:

  • Effortless Project Management: Introducing Taskify, your one-stop app for organizing projects and boosting teamwork.
  • Streamline Workflows: Create boards, lists, and manage tasks with ease, all in a user-friendly interface.
  • Get Started Now: Sign up for free and experience the power of organized collaboration.

Screenshot (225)

2. Sign Up/Login:

  • Allow users to create new accounts or log in with existing credentials using Clerk.
  • Implement secure authentication practices.

Screenshot (226)

3. Organization Creation:

  • A popup guides users through creating their initial organization upon first sign up or whenever user wants to create one.

Screenshot (227)

4. Organization Page:

  • Displays the organization name and account type (free/pro).
  • Sidebar lists all associated workspaces.
  • Displays boards within the current organization.

org page

5. Workspaces:

  • Provides a central hub for managing projects within the workspace.
  • Offers tabs for:
    • Boards: Lists all boards associated with the workspace. Screenshot (230)
    • Activity: Displays activity logs for the workspace. Screenshot (231)
    • Settings:
      • Allows viewing and managing organization members.
      • Enables inviting new members and managing invitations.
      • Provides options to leave or delete the organization. Screenshot (232)
    • Billing:
      • For free accounts (limited to 5 boards), offers an upgrade option to unlock unlimited boards.
      • For pro accounts, allows managing subscriptions and payment details using Stripe. Screenshot (233)

6. Create Board Popup:

  • Appears when users create a new board.
  • Offers options to select a cover image (powered by Unsplash API) and name the board.

Screenshot (234)

7. Board Page:

  • Displays the board title, cover image, and associated lists with cards.
  • Enables users to:
    • Rename the board title.
    • Delete the board.
    • Create new lists.
    • Create cards within lists.

Screenshot (235)

8. List Management:

  • Create, copy, or delete lists.
  • Drag and drop lists to reorder them.

Screenshot (236)

9. Card Management:

  • Create cards within a list.
  • Delete cards.
  • Copy cards for duplication.
  • Rename cards.
  • Drag and drop cards within a list or across lists.
  • View and manage individual card details (description, audit logs).

Screenshot (237)

Getting Started:

  1. Clone the repository:

    git clone [https://github.com/](https://github.com/)<your-username>/taskify.git
    
    
  2. Install dependencies:

    cd taskify
    npm install
    
    
  3. Set Up Environment Variables:

  • Create a .env.local file in the project root.
  • Add any environment variables your project requires (e.g., database connection details, API keys).
  1. Run the Development Server:

    npm start
    

This will start the development server on http://localhost:3000 by default.

Learn More

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

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.

taskify-app's People

Contributors

rishabhjain2404 avatar

Stargazers

Shahrad Elahi avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.