https://github.com/martinwebdev95/kanban

Fully-functional task management web app with a light/dark mode toggle.
https://github.com/martinwebdev95/kanban

frontend-mentor-challenge javascript react-hook-form react-router reactjs supabase tailwindcss vercel-deployment vitejs

Last synced: about 1 month ago
JSON representation

Fully-functional task management web app with a light/dark mode toggle.

• Host: GitHub
• URL: https://github.com/martinwebdev95/kanban
• Owner: MartinWebDev95
• Created: 2023-05-08T11:02:44.000Z (over 1 year ago)
• Default Branch: master
• Last Pushed: 2024-06-18T07:14:38.000Z (7 months ago)
• Last Synced: 2024-06-18T08:37:07.970Z (7 months ago)
• Topics: frontend-mentor-challenge, javascript, react-hook-form, react-router, reactjs, supabase, tailwindcss, vercel-deployment, vitejs
• Language: JavaScript
• Homepage: https://kanban-martinwebdev95.vercel.app
• Size: 617 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.en.md

Awesome Lists containing this project

README

        
[Button Language]: https://img.shields.io/badge/Leer%20En%20Español-000000?style=for-the-badge

[![Button Language]](https://github.com/MartinWebDev95/Kanban/blob/master/README.md)

# Kanban Task Management

---

[Button Kanban]: https://img.shields.io/badge/Kanban%20Web-0B5B9E?style=for-the-badge

Task management web application where you can create, edit and delete tables, task statuses, the tasks themselves and their subtasks if they have them.

[![Button Kanban]](https://kanban-martinwebdev95.vercel.app)

## 👨🏽‍💻 What technologies I have used?

---

[Button Vercel]: https://img.shields.io/badge/Deploy%20on%20Vercel-000000?style=for-the-badge&logo=vercel

[Button Supabase]: https://img.shields.io/badge/Supabase-000000?style=for-the-badge&logo=supabase

[Button React]: https://img.shields.io/badge/React-000000?style=for-the-badge&logo=react

[Button Tailwind]:https://img.shields.io/badge/Tailwind%20CSS-000000?style=for-the-badge&logo=tailwindcss

[Button React Router]:https://img.shields.io/badge/React%20Router-000000?style=for-the-badge&logo=react-router

[Button React Hook Form]:https://img.shields.io/badge/React%20Hook%20Form-000000?style=for-the-badge&logo=react-hook-form

[Button Vite]:https://img.shields.io/badge/Vite-000000?style=for-the-badge&logo=vite

[Button ESLint]:https://img.shields.io/badge/ESLint-000000?style=for-the-badge&logo=eslint

[![Button React]](https://react.dev/)

[![Button Supabase]](https://supabase.com/)

[![Button Tailwind]](https://tailwindcss.com/docs/installation)

[![Button React Router]](https://reactrouter.com/en/main)

[![Button React Hook Form]](https://www.react-hook-form.com/)

[![Button Vite]](https://vitejs.dev/)

[![Button ESLint]](https://eslint.org/)

[![Button Vercel]](https://vercel.com/)

- **React:** I have used React as the project framework, creating different components, several contexts, different pages and several custom hooks. 

- **Supabase:** I have used Supabase for authentication through Google, authentication with the Demo User and to be able to do a CRUD with the different tables, task states, tasks and subtasks.

- **Tailwind CSS:** I have used TailwindCSS to style the different components.

- **React Router:** I have used React Router to create the different routes that the website has, since React does not have an integrated router like other frameworks.

- **React Hook Form:** I have used React Hook Form for validation of all forms as it reduces the amount of code you need to write while removing unnecessary re-renders.

- **Vite JS:** I have used Vite JS as a build tool.

- **ESLint:** I have used ESLint to follow the Airbnb style guide in the project code.

## 📸 Some Screenshots!

---

![Login Page Screenshot](https://github.com/MartinWebDev95/Kanban/blob/master/public/assets/screenshots/loginPage.png)

![Main Page Screenshot](https://github.com/MartinWebDev95/Kanban/blob/master/public/assets/screenshots/mainPage.png)

![Task Screenshot](https://github.com/MartinWebDev95/Kanban/blob/master/public/assets/screenshots/task.png)

![New Board Screenshot](https://github.com/MartinWebDev95/Kanban/blob/master/public/assets/screenshots/newBoard.png)

![New Task Screenshot](https://github.com/MartinWebDev95/Kanban/blob/master/public/assets/screenshots/newTask.png)

## 🗃️ Project Structure

---

This is the structure that I have used for this project:

```text

/

├── public/

│   └── assets/

│       └── image.png

│

├── src/

│   ├── components/

│   │   └── index.jsx

│   ├── context/

│   │   └── Context.jsx

│   ├── helpers/

│   │   └── helper.js

│   ├── hooks/

│   │   └── useHook.js

│   ├── pages/

│   │   └── index.jsx

│   └── services/

│       └── getData.js

└── package.json

```

## 👀 Where you can find me?

---

[Button Portfolio]: https://img.shields.io/badge/Visit%20My%20Portfolio-000000?style=for-the-badge

[![Button Portfolio]](https://portfolio-martinwebdev95.vercel.app/)