All solutions

Hey All

Another day another project.

This one didn't take me long (and could be slightly more polished).

I really enjoyed creating the raised effect around the timer using a combination of light and dark shadows. I didn't really know how to approach it, but I got there in the end.

I went for a 3rd party timer hook (useTimer from react-use-precision-timer), as I've tried to create one in the past using setInterval and it didn't keep time as well as I would have liked.

Have a look if you like.

Regards

Ollie

Est Time: 10h | Actual Time: 9h 37m

Hi FEM Team

This is my first somewhat 'full-stack' app. I used Firebase (which is super simple btw), to create a sign-up/login server. Passwords are encrypted using bCrypt. My validations for the form aren't perfect, but they do the trick!

Aside from the login setup, the rest of this project was pretty simple. I got a little bored at the end, so it's not as polished as it could be, but I'm happy with the overall functionality and look. Most features work 90% how they should haha!

Let me know what you think. (although the passwords are encrypted, please just make up a random password/email for testing so there are no security issues).

Regards

Ollie

Hi front-end mentor crew!

This is another project created using React. I found it a really enjoyable one to make.

Everything should work pretty smoothly, so take a look if you have a chance.

People may have noticed I include my dev time at the bottom of my comments. When I very first start my projects, I estimate a time by looking at the design files. I then set up a Wakatime and don't look at it or time myself until I upload it here. I feel being able to estimate how long a project will take you is a pretty handy skill!

Ollie

Est time: 5 hours | Actual time: 5 hours 12 minutes | Wakatime

Hi team

I've had a potential opportunity open up, so have flicked back to learning React to meet the requirements. I did this simple little project to get my head back in the React mindset. I actually really enjoyed this one and would highly recommend it.

I've added some random number generation to this one, so the graph should change each time you refresh - just to keep it a little more interesting.

I tried to do a little forward planning for this one, so even though it's just a small project, I spent some time mapping out my components.

I also spent a bit of time making some code snippets for VS code for default SCSS and react component creation - so that should speed up some future projects.

Let me know what you think.

Regards

Ollie

Est Time: 4 Hours | Actual time: 4.5 hours | Wakatime

Hey team

This was my first attempt at a Guru project here on Front-end Mentor, I really enjoyed it, although it was certainly challenging.

I am currently really enjoying Angular, so used this to create my project, with SCSS as a pre-processor.

This was by far my most complicated project ever and I learned a ton! There are a number of bugs to do with the cart, especially when handling multiple products, but the codes got pretty tangled, so at some point, I might come back and rewrite this to get it all running smoothly.

One of the reasons my code got a bit muddled, was due to going home to New Zealand for a bit, so I was really working on this in random dribs and drabs. This also caused my est hours to blow out a little as well.

Take a look and let me know what you think!

Ollie

Est time: 25 hours | Actual time: 32.5 hours | Wakatime

Hey Frontend Mentor folk

I have completed another advanced challenge using my newfound Angular skills.

Overall, I really enjoyed this project and didn't have any major issues - but I felt it really stretched my skills.

I also added a little extra functionality, so that each photo on the story page can be clicked to open up more information about that photo/story - I didn't spend too long styling these extra pages, but let me know what you think.

As always, I would really appreciate any feedback!

Have an awesome day, happy coding!

Regards

Ollie

EST Time 20h | Actual Time 16h | WakaTime

Hi FEM team

I've been off the site for a couple of weeks while I worked through a course on Angular!

Created using Angular and SCSS, this was by far my most advanced project yet!

I have recently been learning Angular, so it was really fun putting what I've learned into practice to create a reactive, dynamic web application.

I think I did pretty well on the functionality, including managing to fetch the countries from the API, creating a working search and filter function (that also works in combination), create a separate detail page for each country with links to each border countries details and I even managed to include a light-dark toggle on this one.

Please let me know what you think - Happy for all feedback big and small!

Cheers

Ollie

Estimated Time: 15 Hours | Actual Time: 13.5 hours | Wakatime

Kia Ora FEM crew

This week I have pivoted away from learning React to focus on Angular (due to an opportunity that has opened up at work to do a couple of small angular projects.)

So far I'm actually enjoying Angular a lot more than React, although I do think it's quite a bit trickier. I'm also pro-Google over Facebook (Meta) - so that could be part of it.

Let me know what you think, or if you have any feedback.

Also, remember to follow me if you are keen to see my future Angular projects - who knows how they will be haha!

Have a great day!

Ollie

Est time: 5 hours | Actual time: 4 hours | Wakatime

This was just a quick project I whipped up to have a little practice with basic fetching of APIs using axios. I hadn't worked with APIs in React until now, so I kept it super simple.

I did most of it on the train with no internet, so I am happy with how my react learning is coming along!

Overall a fun little project.

Est time: 4 hours | Actual time: 2 hours -> I smashed this one pretty quickly haha! Timing thanks to wakatime.

This is my 3rd project created using React (and my most complex by far). I feel like I learned a hell of a lot working through it.

I've got a few outstanding sections I will need to come back to:

1. I want to add drag and drop functionality, but couldn't work it out. I was trying to use react-beautiful-dnd - I would appreciate any suggestions.
2. I haven't yet added a light/dark mode toggle - any tips on how to do this simply in React?
3. I forgot to add the delete button for tasks - This one won't be tricky, but I want a bit of a break from this project.

Once I've done a bit more work on my react course, I may come back and fix the above, and reload the new solution.

EST time: 8 hours | Actual time: 12 hours (I took a lot longer than expected, as a lot of learning and trial/error was involved - times recorded using Wakatime)

I really enjoyed this project - it is my second using React, and involved a lot more props and other behind the scenes react then my last project to get the slider etc working. I also used SCSS as I much prefer it over standard CSS.

The initial app was created using create-react-app, and was built and added to github pages using gh-pages.

I am really happy with the end result, but of course, appreciate any feedback!

Est time: 4 hours | Total time: 6 hours

No questions on this one - Going back to basics for my first attempt with React.

Of course feedback is always appreciated!

Cheers

Ollie

Feedback appreciated!

I didn't spend much time on the responsiveness, but I am happy enough with the end result. Looking forward to my next project, which will be my first attempt with React.

This one didn't capture my interest as much as my previous challenges, so I didnt complete it as good as I could have.

Interested to see how other people did the 'flip board' style countdown, I just made it static in the end.

One thing I struggled with, was that the 'Testimonials' section kept on sliding up over the images once the media queries kicked in. I resolved this (sort of) by adding a massive margin to push the whole section down, but of course, this isn't optimal! Any ideas?