ptzagk / productivity-frontend

Productivity Application - Kanban Style Customizable Boards, Lists and Cards to make you more productive.

Productivity Application

Kanban style, Trello inspired Productivity application built using the awesome React, Ant Design, Apollo Client and other fantastic libraries.

Demo

Host	URL
Amazon S3	http://proapp.s3-website.ap-south-1.amazonaws.com
Netlify	https://productivity.netlify.com
Public Board Demo	http://proapp.s3-website.ap-south-1.amazonaws.com/public/boards/58d383b20f4a2800178ef63e https://productivity.netlify.com/public/boards/58d383b20f4a2800178ef63e

Demo Account

Email Address: [email protected]
Password: P@sSw0rd@123

All of the demo deployments use the same backend/api so you can use these interchangeably

Installation

Just clone this repo and then run

$ yarn install // or npm install

to install all the dependencies.

After installing the dependencies

1. Configure Backend API URL
   1. Either create a new Environment variable named API_ENDPOINT with its value as the Backend API URL, you can use https://pro-app-api.herokuapp.com for testing purposes. OR
   2. Edit /src/index.ejs file and change the API endpoint url window.__API__ENDPOINT__ https://pro-app-api.herokuapp.com with the API endpoint where you have setup the backend of this app
2. Run yarn build:production or npm run build:production to make a production build of the app.

Now you can access the application by running yarn start:production or npm run start:production Or you can deploy the public folder on S3, Netlify or any static host and access the app from there.

The recommended way is to use Static Host/CDN to host the application instead of running it via web server.

Features

Status	Feature	Description
✅	Static Application	You can host the app on any Static Host/CDN instead of a server
✅	Boards	Boards are the gateway to your lists, You can have as many boards as you want
✅	Lists	Each list can easily be re-arranged and updated, You can add multiple cards to a list
✅	Cards	Cards are the meat of this app, you can add as many cards as you like, re-arrange them, drag them from one list to another, etc
✅	Todo List	Each card has Todo List tab, There you can add your todo list items, update them, mark them as completed and so on.
✅	Card Meta	Each card has meta section where you can specify Duedate, Link, Image and the appropriate icons will appear below card in the list view., If image URL is specified, Image will appear above the card title.
✅	Custom Background	Each board, list and card can have different Background color, Boards can have background images as well. To change the background color of board just edit the board by clicking the Edit icon below the header and there you can update board details along with background color.
✅	Settings	You can update your details, password and preferred language in the settings page
✅	Deploy to Netlify	Added 1 click deploy to Netlify button.
✅	Public Boards	Now you can make boards public, Public boards are accessible to all the users with the board URL., By default all boards are private.
✅	Code Splitting	Split the code into different files and only load those files when necessary., Enable tree shaking so we only include the code we're actually using in the app.
✅	Lists Spacing	Now you can add spaces between lists, You can add space before and after a list. (might be useful to some of you)
✅	Customizations	Now you have more control over specifying background colors, you can either select it using colorpicker or enter it manually, it can be Color Names, HEX, RGB or RGBA.
✅	Multiple Languages	Added support for multiple languages, Current translation of Chinese langugae is done using Google Translate.
✅	Card Positioning	Now you can top and bottom margin to any card, Giving your more flexibility and control over the UI.
✅	Loading Indicator	Since the project makes use of Webpack code splitting, Sometimes it felt like clicks were unresponsive, Now you can see loading message whenever new script(s) is being loaded.
✅	GraphQL Fragments	Have started using fragments wherever necessary, This will help with app performance when you have lots of Boards.
✅	Board Groups	This will help you with Grouping different boards together and I personally think this will benefit us a lot, You can Add groups by going to the settings page.

Feature Requests

I am open to feature requests, If you have any specific feature in mind which you think might be helpful to the community as well, Just create a new issue or email me.