charliegdev/waffle

A Kanban board web app, implemented as a state-centric React-Redux application.

Waffle

• Features
• Upcoming Functionalities
• Tech
• Build & Test
• Naming
• License
• Contribution & Code of Conduct

Waffle is a Kanban board web app, implemented as a client-side React-Redux application.

The application is still under active development; new functions are continually being built.

Features

Below is a list of major features.

Add

Delete

Move Task to Another Column

Data Preservation

Data is saved, so nothing is lost after refresh or server restart:

Styling and Design

As an early prototype, I took MeisterTask as my inspiration for my styles. In the future, when the product is more mature, there will likely be some changes in the art style.

Additional Details on GitHub

Besides the list above, the GitHub repo also contains lots of detailed information:

• You can look at the closed pull requests on details about how these functionalities are implemented, such as the PR for SCSS import and its closed issue.
• Similarly, the GitHub open issues contains the most up-to-date list of planned features and bug fixes.
• From a project management point of view, you can see how the pull requests and issues were managed inside the GitHub Projects section; for example, the Sprint 1 board.
• Optionally, the commits might tell some detailed information as well.
• Finally, you can visit the Insight page on the velocity of the development.

Upcoming Functionalities

Since the project is still at a very early stage, lots of functionalities are awaiting design and implementation. They are listed down below, with the highest priority item on the top:

1. Reordering tasks
2. Clicking on the task to open a modal dialog
3. User login/logout
4. Guest mode
5. Support for multiple projects
6. Email notification
7. A decoupling between projects and users, so:
   • A project can have multiple users
   • A user can own, view and subscribe to multiple projects

Besides new features, new tests should be written as well:

1. Redux unit tests
2. Cypress integration tests

Tech

This section is about the technology used to develop the application.

• React as the view library.
• Redux as the state container. Specifically, Redux Ducks Pattern is used, so the Redux codebase is organized to scale better for a large application.
• Segment Evergreen & Blueprint as the React component libraries. All the components in Waffle are built based on Evergreen UI and Blueprint.
• CSS Module & SCSS as the styling solution.
• JSDoc and VS Code TypeScript service as an opt-in static type checker.
• JSON Server as a temporary REST API server.
• Other libraries:
  • axios
  • React Router DOM
  • ESLint
  • Jest

I plan to use these technologies in future developments:

1. Cypress in integration testing. At this point, the application is big enough to have meaningful automated integration test, so I think it's a great idea to start writing tests alongside development, instead of waiting for the application to get much larger and introduce regression bugs without knowing.
2. One of Python Flask or PHP Laravel as the server technology. Right now I'm using JSON Server which is fine for storing, modifying and retrieving tasks; however, to do anything substantial on the server side, I'll need a real server technology, and both Flask and Laravel are something I would like to try.

Build & Test

If you would like to run this on your machine, follow these steps.

Prerequisite

Make sure you already have those installed:

• Node.js. npm comes automatically as part of Node.js; optionally, you can also install Yarn from Facebook.
• Git

Build & Run

1. Clone the repo: git clone [email protected]:charliegdev/waffle.git
2. On the command line, navigate to the repo directory.
3. In the directory, run yarn or npm i to install all local dependencies.
4. Once all the dependencies are installed, run yarn start or npm start to start the Webpack server for the client.
5. In another terminal tab, navigate to the project root and run yarn run server or npm run server to start the JSON server.

Test

To start the test, navigate to the project root and run

yarn test

or

npm test

We haven't setup Cypress tests yet, so the unit tests in Jest is all we have.

Here is a sample terminal output in Hyper:

Naming

Its name happens to clash with another now-closed Kanban board app with the same name. When I thought of the name Waffle, the application mentioned above was already closed, and I wasn't aware of its existence. I don't have a plan to monetize from this product; but if I do one day, I will probably give the application an external product name to avoid potential legal hassle.

License

MIT license. Use it in whatever way you want; credit is appreciated.

View the MIT license here.

Contribution & Code of Conduct

If you see something worth improving or not working, it'll be awesome if you can leave an issue, or even open a pull request yourself. Constructive criticism is always appreciated. Please follow the Code of Conduct.

waffle's Issues

As a Reader, I can reorder my Tasks

Enable TypeScript checking on all .js and .jsx files

As a User, I can add a Task

Adding a Task

Redux Unit Tests

Summary

Redux plays a very important role in our application, so its testing is important as well. Implement them according to Redux documentation.

Hook up the server with MySQL

Summary

With #39 done, the server is able to preserve Tasks in memory. This issue handles the database storage / retrieve part.

MySQL is chosen because it's probably the most popular database; MongoDB probably fits our JSON structure better, but both will work.

As a User, I can drag and drop my Tasks

Summary

Currently, each Task has a button to change its status:

This works as a prototype, but for an MVP this is not OK. Existing users expect a drag and drop behavior that must also come with Waffle.

There are existing libraries that implement drag and drop in React, such as React DnD. Use that, or even the native HTML5 drag API.

Solve TypeScript typings path for SCSS imports

Right now, if I open any .jsx files that imports .scss files, such as:

• Task.jsx
• Tasks.jsx

The SCSS import triggers a TypeScript warning:

What's funny about this, is that as long as I have another typing file opened in VSCode (typings/declarations.d.ts), this error won't show.

typings/declarations.d.ts contains a hack to disable this SCSS import warning:

declare module "*.scss" {
  const content: any;
  export default content;
}

So, it seems VS Code has trouble figuring out the correct location for typing files, and this may be an easy config issue to fix.

Timebox to 2 hours.

As a User, I expect my tasks to be saved so I don't lose them after refresh

Summary

We need a very simple server to preserve the tasks. For demo purpose, the server won't need a database; all the data is stored in memory and they'll be flushed once the server restarts.

For now, that's an acceptable compromise because this issue focuses on hooking up Redux Thunk with the server.

There will be another issue to connect Express with a database, preferably MySQL.

Fix Unit Tests and Enable Snapshot Tests

Summary

Attempting to start unit tests using yarn test gives output like this:

Not sure what's happening, but that needs to be fixed.

Also, enable snapshot tests according to Jest documentation.

As a Reader, I expect to see correct title and favicon

Right now we're using the default ones:

• "React App" text as tab text
• the electron favicon

Change it so we use Waffle specific assets.

As a User, I can move a Task to a different column

For now, having a dropdown in every card is acceptable. Eventually, move it to a drag n drop interface.

As a User, I can delete a Task

TaskLane's Title Should Have Background and Count

TaskLane Background & Count

A <TaskLane>'s title should:

1. Contains an icon on the left;
2. Has a total count number on the right;
3. Has a slightly lighter background color.

TaskLanes should occupy exactly 100% of viewport width

TaskLane Width

Right now, <TaskLane> occupies 350px of width. This is not responsive at all and looks ugly:

Change it so:

1. Each one occupies 25vw or 25%. Since I don't plan to support column numbers other than 4 for now, using 25 should be fine for now.
2. No margin between columns.
3. Use the "responsive mode" in Chrome dev tool to make sure that no matter how wide the screen is, all 4 columns together occupy 100% of screen width.