Welcome to Agility 👋💻

About Agility

Agilty is a task management tool that allows you to plan, organise, and prioritise all of your tasks so that you can complete them in the shortest amount of time possible.

Agility Live Preview

Features

Modern UI/UX-inspired responsive pages
Express.js for connecting frontend to backend
Login and Register Using MongoDB using JSON Web Token keep user logged in using stored cookie
Use of safe login so the only logged in used can view \workspace contains
Kanban board's ability to add and remove cards and lists from local storage.
User/Team Member Remove and Add

Tech Stacks

Workflow Setup

Node

Node installation on Windows

Just go on official Node.js website and download the installer. Also, be sure to have git available in your PATH, npm might need it (You can find git here).
Node installation on Ubuntu

You can install nodejs and npm easily with apt install, just run the following commands.
```
$ sudo apt install nodejs
$ sudo apt install npm
```
Other Operating Systems

You can find more information about the installation on the official Node.js website and the official NPM website.

If the installation was successful, you should be able to run the following command.

$ node --version
v8.11.3

$ npm --version
6.1.0

If you need to update npm, you can make it using npm! Cool right? After running the following command, just open again the command line and be happy.

$ npm install npm -g

See Agility in action

Firstly, we need to install all the dependencies in the backend and frontend folders

For Frontend

cd frontend
yarn

For Backend

cd backend
yarn

Since npm gives some errors in this project, I recommend using yarn as the package manager.

Secondly, we need add .env file in backend folder in below format

MONGO_URI="<Your_MongoDB_URI>"
FRONTEND_ORIGIN="http://localhost:3000"
JWT_TOKEN="<your_jwt_token>"

Thirdly, run in local environment

For Frontend

yarn start

For Backend

yarn start

Runs the app in the development mode.\

Open http://localhost:3000 to view it in your browser.
Backend running at http://localhost:4000 to test Login and Register API.

The page will reload when you make changes.
You may also see any lint errors in the console.

OR,

This video shows this project live.

Folder Structure

Frontend Folder structure

.
├── public                  # Manifest, favicon and HTML file so you can tweak it.
├── src                     
│   ├── Assets              # all the assets i.e. files other then js  
│   ├── pages               # Components specific to each section called in App.js
│       ├── Form          
│       ├── Home          
│       ├── KanbanBoard
│           ├── Utils
|           └── Component Regarding Kanban Board     
│       ├── ProductLayout        
│       ├── User        
|       └── Workspace  
│   ├── Styles              # All Styles Files in respective folder compiled by scss
│       ├── Form          
│       ├── Home          
│       ├── KanbanBoard          
│       ├── ProductLayout        
│       ├── Utils        
│       ├── Workspace        
|       └── main.scss
│   ├── App.js
│   └── index.js            
├── yarn.lock     
└── package.json

Backend Folder structure

.
├── controller             
├── middlewares
├── model 
├── routes
├── .env 
├── index.js
├── yarn.lock     
└── package.json

Scope of Improvement

Better UI at Dashboard, Kanban, Teams.
REST API for functions in Kanban, Dashboard, Teams.
User Respective Data to be shown after login.

License

This project is licensed under the MIT License - see the LICENSE file for details.

About Me

I am a passionate programmer with a keen interest in Full Stack Web Development, Cloud and DevOps Emerging Technologies, and attempting to solve problems with software.

thisiskushal31/Agility