Design inspired from a todo app on FrontendMentor. Frontend Mentor challenges help you improve your coding skills by building real projects. Built on top of other technologies, more details about them are down below.
This is currently how it looks like:
Users should be able to:
- 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
| 🛠️ Technologies | 📝 Descriptions |
|---|---|
 |
An alternative to React based on reactivity. |
 |
Programming system typed language. |
 |
Typed JS language. |
 |
CSS Framework. |
 |
Next generation front-end tooling. |
 |
Desktop framework for building webviews. |
An Immer inspired utility function called produce(). This utility allows us to write code that mutates
data in the normal way but automatically creates immutable copies behind the scenes.
export const addTodo = (todo: ITodo) => setTodos(produce((currentTodos: ITodo[]) => currentTodos.push(todo)))Also, SolidJS considerations are extremely important to understanad when it specifically comes to logic top-level structure or props destructuring, see second one.
-
More focus on code written in Rust rather than just in plain JS which reduce compilation time.
-
Sharing common design for all OS without breaking UI & UX desktop apps best practices and conventions. Keeping track of a user friendly interface avoiding an overload of functionalities.
- Tauri Action - Alternative to cross-platform compilation which builds Tauri binaries for the 3 most known operating systems.
- Tauri Docs (Window Module) - Incredibly usefull API for having access to: Events listeners, interfaces, types and methods of the window.
A fun cli tool to count lines of code, credits to theoludwig.
cloc . --exclude-dir=target,node_modules --exclude-ext=yaml- My Website - Walid Korchi
- FrontendMentor - @Walidoux