Next, I programmed the app so that you can now also re-import the exported to-dos; to do this, the to-dos are sent to the server one after another

You can now export your data; it will then be downloaded as a JSON file

Next, I worked on my themes and a logout feature:
Instead of a dropdown menu for the themes, I programmed a button that opens a settings popup where you can select themes and change the font size. I also added an Account tab where you can log out, which also deletes the cookies from the backend.

Next, I programmed the system so that users can also log out by using the user/logout route

In the devlog, I fixed all the bugs in the 5th project and made the CustomBtnModal easier to understand

Finally, I programmed a modal for the custom button, made some general improvements to the CSS, and wrote a ReadMe

In this devlog, I’ve made a few more design tweaks and fixed some bugs. I’ve also programmed a modal that appears the first time the project is launched and provides information.

Next, I turned my attention to the design of the entire “ProjektProjekt” project and decided to adopt the design style from my fifth project for the whole project.

I built a simple weather website to understand APIs in React

I added a small open todo counter badge in the header next to the app name so you always see how many tasks are left at a glance. I also added a character counter below the input field that turns yellow at 80 characters and red at 100 so you know when you are running out of space. And I added a “Clear all” button in the completed section that removes all finished todos at once. It uses Promise.all so all the delete requests to the server run in parallel at the same time instead of one by one. If something goes wrong the todos come back automatically.

My eighth small learning project is a simple countdown timer built with React. You can start, pause, and reset the timer, choose from preset times like 1, 5, 10, 15, or 25 minutes, set a custom time in minutes and seconds, and watch a progress bar that changes color as the time runs out.
My ninth small learning project is a basic calculator also built with React. It supports addition, subtraction, multiplication, and division, has a +/- sign toggle and a percent button, shows the current expression above the result, and handles edge cases like division by zero.

The next thing I did was fix the bug where, after editing a to-do item, you couldn’t edit it again or check it off or uncheck it.
There was a problem because editing the to-do item completely deleted it from local storage.

Next, I focused on the design and decided to add multiple themes. I also implemented a small redesign.
You can check out the images feel free to comment which theme is your favorite! <3

I updated the Todo feature: now you can edit todos and save them again. The changes are sent to the server and synced. If syncing fails, it will automatically roll back.

My sixth small learning project is an order manager where you can enter a name, choose how many items you want, select pickup or delivery, see everything in a list, and delete entries again.

My next project is a counter that allows a number value to be changed. The counter can be increased or decreased using plus and minus buttons. An input field lets the user set the step size. In addition to fixed action buttons with different math operations, users can create their own buttons, give them a name, and assign custom actions.

Functions:

• Increase and decrease the counter (+ / -)
• Set the step size using an input field
• Action buttons like +10, -10, ×10, ÷10, Random
• Create custom buttons
• Give buttons a custom name
• Custom actions (e.g. ×66, ÷23, +7)
• Dynamically add and use created buttons

In this devlog, I completed my fourth project: a random colour generator in RGB.
The application generates random colours, displays the currently generated colour in large format, and allows you to copy the RGB value directly.

I programmed my 3 Project.

In my third project, I developed an interactive React application that displays person cards with details like name, age, and driver’s license status. Clicking a card dynamically toggles a detailed description on and off using conditional rendering. Additionally, users can permanently remove individual cards by updating the person array via React state.

I programmed the second Project: a simple Card Component

Today, I’m programming so that you can now switch between projects by clicking the buttons.

Just built my first-ever React site. Keeping it simple for now, but I’m finally starting to understand how components work.

I added a readme for Informations

I also added a modal popup that appears when you first visit the site. It lets users know that the server might take a moment to respond at first

I’ve just finished building a landing page that shows up when you first visit Taskavio and aren’t logged in yet. The Wab-app (Vercel) checks if a refresh token exists in the cookies. If you’re already logged in, you’ll be redirected straight to the dashboard. If you try to access the dashboard for the first time without a session, you’ll be sent to the login page. I’ve configured all of this logic directly in my vercel.json.

I have now implemented the ability to delete todos. The deletion request is sent to the server, which removes the entry from the database. If the server returns an error, the frontend state is reverted and an error message is shown.

I’ve fixed several bugs, including an issue to ensure refresh tokens are received correctly now. I also updated the code so that it automatically uses my local database when running the app locally. Additionally, I’ve added empty states: if there are no open or completed todos, it’s now displayed accordingly.

Finalized deployment on Vercel & Render. I programmed a Vercel Proxy (in the rewrites) to fix CORS and enable secure cookies. The app is now fully functional on all devices!

Now I’ve also coded the design for the todo items

I’ve just coded the task list design and I tested that is sure it’s fully responsive.

I integrated Tailwind CSS and DaisyUI into the project to develop the user interface for the login page.

I’ve added support for marking todos as completed and uncompleted.

When a todo is checked or unchecked, the updated completed state is sent to the backend and saved in the database (MongoDB). The UI updates immediately and

I’ve now programmed it so you can add todos, send them to the backend for processing, and then update the local ID with the server Todo-ID before re-rendering. This keeps everything synced up perfectly so you can edit or delete the new todo right away.

It finally works! I had some issues with setting the cookies and had to **debug **for a while, but now it’s working: when you log in, you’re automatically redirected to the todo page and can see your todos.

This is Devlog 1, but just so you know: I’ve been working on this project since way before I even heard of Flowertown.

Here’s what I’ve coded so far – Key Features & Technical Setup:
Built with Express.js
Authentication: * Used bcrypt for secure password hashing.
Implemented JWT (JSON Web Tokens) for stateless auth.
Built the entire Login and Registration flow from the ground up.

Authorization & Security:
  Custom Middleware: To validate tokens and protect specific routes.
  Data Isolation: Added logic so users can only see and edit their own todos no peeking at others' data!
  Secure Storage: Tokens are stored in HTTP-only cookies to keep them safe from XSS attacks.

Input Validation:
    Using express-validator to clean up and check incoming data.
    Set up custom error handling with messages that actually make sense.

Rate Limiting:
    Added protection against Brute-Force attacks by blocking IPs that spam requests.
    Granular Limits: I set different limits for sensitive stuff (like /auth) compared to general routes.

Login & SignUp with Backend Integration

I have successfully integrated my frontend with a custom backend for Login and SignUp. The system is designed to provide immediate, context-aware feedback directly within the HTML interface.

Robust Error Handling: Instant UI feedback for invalid inputs or existing emails, ensuring users know exactly what went wrong.

Live Feedback: Real-time, color-coded status messages (e.g., “Creating account…” or “Login successful!”) to guide the user.

**Secure Tokens: **Implemented HTTP-Only cookies for session storage to protect against XSS attacks and keep user data safe.

Asynchronous Logic: Used async/await to handle backend requests, ensuring the UI stays in sync with server responses before resetting forms or redirecting.

Today I spent some time improving the project structure by reorganizing my files to make everything cleaner and easier to maintain. This makes the codebase more readable and will help a lot as the project grows.

I also implemented a temporary ID system for newly created todos, so each task now has a unique identifier even before the backend is connected. This is an important step to ensure smooth state handling later on.

Additionally, I started working on a** login page** where users can either create an account or sign in. This feature is not fully functional yet, but it’s an important foundation for when I connect the frontend to a backend and add real authentication in the future.

I have implemented the functionality to add new tasks and mark tasks as completed. Completed tasks now automatically move to the “Completed” section, and tasks can also be moved back to the active list if needed.

I have built the basic data structure of the to-do app and will initially work with fake data.

I’m working on my first project! This is so exciting. I can’t wait to share more updates as I build.