All solutions

What are you most proud of, and what would you do differently next time?

Hi!! This is my 27th challenge here at FEM and a long overdue one, again.

It's really nice to do a challenge once again and completing it. There's a lot of things happened this previous months and one main is that I had a job as a dev. That's why I was not active again but I think I could be active again now^^.

This challenge was again really fun building it and I built it with the new app router. I know i'm late with this new router and that's why I am not really satisfied on how I structured the codebase and if I used those new things correctly.

For this, I used mysql for the database with drizzle as the ORM. Both are new to me, though I did have experience using mysql with my previous work but only with another ORM and not really natively, that is why I really want to learn it and I found drizzle is really close with how you write it manually and could also inject with sql queries directly!! Really cool!!

I also added logout button even though there is none inside the mockup, I just thought that how will the user change account.

For the user's information, I made the email not changeable for now. Maybe will change if I could think a better approach for this.

The most challenging part on this is finding a database hosting that is free and I really spend lot of time, trying different codes in order to make the connection as limited as possible so that the maximum connections of the hosting that I used won't cause any error. Though this still came up in the end and thankfully I found other hosting with much flexibility while also being free.

Right now, I don't know if the app produces bugs or not, but visually, when you switch the tabs like from links to profile , if you make your cursor stay on the link while clicking it, you will find a animation bug on the opposite side. This didn't occur when I made the header in a regular component that is called normally in another, this only appeared when I made use of layout that includes this header inside.

There are lots of improvements that could be done for the app, but I'm just glad that I finished this one out.

Thanks for checking it out!!!

Hi! This is my 26th challenge here at fem and a long overdue project which i'm a bit guilty of.

There's been lot of going on and haven't had the time and just forgot about the projects. Lots of other app projects that I did for school, for some freelances and even took hackathons which is really nice. Plus finally finishing my ojt and nearing my graduation this August!!

This challenge was fun to do and I picked this because it is a useful project idea that I can personally use.

I opted first testing on this project and have test runners setup and initially done so, but when I came back to finish the project, I just scratch it out since typescript solves those problems where I intended to add test on. Should have just stayed with testing because nearing the completion of this project, encountered many bugs after changing some api codes and it is a hassle checking components and manual test and I don't know how to use/configure linter.

Drag and drop is not included because I didn't think about it too much but maybe could try to add those if I find the time.

I also created some custom modal like when clicking on the add new column button instead of just showing the board modal for it.

I also have no idea on how to make components like dropdown be hidden if I click on elements that are not inside it. I googled a lot and tried things but couldn't do it, I mean document.activeElement should easily solve this but whenever I tried to use it, it just always returns the body element therefore I couldn't check elements that are outside or inside on a certain component.

There are lots improvements that could be done for the codes and will plan to refactor it.

Overall, I think I did fine on this and just happy about it.

Thanks for checking this one out!

Hello. This is my 25th challenge here at fem and my first challenge into using testing!!

This challenge was fun to do and it is my first time into coding a tic tac toe game as well and I hope I did fine on this one. For the logic of the game, I used the minimax algorithm to get the most optimal move for the AI and since it uses the optimal move, I can't even win :>

As I mentioned, it is my first time using jest or doing testing in general using javascript. For the implementation of the backtrack algorithm, I used a test first approach which I find really nice and i'll be adapting this one for further challenges and I kind of relate now to others saying seeing green light on their test soothes :>

But for the most component in next, I haven't made the same test approach because I don't know how to test them initially and don't know when I should test a component so this is not a consistent one. But hey, I test first again on the new user experience (NUX) and for the grid navigations for keyboard keys!

For the grid itself, initially, those were created using button inside in their own div role="gridcell" inside the role="grid", but at the end, I changed them into just using the div role="gridcell and completely removing the button elements. The reason for this is that I find it confusing as a user when placing a move mark on the grid, because a button have 2 states right, a pressed/toggled and not pressed/toggled, I don't want the user to think that they can undo a move after placing. Adding disabled or aria-pressed on it would be much confusing and mess up the grid navigations. That is why I just use the div role="gridcell" itself as the placement for each move mark with their own sr-only text.

Overall, i'm happy on the outcome but I need to learn more about testing and using it! Another one, maybe adding some threshold for the scores to whether make cpu more smart would be nice, you know, so that we could win:>>

Thanks for checking this one out!

Update.

I added an online mode as well so that everyone could play against different players. I use socket.io on this one. Thank you again!

Hello. This is my 24th challenge here and my first premium challenge taken^^

This challenge was taken around January but took me too long to build it. January and early February was really hectic as again, lots of school activities/projects and even short film animations, those was grouping so that I had to shift my focus for it at the time! Glad that it was over. Phew:>>

I picked this challenge as a first out of the premium challenges because this challenge was the one that I really want to create when I saw way before the challenges here at fem and i'm really glad that I was able to take this one!!

This is my first time using styled-component as well. I haven't searched articles about what is the proper approach or convention when using styled-components. That is why for every styled-component that I used, I prefixed it with a "Styled" word like "StyledNavbavList", I was thinking that it is too verbose and kind of felt a bit off at first but I just continued with it. It will be really nice if you share your thoughts about using styled-components, specially naming each styled.

I added some animations as well on the site and I think I got the functionalities right? Hehe, hoping so. For the create-plan page, I initially thought that there will be no logic in the price computation, the moment when I had to push now the site, I saw a readme on the challenge folder from the challenge.zip, there it was. The logic for the computation :>>> That was close submitting a not fully functional site!!

Lastly, if you could give me a resource/information on how to render svg dynamically. For example, I have 3 svgs in a folder, how can I just import that and use it without using the svg as a value for src prop in the img. Thanks!

(The hover for the social media icons was supposed to make it colored paleOrange but never did it because I want to render svg dynamically and not manually adding svg code if there is such a way)

Overall, I am really happy with this one and hoping that I could not tackle more challenges. Thank you for checking this one out!!

Hello. This is my 23rd challenge here and trying to be good at framer-motion^^

It's been really fun doing this even if I finished for days since got loads of school activs :>>.I am still new to using framer-motion so I don't really know if I used it correct but it works for now and i'm glad with that. I also reuse some animations that I used before :>

I tried to add more animation like page load but I really lack what to add so I kind of erase that one but I added some animations on the different tabs interactive elements and happy with the result. I forgot to right now a navlinks trap-focus but could done in other day:>

But overall, i'm happy with this one. Would be really great if you have find any other bugs on this one. Thank you^^

Hi, this is my 22nd challenge here and my 2nd react challenge as well here.

The challenge was really good especially if you are learning a framework like me because there are lots of repetitions and dynamic changes.

I added a pagination so that it won't bombard data. A loading screen would be nice in here but I just realized it just by now typing this comment. I tried my best to focus on different content of the page so that screen reader will function properly.

Would be really glad for other proper way in react on my solution, really need that.

Thank you for checking out the solution!!

Hello!! This is my 21st challenge and my first challenge using React!!

I have been studying React right now, mostly google-ing things out since I don't have any course about it hahaha but managed to learn even in small increments.

This challenge was fun to create, I want to add other animation but useEffect really did make my head hurt a lot, so yeah, didn't add other but managed to add like in the design. But as I go coding this challenge, useEffect keeps making more sense and so yeyy.

Also, why does it keeps prompting that it needs the props that I used inside it, as well as the other functions that I used. It would be counterintuitive to include them in the dependency array since I am not firing the effect from those, but it keeps telling me put them inside. Then if I put the props inside, it says now it needs to be destructured, then when I desctructured it in the component, it now needs to be inside a useCallback. I have a lot to test.

I also implemented my own drag and drop, didn't want to use other modules because it is my first time creating a drag and drop, it is beneficial to first create it as much as you can before jumping to other solution. I got it right :>>

There would be a lot of improvements to be done and if you can point other things, I would really appreciate it. Thank you for checking it out!!

Hey, here is my 20th challenge here in FEM.

The challenge was really fun to do so and really liked the simplicity of the design yet attractive. Could have added some animations but I thought it doesn't really need to be that flashy.

I wanted to make this via a frontend framework, however I still get the doubt of not feeling to learn a framework at this point but maybe I'll learn one after a month or few month.

Made use of a tabbed interface in the feature section and I hope I implemented it the right way.

If there are any issues or anything that can help with the site, feel free to drop it^^

Hi. This is my first solution using mobile first workflow and was happy with it^

At first, I was thinking a lot on how to properly make the desktop design since I will start mobile, but as soon as I create the first section and transition it to desktop design, I found it relatively easy and was happy about it. From now on, starting always in mobile first so ba-bye desktop first :(

If there are any issue and recommendation, would be really glad to hear it^^

Hello, this is my 18th challenge. It's been a while since my last submission because there are things that I am dealing with. Also i've been designing and creating web apps on my own and that is a win over what i'm dealing with, so yey :>>

This challenge was pretty fun, I also made this a non-media query using clamp function which is very handy in terms of sections like this, well aside for using prefers-reduced-motion.

Also, don't do ternary inside ternary like what I did in my countdown class in js, I just made it so that it won't take couple of lines :>

(Just noticed that when loaded in mobile, the center of the card seems a bit janky, it is like see through the next number, why is that not appearing on desktop hmmm)

Feel free to comment any issues found. Thank youuu^^^

Feel free to drop your query and especially if there are issues that see in my solution, that would be really thankful^^

Added some observers for some touch of animation.

Feel free to drop any comments especially if there are things, issues that needs to be addressed ^^

This challenge gives a good chance for practicing creating more extensible classes, this challenge was composed different layouts but if you look for points, you can identify similar sections and use that to compose reusable components.

Also I had a bit of trouble in this challenge but it was fun^^

I used gulp for preprocessing and for post

If you see any issues, feel free to point it out^

I had trouble placing the hero image properly but managed to pull it off. Also I have no idea on how to add the box-shadow in the provided svg. Drop your comments if you see issues in my solution^

This challenge was really fun. My first draft was full of animation but I couldn't pull that one formula in terms of checking boundary so I had to remove it. Limited myself to using only few html elements. So I need to be very careful in my js since i'm just reusing those elements.

Anyway, have a look and drop your comments in my work^^. I will also create the spock version

Working with json is really a great challenge whoever taking on this challenge.

Just drop your query if you find any issue and that will be really helpful^^

Hello, this is refactored version of my first attempt.

Changed the toggle to what Grace suggested and it is really awesome. So a huge thank you Grace! Also for APG for pointing out that toggle at first, always keen in the eyes.

Thank you for seeing the solution. If you need help on it, just drop your query^^

Feel free to drop your question or comments about my solutions^^

Feel free to ask anything and leave your opinions on my work^^

I like to hear your suggestions about it. I kinda feel not great about this challenge of mine so any tips would be nice^

Feel free to drop your comments or question regarding my solution^^

Feel free to ask anything about my work and I would gladly give my comments

Feel free to ask any question and i'll answer it^^

Feel free to ask me on how I did it and I will gladly help you^