A front-end app similar to Trello developed by @TiagoDiass where people can manage their tasks
Final result | Used technologies | Features | Tests | Deploy | How to run
- Next.js- Next.js is a framework built on top of React.
- TypeScript - Typescript is a superset of the common JavaScript. With that, we can type and maintain our code easier.
- Styled Components - Styled components is a CSS-in-JS library.
- React Testing Library - React Testing Library is a library that allows us to create unit and integration tests of React components.
- Storybook - Storybook is an open source tool for building UI components and pages in isolation. It streamlines UI development, testing, and documentation.
- ESLint and Prettier - With ESLint and Prettier, we can improve our code quality by linting and auto formating it.
- User can drag and drop tasks into columns
- User can reorder the columns by dragging and dropping them
- User can create tasks
- User can delete tasks
- User can delete all tasks of a column (shortcut to save user's time)
- User can create columns
- User can delete columns
- User can edit a column name
- The board data is persisted into the browser's localStorage so the user will not loose his/her board data
- The application starts with a simple first board so the user can start using the app without having to create his/her own board. A starter board also helps users to get to know the app when they are having their first contact with that
- User can change the application's theme from light to dark mode
- User can create multiple boards:
- User can create a board starting from a starter template (basic Kanban template)
- User can create a board starting with no template (that is, the board will start empty instead of with the basic Kanban columns)
- User can change a board name
- User can delete a board
- Custom 404 page to tell user that he/she tried to access a board that doesn't exist
- Multilanguage (English and Portuguese)
- User can change a board background
- User can sign in in order to save his/her boards data into a database, this way the user will be able to acess his/her boards from any browser in any computer, not only the browser that has the localStorage data set
- Sign in with Google
- Sign in with Github
- User can change his/her profile data (name, title, picture)
Do you have an idea of feature? Get in touch with me and we can talk about a contribution to the project!
I have deployed this application on Vercel. It's configured with a continuous deployment with this Github repository, that is, everytime the codebase from the main branch of this repository gets updated, Vercel will trigger a build of the project and will put it in production.
Click here to check the application running on Vercel
Storybook is a live documentation of the application components. It helps developers that are getting to know the codebase, designers that want to validate the components implemented by the developers, developer that want to know how to use any component of the app and so on. I have deployed the Storybook of this app on Vercel with a continuous deployment just like the application itself.
If you want to run the application in your computer, follow these steps; First of all, you'll need to clone the repository and install the dependencies. Assuming you have Yarn installed in your computer, follow the steps bellow:
# Clone the repo
$ git clone https://github.com/TiagoDiass/easyboards.git
# Enter the repo's folder
$ cd easyboards
# Install the dependencies
$ yarn install
To run the application, just follow the steps below (assuming you have followed the first steps above)
# Start the app
$ yarn dev
After following these steps, the terminal will show you in which port it's running, it's on the port 3000 usually, so, you'll just need to enter in your browser and
type localhost:3000, then you'll be able to check the app running. When you want to stop it, go to the terminal that you used to start the app, and type CTRL+C,
this way you'll stop the app
To run the application tests, follow the steps below (assuming you have followed the first steps above)
# Run the tests
$ yarn test
# If you want to run the tests in order to see the code coverage, run:
$ yarn test:coverage
Storybook is a live documentation of all components that were developed to use in this app. To start the Storybook, just follow the steps below (assuming you have followed the first steps above)
# Start the Storybook app
$ yarn storybook
After starting the Storybook, the terminal will show you in which port it's running, it's on the port 6006 usually, so, you'll just need to enter in your browser and
type localhost:6006, then you'll be able to check the storybook app running. When you want to stop it, go to the terminal that you used to start the app, and type CTRL+C,
this way you'll stop the app