Build Journal / Log

[AshishS-1123]

This project will involve a lot of planning and design decisions. Which is why, I am creating this issue.
In this issue, I will be writing my thought process so that I can reflect and take better decisions in the future.
I am also keeping this as a reference for all those who might wish to create a similar project.

First things first, the reason I chose ClickUp for making this clone is because it has a lot of features that should be challenging to implement. Also, I haven't heard of anyone else who has made such a project. If you take a look at the website, you will notice that the UI is amazing. Thus, making the front end will be as hard as implementing the backend.

A major problem I faced here was that ClickUp's policies prevent people from copying anything from their website. This includes their UI as well. So, I will be creating my own design using Adobe XD. This design will be very heavily inspired by ClickUp, but I will make a few tweaks that suite me. In the end, both these websites should be distinct.

I am going to be honest here. This is my first major backend project. I have no idea how to organize the code, what architecture to use or how to design the API. I will do those as I move along. Right now, I will start with creating the Sign Up and Register pages.

I plan on using MySQL as the database. I will post the schema and some description here as soon as I finish it.

Today, I am installing all dependencies.

[AshishS-1123]

[Saturday, 8 January, 2022]

A few new updates. I have made some major changes in how I plan on building the project.

I decided to move from MySQL to MongoDB. With multiple Spaces, Folders, Lists and Tasks nested inside each other, it gets really complicated to represent hierarchical data in a relational database. A NoSQL database seems better suited.

In the last 2 days, this is what I have implemented so far.

Server

• On the backend, I setup the routes and controllers to Sign Up and Sign In* users, along with a model for representing users.
• I have also setup some controllers for Forgot Password and Reset Password* but I plan on keeping those on the back burner for now and focus more on the core features.

Front End

• Created pages for signing in and creating an account. The UI is a little bland, but I will work on it in the near future.

With this, I think I can no start with the dashboard. I plan on creating a simple and minimal dashboard for now, followed by session management. After I setup a store and create a better way to interact with the backend, I will get started with core features and dashboard.

[AshishS-1123]

[Wednesday, 12 January, 2022]

I have completed the authentication part for this app. I have also setup a Higher Order Component called ProtectedRoute that will prevent authorized users for accessing the signup or login page and prevent unauthorized users from accessing the private pages.

I also decided to move from my usual Component-Container Architecture to a feature based one. I figured with all the code classified into only 2 categories, it might get messy. It would also become a little harder to navigate through the code and maintain it.

Still haven't figured all of the new architecture, but that's ok for now. I have started with the dashboard, specifically with the Navigation Menu. I created a new folder in the features folder and will put all the nav related stuff here. For now, I am dividing the navigation menu into 3 parts- a search bar (to be developed later), a space container (contains spaces, folders, lists, tasks, etc.) and a profile manager (for creating workspaces, settings, logging out, etc)

Also, I decided to install Material UI. They have a lot of useful components, and icons that will make my life easy.

EDIT
Note to future self -
On hard reloading the page, some of the styles disappear. Use the NextJS example from Material-UI GitHub page to fix this

[AshishS-1123]

[Friday, 14 January, 2022]

I have created a Model for storing workspace data and modified the User model. Now, when we fetch the user (after authentication step), we will also get an array of id's of workspaces the user owns.

On opening the dashboard, we then make another request to fetch other data related to workspaces. This will return an array of objects containing the id and names of all workspaces.

At this point, I am not going to fetch the spaces or other details. Only when the user switches to another workspace do we fetch its data recursively.

On the front end, I have created a settings menu that appears in the bottom right corner of the page. It has 3 sections- Workspace Selector, Workspace Manager and User Settings.

The workspace selector will be used for switching from one workspace to another. It will also allow user to create a new workspace.
The workspace manager will have settings and data related to the currently selected workspace.
The user manager will contain data and settings for the user, as well as option to log out.

Before proceeding any further, I am really feeling the need to write unittests. They would certainly make my life easier as I might break some feature while working on another. This way, I won't have to manually test everything.

[AshishS-1123]

[Sunday, 16 January, 2022]

I have almost completed the Space Management controllers. Based on what I have done till now, it should be fairly easy to create the rest of the controllers as most of the code is repeated.

I also found a logical bug in the code. In the database, we are preventing Workspaces and Spaces from having duplicate names. But this should be avoided as two different users can create workspace with same name. Can't believe I missed this.

Today, I will get started on fetching the workspace data recursively for all levels so that we can display it on the UI.

[AshishS-1123]

[Tuesday, 1 February, 2022]

Done with recursively fetching workspace data. After all the data is fetched, it gets converted to a form that we can render using components easily.
Also added button to create new space and dispatch correct action when it is clicked.
Created options menu for each space. Next, I will complete the buttons in the options menu to create new folders and lists. I am guessing, it will take 2 more days to complete the nav bar.

[AshishS-1123]

[Monday, 28 February 2022]

After a long break for exams, I am back again. The navigation menu and corresponding backend is done, which means you can create Workspaces, Spaces, Folders, Nested Folders, Lists and Tasks from the dashboard.

You can also switch between workspaces and the contents of this workspace will be shown to you.

The only part left in the navbar is editing and deleting all the items. It is a backend task and I plan on doing this at the end.

During this time, I realised how important testing (unit and integration) is. So I will start writing tests for all the work I have done till now.

P.S. I found this advice on FreeCodeCamp blog about designing react components.

Golden Rule of React

Basically it says I should create isolated components that can work on their own and then create a container for them that allows them to interact with outside works (requests and redux). This will also make it easier to test.

[AshishS-1123]

[Thursday, 3 March 2022]

I modified a lot of the existing classes. The code looks a lot cleaner and organised now. I also started writing tests.
Side by side, I am working on the Views. I will start with the List View, but before that, need to create the header bar.

[AshishS-1123]

[Tuesday, 8 March 2022]

I have created some additional dialogs as follows-

• Dialog to create Views
• Dialog to create Priorities
• Dialog to create Tasks.

I have also started developing the Views. I managed to create the List View, but I think I will scrape that. The view needs to have a lot of capabilities (drag and drop, sorting, grouping, etc.). The List View is probably the most important view and it contains the most features. I am planning on using a library called react-kanban for this. It seems to be easy to use and has a lot of features I might need. So all I have to do is put most of my focus on the styling and the library will handle the rest. I also seem to have stopped writing tests. It is soo hard!

Today, I will create some additional widgets required for the Task Dialog. I am also adding some meaningful data on the UI like 'Marketing' and 'Development' spaces, etc. instead of using 'Space 1', 'Folder 1'. Probably backup this data and use it as default when I deploy the project.

[AshishS-1123]

[Friday, 6 May 2022]

Well I have been gone for a while. But I am back again.
The Grid View is completed, and looks awesome (mostly because of the library). The List View is done too, but not one of my finest works.

There is a bug in GridView where it become really hard to add new items to a lane that already has no items within. Will fix it soon.
Also, turns out we creating tasks, we are not using the Priority set by the user.

I think this is it for Views, I will start writing unittests and integration tests now. I also need to fix the Header Bar as the UI and icons are uber ugly!