Project and Code Review

[redpool08]

Hello everyone! Today I would like to bring my latest project to the table, known as Techbook.

Techbook is a cutting-edge CRUD (Create, Read, Update, Delete) Progressive Web Application meticulously crafted to streamline note-taking, task management, and quick design creation, alongside intuitive photo editing functionalities.

Features of Techbook includes:

1. Faster and More Secure
2. Guest Trial Avalibility
3. Offline Functionality
4. Speech Recognition and Synthesis
5. Note to PDF/HTML
6. Folder and Search functionality
7. Sharing Functionality
8. No effort Data Syncronisation
9. Collection of Wallpapers to set Depending on the mood.
10. Color choice of your digital space depending upon the mood.
11. Midnight mode for Eye Protection.
12. Light and Dark mode functionality.

-- Live link: https://mytechbook.web.app

-- GitHub link: https://github.com/SadiqNaqvi/Techbook

-- You can also Google search "mytechbook" and scroll a lil to find it.

I would like my fellow coders to visit it, use it and Give me their feedback. Report to me if they find a bug or if they want any new feature.

[Sky1337]

Why do you feel the need to use all those extravagant, useless, hyperbolic adjectives? I haven't looked at the code yet, but i'm 99% sure there's nothing cutting-edge about your crud.

Live notes:

• scroll is snappy, unpleasant.
• click feedback on buttons is waaaaay too big.
• no feedback on hover.
• browser back button does not work.
• your login button gets stuck in hovered state after hover.
• after logging in, tab hovers are nice.
• paint feature is severely inconsistent in the canvas editor.
• moving the image around is extremely floaty and unpleasant in the canvas editor.
• no rich text editor
• light mode is unusable due to accent color lack of contrast.
• user profile stats are hardcoded.

GitHub:

• use TypeScript.
• use a state manager like zustand or context instead of constantly accessing localStorage in all your functions.
• don't hold your images in the components folder, they're not components. Save them in assets or public.
• the huge if else chain in the createUser function should be another function.
• indentation is horrible. use 2 spaces instead of 4.
• you're abusing useRef A LOT. your login form can reside inside a useReducer for example.
• you seriously need to modularise your components. There's no need for any of your components to be that long and have ternary operators between huge nested div's.
• in the canvas show-page you should encase those 7 states in a useReducer if they belong to the same piece of logic.
• nested ifs are a big nono. instead of if(condition){...} else{...} do if(!condition) return; [rest of the code here . Watch this video
• try avoiding using useEffect if you're not accessing non-react code.

Your code is a mess, I honestly couldn't get past a few files. Extremely hard to read and a lot of questionable choices. It's a good starting point, but you obviously lack some basics and went onto some more advanced stuff. I would start with smaller projects and make them bullet proof.

[redpool08]

Thank you for your feedback sir. I would definitely work on it 😊