Code Monkey home page Code Monkey logo

todo-app's Introduction

Toodles

Live app demo is available at todo-app-michal5.vercel.app.

Technologies used

  • Next.js as a framework, although its SSR capabilities are not used here at all. But it's nice to have all the asset compilation, routing, and stuff like that sorted out from the start.
  • Tailwind for UI - for prototypes like this it's great.
  • TanStack Query for fetching data from the API. I used SWR at first, but it was giving me problems with optimistic updates, for example. Changing to TanStack Query was easy, thanks to the fact that everything was nicely hidden in the hooks.
  • react-hook-form and zod for forms and validation.
  • day.js for working with dates.
  • lodash for some useful features.

Notable features

Instead of a real API server, I used msw, which uses Service Worker to catch requests from the application and respond to them. This way the demo app works offline, and the mock API server can also be used to test the app. Each request has an artificial delay of 300 ms to see the loading states in the application. The mock API server is started automatically when the application starts in the browser.

Possible improvements

  • Adding todo lists and items could have a better managed loading state. Optimistic inserts would be ideal, where a new list or item would be displayed immediately, without waiting for the server.
  • Deadline of items is done via native datetime input, which is not supported in all browsers, and doesn't exactly have the best UX. It would be better to make a customized input.
  • Items can't be moved within a list, or between lists. There is support in the API for this (each item has a list ID and weight attributes).
  • Mock API doesn't store data in local storage, so when the application is reopened, everything is deleted, and everything has a new ID.
  • If I used GraphQL and urql, I wouldn't have to deal with manually invalidating queries after mutations. I would also be able to generate request and response types from the GraphQL schema using GraphQL code generator.

todo-app's People

Contributors

miscer avatar

Watchers

 avatar  avatar

todo-app's Issues

Task

Vytvor webovú aplikáciu pre ToDo zoznamy vo frameworku React.

Požadovaná funkcionalita:

  • Vytvorenie ToDo zoznamu (môže ich byť viac)
    ToDo zoznam obsahuje:
    • názov
    • ToDo itemy
  • Pridanie ToDo itemu do zoznamu
    ToDo item obsahuje:
    • titulok
    • voľný text
    • deadline (dátum a čas)
  • Zmazanie ToDo itemu
  • Označenie ToDo ako dokončený
  • Filtrovanie itemov (všetky, aktívne, dokončené)
  • Vyhľadávanie ToDo itemov v rámci zoznamu
  • Perzistencia ToDo zoznamov pomocou externej API (napr. mockapi.io)

Minimálne technologické požiadavky:

  • TypeScript
  • pokročilé React konštrukcie (functional components, hooks, data management)
  • viaceré routy aplikácie
  • manažované formuláre (react-hook-form alebo formik)
  • validácia používateľských dát pomocou zod, joi, alebo yup
  • práca s HTTP pomocou fetchAPI alebo Axios
  • rozumné štruktúrovanie zdrojových kódov aplikácie

Odporúčaný technologický stack:

Podstránky a rozloženie aplikácie nechávame na tebe

Webovú aplikáciu je potrebné nasadiť napr. na netlify.com, githubpages.com

Pri kódení sa zameraj hlavne na čistotu kódu a využívanie správnych vzorov, štýlov, funkcií a princípov jazyka.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.