All solutions

Well, this one took a while!

I wanted to write all the components for this application from scratch, without relying on component libraries. This presented many challenges, particularly with the extensive use of modals throughout this design.

I also wanted to make the app as accessible as I could, although I still have a lot more work to do in this area. The drag and drop functionality was particularly challenging, despite using an external library (@dnd-kit). The main issue I had was getting this to work nicely with touch devices, since I could not get @dnd-kits 'sensors' API to work as expected.

On the server side, I had a couple of issues pertaining to my database design. I started with defining an array of 'taskIds' on the 'Column' model, then switched to having the identifier on the 'Task' model instead (e.g. 'columnId' field on each Task object). However in the end I found that I needed to combine both approaches in order to effectively write my controllers on the server and optimistic updates on the client. I am not super happy with this approach as it means that there is some duplication of data, which could lead to difficulty in maintaining the database should this app be scaled.

Completing this project has definitely given me some insight into areas that I need to focus on for my continued personal development. Particularly testing, error handling (both client and server) and database design.

Thanks for taking the time to look at this solution, I welcome your questions and any feedback, positive or negative!

Glen

Continuing to revisit these previously completed challenges with accessibility in mind. Any tips to improve accessibility are most welcome!

Cheers, Glen

This is my first real attempt at building an accessible project here on FrontendMentor, as such I could use some tips as to what could be improved in this area.

The drag and drop functionality currently only works on desktop since I used an external library, my plan is to learn how to write some custom drag and drop code which is accessible in future.

I am aware that this project fails accessibility on color/contrast issues but I wanted to stick to the design as closely as possible. However if there are issues with focus states, labeling etc then I would be glad to hear about them.

Cheers, Glen

This is my second project built using Sveltekit. I challenged myself by implementing progressive enhancement throughout, making sure that all the functionality worked correctly with or without JavaScript - please disable JS in your browser if you wish to test this out.

Another challenge was choosing not to use a database, instead relying completely on browser storage + svelte stores. This made reactivity tricky at times due to how svelte does not share stores between the server and client when implementing progressive enhancement. The solution to this was to abstract my 'actions' in to a separate 'actions.ts' file and call them from both the server and the client when using progressive enhancement.

Working with a framework like Sveltekit, which pre-renders HTML has really highlighted the amount of accessibility issues with my code (as highlighted by the accessibility report included on this site). For my next project I intend to go 'back to basics' a little and work on my accessibility and semantic HTML skills.

Any questions / comments are welcome! Glen

This was my first time using Svelte and Tailwind, I was interested in being able to maintain the search and filtering functionality with JavaScript disabled by taking advantage of SvelteKits server side form actions. However it is not currently possible to use filtering at mobile screen size without JS since the filters are part of the modal which requires JS, hopefully something I will get around to fixing soon. I also intend to add the dark mode toggle at some point too.

As a newbie to both svelte and tailwind, I could always use feedback on optimizing my codebase, better re usability and abstraction practices for tailwind etc.

Cheers!

This was my first time writing tests for any of my projects, and as such they are fairly sparse. I intend to continue working on this project, which includes writing more tests. I welcome any constructive feedback, particularly in relation to the tests that I have written (e.g. could they be better organized etc). Thanks for looking!

This was a big one! My first full stack application, please take a look and let me know if you have any feedback / questions.

Feedback always welcome!

Used bitly API as shrtcode was very slow. The trickiest part of this challenge was getting the main image of the person working to stick to the right side of the page but also keep a consistent margin on the left. I did eventually manage to achieve this but my solution is rather 'hacky', I would be very interested to hear what others did to achieve this!

Cheers, Glen

One of the most complex projects I have attempted from a layout perspective, first time using several libraries such as react-router-dom, react-hook-form & useMediaQuery/material-ui.

I have removed the form submit functionality which relies on a Python backend since this would not work on GitHub pages. I plan on customizing this design to create my own personal portfolio next.

Overall I am pretty happy with the result, however I welcome any feedback you may have.

Thanks, Glen

The styling for this one got a bit messy towards the end, due to my not thinking ahead with the differences between the mobile and desktop design. However I am pretty happy with the finished result.

General question regarding the colors given in the style guide, I often find that they are not exactly the same as those shown in the design, particularly with grays for things like text. The same goes for font sizes/font weights, I usually have to reduce the given font size to make things match up properly.

Specific question for React users, how do you go about rendering elements that may change position on the page between mobile and desktop sites? For example the "$16.00 / month" element in this design which moves above the slider bar in desktop view. Currently I am copy pasting that element into the location I want it for desktop, the giving it a different class from its identical element in the mobile position (e.g. slider-dollars__container--desktop). Then I set this to display: none then to display: block inside a media query. However this approach does not seem to be very elegant so I am sure there must be a better way.

EDIT: I just tried accessing the github deployment on my mobile device and I cannot scroll down the page in order to see the whole thing, can anybody suggest why this is happening? (the slider bar is not filling properly on mobile either if anyone has any ideas).

Cheers, Glen

Wow this one was really challenging, having completed a couple of intermediate challenges on here I would say that this 'junior' challenge was even more difficult than those, it should definitely be moved up a tier IMHO! To tell the truth I got a bit frustrated and decided to leave this one without completing the desktop design, so not everything is complete.

Questions for those using React, how do you go about styling your apps? I have always used CSS stylesheets but ran into some serious problems here with the layout once I started to add media queries for the desktop design. Is there some sort of ternary statement which could be used as a substitute for media queries which would allow me to write my styles inside my React components? (or a better way to write styles?).

Cheers, Glen

Not perfect by any means but this challenge really pushed me both in functionality and design. Could anybody suggest how to add hover functionality which changes between light & dark modes? I have tried add :hover selectors in my global.js file but this does not seem to work.

Other than that any feedback is always welcome!

Cheers, Glen

Uploading this before I am actually finished in order to see some other solutions on here. I have spent two days trying to figure out the filtering functionality and it is quickly becoming far more complex than I suspect it needs to be. If anyone has a solution to this please do link yours!

Took me a while to get all the form validation working properly, used a tutorial from tutorialspoint.com & then edited it to make the field highlighting etc work correctly. However I do feel that my javascript 'validate' function is somewhat bloated, could somebody suggest a cleaner way of doing this?

Cheers, Glen

Feedback always appreciated!

Pretty happy with this one, helpful pointers are always appreciated!

Cheers, Glen

These newbie challenges sure do push me!

I struggled with many aspects of this, I wont list them all here but a problem I keep running into is using position: relative to display 'pop up' boxes such as the desktop share state. Whenever something like this is added to the document it realigns other elements around it causing the site to look messy. Is this a problem caused by toggling display: none to display: flex ? Should I be using the visibility: hidden property instead?

Any help with any aspect of this challenge is much appreciated.

Cheers, Glen

Really struggled with this one, particularly with getting the images to place correctly, therefore I gave up on placing the shadows/box images and just went with the main two.

Could somebody give me some general guidance on what position/display values I should be using to place images in this way?

I also struggled with making the site fully responsive, as you will see in dev tools if you select a device such as the iPhone 5/SE, the accordion overflows the viewport with no background. Was my approach with the body/html selectors wrong here?

Thanks, Glen

Really enjoyed my first challenge on frontend mentor, I struggled with getting the buttons to stick to the bottom of my containers as the text above grows/shrinks. The containers are not flex containers & I would rather not set them as so, as this breaks a lot of my code. Could somebody suggest a simple way of implement this so that the margin below the buttons is always consistent (e.g. they always line up horizontally). Thanks, Glen