Moove Board

Try Demo Now!

This repository contains the moove board application for the Coding Challenge: Post It Notes App for MooveCamp 2022.

This project was bootstrapped with Create React App using the typescript template

Features

Create a new Post it.

See all Post its in the workspace.

Edit a Post it.

Move a Post it to the trash bin.

Move all Post its to the trash bin.

Open the trash bin to see all Post its that have been moved there.

Move a Post it from the trash bin to the workspace.

Move all Post its from the trash bin to the workspace.

Permanently delete a Post it in the trash bin.

Permanently delete all Post its in the trash bin.

See if the trash bin has Post its by looking the trash bin icon.

Trash bin is empty

Trash bin is not empty

Toggle between dark mode and light mode.

Order by newest or oldest

Responsive design

Prerequisites

Node js: https://nodejs.dev/download
npm: https://www.npmjs.com/package/npm
VS(recommended): https://code.visualstudio.com/

Most important dependencies!

This project includes the next libraries, you could read the official documentation.

react: This is the library/framework used to build the application.
react-router-dom: The routing of this application is managed with react-router-dom.
react-redux: It is used to handle the global state of the application.
redux-toolkit: The official toolkit for efficient Redux development.
typescript: This project is built using typescript and was created using the template provided by create react app npx create-react-app my-app --template typescript.
tailwindcss: This is the framework used for the styles of the app.

Most important dev dependencies!

eslint: This is the lint to check the use of the style guide.
eslint-config-airbnb: This is the style guide used.
husky: Used to check that the files comply with the style guide used in the project at the time of commit.
prettier: This is the formatter used in the project, which has a configuration explained in more detail below.
lint-staged: Used in conjunction with husky to checker the linter during the commit.
testing-library-react: Allows to perform tests by rendering components in a DOM.
testing-library-jest-do: This is the framework used for testing in conjunction with the react testing library.

Installation

To install this application, you should follow the steps below:

Clone this repo: git clone https://github.com/SandraCalero/MooveBoard.git
Install all the dependencies for the project by executing the command npm -i or npm install

Usage

To use this application locally, you should follow these steps below:

Install the web application according to the above steps
Runs the app in the development mode by executing the command npm start.
The browser will open the web app at http://localhost:3000. You can also use the app from another device using the IP address of the local network.
The page will reload when you make changes and you will also see any lint errors in the console.

Redux DevTools

To use redux and validate its use in the development environment, install the chrome extension Redux DevTools

Considerations:

About structure

The structure of this project is separated into folders by responsibility within the project as follows:

assets

Contains a folder called icons, inside which are all the images used for the icons inside the body of the application.
components

The structure used in which the organization of the functional components is based on the Atomic Design system creation methodology from which the following levels were taken:
- Atoms: These are the basic components of matter. Applied to this project, atoms are the smallest component that does not contain other components within itself, such as a button.
- Molecules: Molecules are groups of atoms bonded together and are the smallest fundamental units of a compound. These molecules acquire their own properties and serve as the backbone of our design systems.
- Organisms: Organisms are groups of molecules bonded together to form a relatively complex and distinct section of an interface.
- Templates: Templates consist primarily of groups of organisms joined together to form pages. This is where we begin to see the design as a whole.
Each component stores the following in its own folder:
- The functional component,
- Its own custom hook files,
- A folder containing the component's tests, and
- If necessary, there would be a file containing the component's styles.
globals

Contains the global constants defined for the project such as the interfaces for the Post It components.
redux

This project uses Redux to manage the status of the application, therefore, the structure of its folder is specified below.
```
  redux
    reducers
    store
```
- reducers: Contains the two slices of the redux store, one to handle the state and reducers of the trash bin and the other to handle the state and reducers of the workspace.
- store: The store holds the state of the application.
styles

Contains the index.css file inside which there are @tailwind directives for each of Tailwind’s layers.
utils

Contains the utilities necessary for the global use of the application.

The Root.tsx component, wraps the application so, it is where the provider is located and where the routes of the application are managed.

About Branching and Commits

Branch convention is based on the gitflow workflow specification, instead of a single main branch, this workflow uses two branches to record the history of the project. The main branch stores the official release history, and the develop branch serves as an integration branch for features.

Branching Workflow:

create a develop(parent) branch to serve as an integration branch for the features.
create a branch for each activity or feature, e.g. "redux" or "create-post-it".
merge all work on develop branch and create merge request

Example:

develop -> redux
redux -> develop

Note: The main branch is used to deployment.

Follow this steps when you do a commit :

JS linter: It is executed automatically when committing. For this the command npx mrm@2 lint-staged was used, this command will install and configure husky and lint-staged based on the code quality tools from this project's package.json dependencies.
Unit tests must pass completely.
Commit messages should begin with the first three letters of the activity that was performed, followed by where the implementation took place.

Must be one of the following:
- ADD: when something was added to the project
- UPD: when there was an update
- FIX: when an error was fixed
- DEL: when something was deleted
IE commit message:

    UPD readme file

About Tests

In the project we can test two important elements such as components and hooks. However, there are only tests created for the components. For the components we must make the import of the render method that is obtained from path utils/tests/test-utils.

    import { render } from 'utils/tests/test-utils';

Execute test:

Use command npm test to launch the test runner in the interactive watch mode.

See the section about running tests for more information.

About relevant technical decisions made

It was decided to use typescript for this project because it is a strongly typed programming language that, as a superset of javascript, is compatible with javascript. It is known to be structured, highly secure and more consistent than vanilla javascript, any typescript checking runs at compile time and VSCode allows to visualize typing errors just by understanding the typescript extension of a file so, it is possible to check types and identify errors at compile time.
This application does not use back end services, for this reason, the application state for the workspace and the trash bin is saved in the local storage.
This application follows the Airbnb style guide, to check all files automatically eslint was installed, whose configuration is in the .eslintrc.js file. Additionally prettier is being used as a formatter, and due to conflicts that may arise between eslint and prettier, the .prettierrc file was created to configure prettier so, that eslint styles take precedence. It was taken into account that the auto-generated files should not be formatted or taken into account in eslint, so, they were listed in the .eslintignore and .prettierignore files.
In order to avoid commits of files that do not comply with the style guide configured in the project, the command npx mrm@2 lint-staged was used, which creates the husky script that executes the lint-staged that validates the files and prevents the commit of those that do not comply with the eslint.
Although the Post-it and the Post-it list of the workspace and the trash bin look the same, their behavior, the type of properties and some characteristics are very different, so, managing a single component for the workspace and the trash bin would not follow the SRP (Single Responsability Principle) since the number of variables and different functions would significantly increase the size of the component.
Tailwindcss was used for the styling of the application because it allows to build websites quickly and its mobile first approach makes it easier to develop responsive applications.
Methodologies such as atomic design and gitflow workflow were used as a guide adapted for this project, they were not strictly used.

Functional components standard

As an adaptation to the airbnb style guide and typescript, the use of this function statement is recommended:

export default function Component({ message }: AppProps) {
  return <div>{message}</div>;
}

As we see in the example above this is a declarative function with typed props (props must be of type AppProps so, we could not pass anything different).

Deployment

This application is deployed on Heroku using the github connection. The main branch is synconized with heroku so, all the updates made on this branch will be deployed in the url https://mooveboard.herokuapp.com/.

Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

Please make sure to update tests as appropriate.

Authors

Sandra Calero - linkedin

Project for Moove It

SandraCalero/MooveBoard