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 git@github.com: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.