All solutions

I tried to challenge myself on this project and created a fullstack devjobs webapp. This website is capable to manage roles for private and company users. You can also read more about it in the read me and inspect the tech stack and screenshots. This app is not perfect or best possible optimized, also the design patterns could be improved. Also it has actually limited support for browsers. But when I will learn new things I will likely come back and refine it further. I have learned quite a lot doing this and have a feeling that I strongly improved my understanding of more complex webapps doing this. The journey goes on :D

This is my solution for the Multistep form. I have used React to create it. To manage the state and the error handling and validation I have used the context and React Hook Form. This is also the first project I have used Typescript to manage the component props and form types. Working with the React Hook Form and using Typescript the first time was the toughest part for me. The styling was made with a mix of Styled Components and TailwindCSS. The form also submits you data to an API but does not save it there. Do not worry. Its just an API to simulate the POST request.

Loved that project. I preferred using the rest api instead the static file. I have used Redux for state management and RTK Query for fetching and caching also made use of the loader from react-router. I also decided to make the theme switching by using daisy-ui and tailwind-css. For styling I used tailwind-css. Tried to cover the 404 response in an Error page. Polished a bit with framer for some minimal animations.

Sadly I was not able to find the design files. So I tried with what was visible online.

I have also tried to use daisy UI wich is built on Tailwind for this project.

This has been a funny but not difficult one. I have used the project to learn new things. I have tried to use react Query for fetching the data and handle the loading and error states. React Query is very powerful and I think very useful when working with more dynamic and fullstack Apps. What I really tried to learn here was the use of Tailwind-CSS which in my opinion is intuitive after using it. And I also tried to use jest and React-Testing-Library to make some rendering and functionality tests to get used to testing. Something that I will now always implement now. I have use a Tutorial to set it up. Also writing tests is not simple as Tailwind with mocking and simulating but I feel now encouraged to use it always now. If you are interested in Testing then check the link in the read me.

I have used React useReducer for the logic and Styled components ThemeProvider and context API to switch themes. It detects on start you preferred theme and stores if you change one in storage. The calculator supports very basic calculations with some limitations. So nothing fancy here. My main learning was the ThemeProvider wich made the switching theme super efficient.

Also time for me to post a Todo app solution. I have used Redux to manage the Todos and context for darkMode state. Both are stored in local storage. For the drag and drop feature I have used React DnD for web. The styling was mainly made in the components by using styled-components. It was a good practice for Redux and React DnD and this app is also something I could use in future for myself now.

I have used for the carousel react-slider library and passed the items with context api. Some minor issues with styles and a few things to make it a bit more appealing are left still for another day.

This was a funny project. Probably some refactoring would not harm the project and will be a goal in the future. I have tried to make the project a bit like the comments section on youtube or similar websites. I have tried to practise a bit useReducer and context API. My feeling is that the code feels overcomplicated still but thats going to be a target in the next future to simplify it more. For now it feels good but some critical bugs will be fixed as soon as encountered :) Feel free to check it out. You can switch users on top to simulate another log in. If you leave the comments empty then you will send a random quote. Here I had already some funny conversations lol. Make sure to expand the comment if you want to check a reply. They are closed by default.

I have been adding some extras to the design.

• Hide and Show button for links
• Delete button for links
• Limit for 10 items
• Custom Error messages based on API error response

Future goal is to add React DnD library on the project to reorganise the items and optimise the rendering by reorganise state better and some style improvements.

First I was thinking of using just DOM manipulation to get it done but then I thought in a real world we also would use some kind of send form. So I try to simulate a server respond by simply sending to another html file. But it still uses JS for manipulating the buttons and to read the querystring. What could be better is using radio buttons instead of normal button which I did. So that could be a possible future improvement.

I had a hard time to find the right way to let the image look like it should. I can't match the dark tones. If you have an advice for me feel free to help out :D Ofcourse any feedback is welcome.

Tried to use a little grid on the desktop view.