Challenge from frontendmentor built using react-typescript and tailwindcss

Last update: Apr 2, 2022

Frontend Mentor - Todo app solution

This is a solution to the Todo app challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

Table of contents

Overview

The challenge

Users should be able to:

  • View the optimal layout for the app depending on their device's screen size
  • See hover states for all interactive elements on the page
  • Add new todos to the list
  • Mark todos as complete
  • Delete todos from the list
  • Filter by all/active/complete todos
  • Clear all completed todos
  • Toggle light and dark mode
  • Bonus: Drag and drop to reorder items on the list

Screenshot

Links

My process

Hello there! Thanks for checking out this project of mine.

This is my 26th frontendmentor challenge and my 6th intermediate frontend project. The project was made using Reactjs with TypeScript and tailwindCSS for designing the app, I just started to learn TypeScript that's why I want to build project written with typescripts. I really thought that it was easy but coding with typescript is pain in the *ss, especially if you're beginner like me, It not easy to me when writing in the props, because there's some props I don't want to used but typescript basically forced us to use it 😅 .

but I also inlove using typescript, it was just easier to debug because most of the problems you encounter in IDE or in compilation time. You don't need to console.log to check what the problems is. I also encountered that I don't know how to write and It basically forced me to use the any keyword 😅 . There still many to learn about typescript and I believe it will improve in no time.

Some features on the page that I added:

  • One of the best features of this one is the drag and drop, if you want to change the todo that you want to finish first just drag and drop the items.
  • Local Storage in the browser, I stored the data in local storage so that it will not fade the items after the browser refresh.

Overall, I am very happy with how the application turned out. I am sure it can be improved, but it was a great learning experience that I intend to build upon.

Any additional feedback or a criticism will be appreciated!

Built with

  • JSX
  • CSS custom properties
  • Flexbox
  • TailwindCSS
  • React-beatiful-dnd
  • React - JS library
  • TailwindCSS - For styles

What I learned

TypeScript

TypeScript is a superset of JavaScript which primarily provides optional static typing, classes and interfaces. One of the big benefits is to enable IDEs to provide a richer environment for spotting common errors as you type the code. It looks something like this

export interface TodoListRender {
   id: number;
   todo: string;
   completed: boolean;
   index: number;
   updateItem: (id: number) => void;
   deleteItem: (id: number) => void;
}

I'm having fun on using this typescript because what interface objects looks like then the components function need to also like the interface above.

const TodoItem: React.FC = ({
   id,
   todo,
   completed,
   index,
   deleteItem,
   updateItem,
})

Continued development

After finishing this one, I realize that I need to learn more about tailwindcss, typescript and also reactjs especially in react hooks useEffect.

I will finish every frontendmentor challenge as much I take.

Author

GitHub

https://github.com/benjoquilario/todo-app-with-typescript
You might also like...

A React Application challenge With CRUD (Create, Read, Update, Delete)

A React Application challenge With CRUD (Create, Read, Update, Delete)

Desafio 03 - Corrigindo o código 💻 Sobre o desafio Nesse desafio, temos uma aplicação Node.js que está em processo de desenvolvimento mas que já poss

Dec 17, 2021

Prometheus API End Challenge Dev FullStack Course

Prometheus API End Challenge Dev FullStack Course

Prometheus API Desafio Final do curso de Dev FullStack @Gama Academy / @Cogna Sobre o projeto O PROMETHEUS é uma aplicação web desenvolvida para capta

Nov 26, 2021

Second challenge on ignite ReactJS powered by Rocketseat

Second challenge on ignite ReactJS powered by Rocketseat

Terceiro desafio da trilha de ReactJS do Ignite da Rocketseat. O projeto consiste em trabalhar os conceitos de Hooks. Rocketshoes é um projeto onde vo

Feb 7, 2022

First challenge on ignite ReactJS powered by Rocketseat

First challenge on ignite ReactJS powered by Rocketseat

Primeiro desafio da trilha de React do Ignite da Rocketseat. O projeto consiste em adicionar, marcar e remover To Do's. 📌 Conteúdo Tecnologias Execut

Feb 7, 2022

Small integration project based on Benjamin Code's challenge / YT

Small integration project based on Benjamin Code's challenge / YT

Some integration challenge based on Benjamin Code's YT video Just for the sake o

Jan 27, 2022

A challenge consists of an image upload platform

A challenge consists of an image upload platform

Upfi Este desafio consiste em uma plataforma de upload de imagens 👀 Funcionalid

May 21, 2022

🛒 Challenge: Creating a shopping cart hook with ReactJS

🛒 Desafio: Criando um hook de carrinho de compras 🚀 Ignite | Trilha ReactJS Tecnologias | Sobre o Desafio | Como rodar | Licença demo.mp4 🚀 Tecnolo

Apr 6, 2022

A front end base for a backend challenge

A front end base for a backend challenge

A Open source extreme simple task manager written in React Typescript

May 16, 2022

A wordle clone made with React, TypeScript, TailwindCSS, Vite and Zustand

A wordle clone made with React, TypeScript, TailwindCSS, Vite and Zustand

A wordle clone made with React, TypeScript, TailwindCSS, Vite and Zustand

May 10, 2022
Challenge [Frontend Mentor] - In this challenge, JavaScript was used to filter jobs based on the selected categories. Technologies used: HTML5, CSS3 and React.

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

Apr 13, 2022
Codelandia-Challenge-2-JordanShoes - Desafio da comunidade da Codelândia, realizada com React e Typescript.

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

Jan 3, 2022
Calculator app challenge built with react.js
Calculator app challenge built with react.js

Frontend Mentor - Calculator app solution This is a solution to the Calculator app challenge on Frontend Mentor. Frontend Mentor challenges help you i

Apr 25, 2022
Address-list-challenge - Listing Addresses App Built with React
Address-list-challenge - Listing Addresses App Built with React

Listando Endereços com React ?? Sobre o projeto Esse é o front de uma aplicação

Mar 5, 2022
An admin dashboard built with React, Redux, Firebase for the beezer interview coding challenge.

An admin dashboard built with React, Redux, Firebase for the beezer interview coding challenge.

Apr 5, 2022
Plataforma-marvel - A Marvel Platform challenge Using React
Plataforma-marvel - A Marvel Platform challenge Using React

Plataforma Marvel ?? Sobre o projeto Esse é o front de uma hipotética plataforma

Jan 1, 2022
0801 - Adtriba Coding Challenge Using React
0801 - Adtriba Coding Challenge Using React

Adtriba coding challenge Screenshots Technologies used: React with Next.js React

Jan 10, 2022
Simple responsive website for Edvora coding challenge using ReactJS.
Simple responsive website for Edvora coding challenge using ReactJS.

Simple responsive website for Edvora coding challenge using ReactJS.

Feb 15, 2022
A simple React zing mp3 apps built with React Typescript, Redux and TailwindCSS.
A simple React zing mp3 apps built with React Typescript, Redux and TailwindCSS.

React Typescript Zingmp3 A simple React zing mp3 apps built with React Typescript, Redux and TailwindCSS. Working application Checkout: https://60a609

May 24, 2022
Responsive whatsapp clone using React (Typescript), tailwindcss and firebase
Responsive whatsapp clone using React (Typescript), tailwindcss and firebase

Responsive whatsapp clone using React (Typescript), tailwindcss and firebase

May 26, 2022