ayushagg31 / trellis Goto Github PK

View Code? Open in Web Editor NEW

127.0 6.0 54.0 10.73 MB

A simplified Trello clone built with React, Redux, Node, Express and MongoDB.

Home Page: https://trellis-app.herokuapp.com

License: GNU General Public License v3.0

JavaScript 99.26% HTML 0.40% CSS 0.33%

trello mern-stack react redux nodejs mongoose react-beautiful-dnd express jest

trellis's Introduction

Trellis

A Trello Clone - Built with React, Redux, Express, and MongoDB.

Demo

Trellis-app [Deactivated]

📷 Screenshots

View Screenshots

Login Register Home Create Board Trellis

GIF

Demo Video

⚡ Features

Create, Modify and Delete boards
Create, Modify and Delete cards
Create, Modify and Delete lists
Move card items within lists
Move card items across lists
Ordering of list items
Activity log with active timestamps for each user events
Customize background images or color for individual boards
User Authentication

Installing

Clone the repository

git clone https://github.com/ayushagg31/Trellis.git
cd Trellis

Install dependencies

npm i && cd client && npm i

Create .env file

REACT_APP_CLIENT_KEY="YOUR API KEY" // Unsplash API Key

Create dev.env for development and test.env for testing purpose

cd ../config
(
echo PORT=1313
echo DATABASE_URL="MongoDB Connection String"
echo JWT_SECRET="YOUR JWT TOKEN"
echo NODE_ENV=development
) > dev.env

Go into client/package.json and replace proxy with your server port

"proxy": "http://localhost:1313"

Run the project

npm run trellis

ER Diagram

Built With

Frontend

React - A JavaScript library for building user interfaces
Redux - State management
Material UI - UI
React-beautiful-dnd - Accessible drag and drop for lists
React Router - Routing library for react
Moment - Library for manipulating dates and time
lodash - JavaScript utility library for modularity, performance, etc.

Backend

NodeJs - Backend framework
MongoDB - Database
Mongoose - Mongodb object modeling for node.js
Express - Node.js web application framework
Axios - Promise based HTTP client for the browser and node.js
Jsonwebtoken - Decode, verify and generate JWT.
bcryptjs - Password hashing algorithm library
Supertest - HTTP APIs Testing library
Jest - JavaScript Testing Framework
sinon - Standalone test fakes, spies, stubs and mocks library

Contribute

Show your support by ⭐ the project.
Submit pull requests and improve the repo overall quality
Read Contributors guidelines before submitting a PR or creating a new issue.

trellis's People

Contributors

Stargazers

Watchers

trellis's Issues

Improve Landing Page

There can be many possibilites to improve the landing page section, make it more friendly to first timers

Add recent activities info
Basic dummy read only board

Share your thoughts on this, it'll be an interesting functionality to create.

Containerize the project

Idea:
I am thinking of containerizing the project

Why?
Suppose as a user if I am only interested in running the application and not making changes
then I can run this as is without installing anything apart from docker

Remove the Footer with from the landing page.

Remove present footer on landing with author name and repository link.
Add a section instead which redirects to Github repository, and show all contributors info.
Show your creativity, I'll be happy to follow the lead here.

Add ER Diagram of db schema

You can use Lucid Chart to create the ER diagram.

Create a warning pop-up when user is deleting a board

Display Username on delete card action in activity window

Feature - Categorize the boards

Allow user to categorize the board into different groups like Personal, Project, Favourites.
Let me know your ideas about this.

Improve UI of Login and Register Page

Overview Description

Steps to Reproduce

Open README or CONTRIBUTING.
Scroll to the section explaining how to make a dev.env for development.
Wrong command specified.

Actual Results

mkdir dev.env - which will create a directory.

Expected Results

touch dev.env - which will create a file.

Additional Information:

Have also added an echo command to populate the file.

Refine Activity component section

At present Activity Component has some hard-coded operation, which I believe can be refectored to improve the overall quality.

Addink redux-thunk to manipulate the aplication state

What do yo think about add https://github.com/reduxjs/redux-thunk to manipulate the aplication state

Feature Request - Add quick tour section on Landing Page

Description A Quick tour which provides the overview of complete website

Information to add

Provide information about the project
Information about it's present features
Reference to Github Repository
List of all it's contributors [optional]
Future features we are working on

Containerize Project

Idea:
I am thinking of containerizing the project

Why?
Suppose as a user if I am only interested in running the application and not making changes
then I can run this as is without installing anything apart from docker

Alert messages on Login and Register form are persistant even after switching pages.

Steps to Reproduce

Create alert on Login page, either by typing wrong password, non-existing user info, etc. An alert will be displayed with corresponding message
Switch to Register Page by clicking the Register button in the header section
Now switch to Login Page by clicking the Login button in the header section.
Alert message still being displayed.

Expected Behaviour

Alert message shouldn't be displayed once user has switched pages.

Setup the eslint for whole project

Setup eslint for React app
Create .eslintrc file
Add rule set, I'll be providing few rule set soon
Update Package.json with lint (initialize eslint for the project) and lint-fix (fix the linting issues)

Note - Submit your changes to develop branch for now. I'll be reviewing it on priority.

I should be able to create new lists and cards by hitting the "enter" key instead of having to press the button every time

Is your feature request related to a problem? Please describe.
I am frustrated when I am trying to quickly create new lists and cards and I have to move my hands from the keyboard to the mouse to click the button to add a new list or card.

Describe the solution you'd like
It would be great if instead of creating a new line, pressing enter would just create the list or card as if I pushed the button. This is how Trello works as well.

I can work on this if you assign it to me

Decrease loading time of images on boards page

Problem

The image takes some time to load which can be decreased.

Solution

Change the images' format to webp to decrease loading time.

Create react app eslint config not working

Describe the bug
CRA provides ESLint rules with it, but due to some reasons, it's not suggesting about warning/errors.

To Reproduce
Steps to reproduce the behavior:

Run Project
Go to Trellis home page
Now you'll see some warnings related to eslint-config-react-app

Screenshots

Probable Causes

Some eslint dependencies are not installed
Existing dependencies are not compatible with CRA

Adding templates for Issue and Pull request

Overview Description

With the updated contributing guides there are now templates for these actions, they can have templates setup to make it easier for developers.

Fix linting errors

Describe the bug
Based on adding the linting fix to the PR workflow there is a number of sytnax errors that need to be fixed for the tests to pass successfully. These linting issues are mainly stylistic but cannot be fixed automatically.

To Reproduce
Steps to reproduce the behavior:

From root direction run npm run lint:all.
Fix all errors until tests pass.

Expected behavior
Linter should run without reporting any errors.

Additional context

/Users/jakesmith/Projects/open-source/Trellis/client/src/components/Activities.js
  41:9  error  Unexpected var, use let or const instead  no-var

/Users/jakesmith/Projects/open-source/Trellis/client/src/components/Auth.js
   93:13  error  A form label must be associated with a control  jsx-a11y/label-has-associated-control
  102:13  error  A form label must be associated with a control  jsx-a11y/label-has-associated-control
  112:17  error  A form label must be associated with a control  jsx-a11y/label-has-associated-control

/Users/jakesmith/Projects/open-source/Trellis/client/src/components/Background.js
   71:9   error  Visible, non-interactive elements with click handlers must have at least one keyboard listener  jsx-a11y/click-events-have-key-events
   71:9   error  Static HTML elements with event handlers require a role                                         jsx-a11y/no-static-element-interactions
   83:9   error  Visible, non-interactive elements with click handlers must have at least one keyboard listener  jsx-a11y/click-events-have-key-events
   83:9   error  Static HTML elements with event handlers require a role                                         jsx-a11y/no-static-element-interactions
   99:13  error  Visible, non-interactive elements with click handlers must have at least one keyboard listener  jsx-a11y/click-events-have-key-events
   99:13  error  Static HTML elements with event handlers require a role                                         jsx-a11y/no-static-element-interactions
  111:13  error  Visible, non-interactive elements with click handlers must have at least one keyboard listener  jsx-a11y/click-events-have-key-events
  111:13  error  Static HTML elements with event handlers require a role                                         jsx-a11y/no-static-element-interactions
  113:20  error  Do not use Array index in keys                                                                  react/no-array-index-key

/Users/jakesmith/Projects/open-source/Trellis/client/src/components/Board.js
   63:3   error  Unexpected var, use let or const instead     no-var
  109:27  error  'id' is already declared in the upper scope  no-shadow
  135:5   error  Unexpected var, use let or const instead     no-var

/Users/jakesmith/Projects/open-source/Trellis/client/src/components/BoardHeader.js
  34:7  error  Visible, non-interactive elements with click handlers must have at least one keyboard listener  jsx-a11y/click-events-have-key-events
  34:7  error  Static HTML elements with event handlers require a role                                         jsx-a11y/no-static-element-interactions

/Users/jakesmith/Projects/open-source/Trellis/client/src/components/Boards.js
  149:17  error  Visible, non-interactive elements with click handlers must have at least one keyboard listener  jsx-a11y/click-events-have-key-events
  149:17  error  Static HTML elements with event handlers require a role                                         jsx-a11y/no-static-element-interactions
  168:15  error  Visible, non-interactive elements with click handlers must have at least one keyboard listener  jsx-a11y/click-events-have-key-events
  168:15  error  Static HTML elements with event handlers require a role                                         jsx-a11y/no-static-element-interactions

/Users/jakesmith/Projects/open-source/Trellis/client/src/components/Card.js
  83:21  error  Assignment to property of function parameter 'task'  no-param-reassign

/Users/jakesmith/Projects/open-source/Trellis/client/src/components/Footer.js
  4:31  error  'theme' is defined but never used  no-unused-vars

/Users/jakesmith/Projects/open-source/Trellis/client/src/components/List.js
  131:5   error  Assignment to property of function parameter 'column'                                           no-param-reassign
  148:17  error  Visible, non-interactive elements with click handlers must have at least one keyboard listener  jsx-a11y/click-events-have-key-events
  148:17  error  Static HTML elements with event handlers require a role                                         jsx-a11y/no-static-element-interactions
  205:21  error  'provided' is already declared in the upper scope                                               no-shadow
  208:43  error  'index' is already declared in the upper scope                                                  no-shadow

/Users/jakesmith/Projects/open-source/Trellis/client/src/components/Notice.js
  34:7  error  Missing an explicit type attribute for button  react/button-has-type

/Users/jakesmith/Projects/open-source/Trellis/client/src/ordering/ordering.js
   2:3   error  Unexpected var, use let or const instead          no-var
   3:3   error  Unexpected var, use let or const instead          no-var
   4:3   error  Unexpected var, use let or const instead          no-var
   6:26  error  Unary operator '++' used                          no-plusplus
  16:47  error  Unary operator '++' used                          no-plusplus
  28:13  error  Unexpected assignment within a 'while' statement  no-cond-assign
  28:53  error  Unary operator '++' used                          no-plusplus

/Users/jakesmith/Projects/open-source/Trellis/client/src/reducers/activityReducer.js
  16:7  error  Unexpected lexical declaration in case block  no-case-declarations
  17:7  error  Unexpected lexical declaration in case block  no-case-declarations

/Users/jakesmith/Projects/open-source/Trellis/client/src/reducers/boardReducer.js
  42:7  error  Unexpected lexical declaration in case block  no-case-declarations
  43:7  error  Unexpected lexical declaration in case block  no-case-declarations
  55:7  error  Unexpected lexical declaration in case block  no-case-declarations
  56:7  error  Unexpected lexical declaration in case block  no-case-declarations

/Users/jakesmith/Projects/open-source/Trellis/client/src/reducers/cardsReducer.js
  16:7  error  Unexpected lexical declaration in case block  no-case-declarations
  17:7  error  Unexpected lexical declaration in case block  no-case-declarations
  23:7  error  Unexpected lexical declaration in case block  no-case-declarations
  24:7  error  Unexpected lexical declaration in case block  no-case-declarations

/Users/jakesmith/Projects/open-source/Trellis/client/src/reducers/imageReducer.js
  9:7  error  Unexpected lexical declaration in case block  no-case-declarations

/Users/jakesmith/Projects/open-source/Trellis/client/src/reducers/listsReducer.js
  16:7  error  Unexpected lexical declaration in case block  no-case-declarations
  17:7  error  Unexpected lexical declaration in case block  no-case-declarations
  23:7  error  Unexpected lexical declaration in case block  no-case-declarations
  24:7  error  Unexpected lexical declaration in case block  no-case-declarations

/Users/jakesmith/Projects/open-source/Trellis/client/src/routers/AppRouter.js
  27:9  error  'token' is already declared in the upper scope  no-shadow

/Users/jakesmith/Projects/open-source/Trellis/client/src/store/configureStore.js
  22:5  error  Assignment to function parameter 'state'  no-param-reassign

Add pre-commit workflow

Is your feature request related to a problem? Please describe.
To keep code quality tight and to ensure commits are formatted correctly we should run the linter before a commit.

Describe the solution you'd like
Add a pre commit workflow to perform the checks

Feature - Add labels on the cards

Labels can be of any predefined color with a text associated with them.
It can be used to easily categorize the Cards within a list.

Show Backdrop on certain actions

Create new board
Edit Cards
Edit Lists
Edit Board Title

Problem in logging in

Please help errors are shown in console I have provided the unsplash api key.

Improve Readme and add file structure information to make it more open-source friendly

There should be a confirmation dialog before a board, list, or card is deleted

Is your feature request related to a problem? Please describe.
It is possible to accidentally hit the delete button for a board, list, or card. It would be nice if the item wasn't immediately deleted when the button is pressed, but instead, a confirmation dialog is shown.

Describe the solution you'd like
I want a confirmation dialog to appear after clicking a delete icon for a board, list, or card. After pressing a "conform delete" button on the dialog, only then would the item be deleted.

Describe alternatives you've considered
Instead of a delete button with a confirmation dialog, there could instead just be an "archive" button that doesn't permanently delete the item. Additional functionality would have to be added to recover an archived item.

ayushagg31 / trellis Goto Github PK

trellis's Introduction

Trellis

Demo

📷 Screenshots

GIF

⚡ Features

Installing

ER Diagram

Built With

Frontend

Backend

Contribute

trellis's People

Contributors

Stargazers

Watchers

Forkers

trellis's Issues

Overview Description

Steps to Reproduce

Actual Results

Expected Results

Additional Information:

Problem

Solution

Overview Description

Recommend Projects

Recommend Topics

Recommend Org