All solutions

Hi All,

Disclaimer: The quote API stopped working for some reason while I'm submitting this challenge, so it may not load correctly in this app!

I've been yearning to do this project for a while now. It was a good practice for working with thunks in React. In my opinion, this clock app would be perfect as a screen saver for a more complex application.

This app uses three different APIs for:

• Motivational quotes (the programming ones were not working). Users can generate a new quote each time the refresh icon is clicked.
• Timezone and location based on their IP address.
• Time details once they expand the side panel.

The overall application look is dependent on the current time:

• Between 5AM and 6PM - bright colors, daytime background and a sun icon
• Between 6PM and 5AM - dark colors, nighttime background and a moon icon

For getting the current time, I used the Date object as it would be irrelevant to get it from the API as well. I also decided to implement 12 hour time format since it can be understood by every user.

I also added some loading bar components for better UX.

As always, I'd be grateful for any tips or suggestions.

Happy Coding!

Hi All,

This was supposed to be a quick distraction from creating yet another React app. It is a nice project to excercise grid and other basic CSS techniques.

As always, feel free to leave any comments or suggestions on what could be improved.

Thanks & happy coding!

Hi All,

This project was my first attempt with basic gsap animations.

As always, I'll be happy for any tips or suggestions.

Thanks & Happy Coding! 🎅

Hi there!

This project took me a little bit longer than I expected, the autumn weather definitely does not help with my coding motivation :D

To summarize, the users are able to:

• Add and remove items from the cart.
• Update quantity of the cart items.
• View the cart's content.
• Open a modal gallery carousel by clicking on the large product image and interact with it.
• Switch the large product image by clicking on the small thumbnail image.
• Interact with mobile gallery by tapping the arrow buttons or swiping right or left.
• View the optimal layout for the site depending on their device's screen size.
• See hover states for all interactive elements on the page.

In addition to this:

• The cart is stored within local storage, so it's fetched from there as soon as the page reloads.
• Users can swipe between slides on mobile devices - I used React Swipeable library to implement this feature.

As always, I'll be grateful for any feedback.

Thanks & Happy Coding! 🎃

Hi All!

This project was a breeze in comparision with the previous one. I picked it up mostly to practice typed hooks and Redux Thunk.

The users are able to:

• Generate a new piece of advice by clicking the dice icon.
• See loading and error states.
• See hover states for all interactive elements on the page.
• View the optimal layout for the app depending on their device's screen size.

As always, I'd be grateful for any tips or suggestions.

Thanks & Happy Coding! 🎃

Hi Everyone!

To sum everything up, users are able to:

• Complete each step of the form sequence.
• Go back to a previous step to update their selections.
• Selections and current steps are saved in local storage.
• Stored data is removed upon completing all steps.
• See a summary of their selections on the final step and confirm their order.
• View the optimal layout for the interface depending on their device's screen size.
• See hover and focus states for all interactive elements on the page.
• Receive form validation messages if:
• a) A field has been missed.
• b) The email address is not formatted correctly.
• c) A step is submitted, but no plan selection has been made.

I'll be grateful for any advice or suggestion whan could improved.

Thanks & Happy Coding 🎃

Hi All,

The users are able to:

• Add new todos - if they try to submit an empty form, they will receive an error.
• See already added todos after reloading the page - they are storoed within the localStorage.
• Mark todos completed and then make them active again.
• Delete single todos.
• Delete all of the compeleted todos in a bulk.
• See how much items they have left/completed.
• Filter between all todos, active todos and complete todos.
• Drag and drop the todos to reorder the list.
• Toggle between light and dark mode - initial mode is set up based on the user's preferences.
• See hover and focus states for all interactive elements on the page.
• View the optimal layout for the app depending on their device's screen size.

I used Tailwind for styling, form validity is checked with a custom hook and the overall state management is handled via Redux Toolkit. Drag and drop events were done using React Beautiful DnD library.

Happy Coding 🎃

Hi All,

Hope you're well.

To sum everything up:

• Users can choose the difficulty level - standard (Rock/Paper/Scissors) or advanced (Rock/Paper/Scissors/Lizard/Spock).
• Based on the selected difficulty, users will see a different game board.
• From the main game board screen, users can go back to the selection screen to choose a different difficulty level.
• By clicking on the 'Rules' button, users can open a modal with simple rules explanation according to the selected difficulty level.
• Once the user clicks on one of the game buttons, they are forwarded to a result screen where they wait for the computer to select their figure.
• There can be 3 possible results: draw, win or loss.
• Score is updated accordingly for each difficulty level and is stored within the local storage.

As always, I'd be grateful for any feedback.

Thanks & Happy Coding 🎃

Summary:

• Upon entering the page, users will see a loading animation while the data is being fetched from Firebase. To make this feature more prominent, the fetching function is embedded inside a setTimeout() function which delays it - I would not do this in a professional app tho.
• If the data fails to be loaded, the users will see a simple error message.
• If the data is successfully loaded, the users will see different animations and layout depending on their device's screen size.
• Desktop layout is based on CSS Grid.

Feel free to leave any feedback.

Thanks & Happy Coding! 🎃

Summary:

a) Upon submit, the form is checked by a custom hook which vefifies value provided in the input.

b) If an email is successfully submitted, it's saved within the Local Storage.

c) Users will receive an appropriate error message in the following scenarios:

• The input is empty.
• Provided value is not a valid email address.
• The email has already been provided and it's present in the Local Storage.

d) The validity check is slighly delayed using a setTimeout() method which imitates sending a request to an external server and allows users to see a loading modal.

e) Loading modal is rendered in a separate div using React Portal.

f) Application state is managed by React Context.

g) Users can view the optimal layout for the interface depending on their device's screen size as well as see hover and focus states for all interactive elements on the page.

No questions from my side, however I will be grateful for any feedback.

Happy coding! 🎃

Hi All!

Without further ado:

• The app is built with React.js and TypeScript.
• Styles are added using SCSS.
• Data is fetched from a Firebase database.
• React Redux is responsible for overall state management - there are two separate reducers for rendering the jobs list and handling filters.

Core functionalities description:

• Users can view animated loading components while the data is fetched from Firebase - to fully showcase it, the fetching function is embedded inside of a setTimeout() (I would not do it in a professional app).
• Users will receive an error message if the data fails to be loaded.
• Once the data is loaded, users can apply filters in three ways: a) by typing in a value in the input and pressing enter; b) browsing through available filters list and pressing enter; c) clicking on an available filter from the list.
• Users will receive an appropriate feedback if there are no filters that would match the provided value.
• Users will receive an appropriate feedback if there are no job listings that would match chosen filter rules.
• Users will receive an error if they are trying to submit an empty or incorrect value.
• It is impossible to submit two identical filters.
• Users can view optimal layout for the site, depending on their device's screen size.
• Users can custom focus and hover styles.
• The app is fully accessible - it is possible to move through the entire app using only keyboard and trigger the same events as with mouse.
• For better UI, I implemented a custom scrollbar.

As always, I'll be happy to hear any feedback or suggestions.

Happy Coding! 🎃👻

Hi All,

Hope you are well.

This project was a nice practice for working with the Date object. Overall, it was quite easy to make.

To sum everything up:

• Users are able to view their age in years, months and days after submitting a valid birth date.
• Users will receive an appropriate error on form submission if: a) One or more inputs are empty. b) The day number is not between 1 and 31. c) The month number is not between 1-12. d) The year is in the future or before 1900. e) The date is invalid, e.g. 30/02/2023.
• View the optimal layout for different screen sizes.
• See hover and focus states for all interactive UI elements.
• See animated age numbers on form submission.

This project was built with:

• React.js
• TypeScript
• SCSS
• BEM
• RWD
• Mobile-first workflow
• Animation libraries

As always, I'll be grateful for any feedback.

Thanks & Happy Coding! 🎃👻

Hi All,

Hope you're well.

This project was pretty easy, however implementing additional functionalities to the map component took me almost 2 hours (especially adding the customized icon and making sure that the map is centered automatically once the marker position changes).

To sum everything up:

• API communication is handled within React Context.
• While the fetch request has not been resolved yet, users are able to see loading animations.
• As soon as the application is mounted for the first time, users can see their own IP address information.
• Users are able to search for any valid IP address and see its details.
• If the input value is not valid (it's empty or the IP address does not exist), users will receive an according error message.
• Address location is marked on the map using a custom icon.
• Map is centered automatically as soon as the IP address location changes.
• Users can view the optimal layout for each page depending on their device's screen size.

As always, I'll be happy to hear some feedback on what I can improve.

Thanks & Happy Coding! 👻🎃

Hi All,

This is my first project ever combining SCSS & React.js and to be honest, it was way easier than I initially thought.

To sum everything up:

• Form validity check & API call are set inside React Context.
• Users receive an appropriate error message depending if the input field is empty or the provided URL is incorrect (validity is checked using a regular expression).
• List of shortened links is dynamically rendered (starting from the most latest one) and saved within local storage.
• Users are able to copy the shortened link to a clipboard using a Copy button.
• Easier animations are implemented with SCSS, the on scroll ones with Framer Motion. Mobile navigation is animated with React Transition Group.
• App's layout is optimal for any screen size.

As always, I'll be grateful for any tips or suggestions what I can improve next time.

Thanks & Happy Coding! 🎃 👻

Hi All!

I didn't feel like doing anything complicated today, so I chose this project as another React.js + Bootstrap practice.

It was fairly simple, I had a lot of fun while doing it.

As always, I'll be happy to hear any comments or tips that I can use in my future projects.

Thanks!

Hi All,

Hope yall well.

This project was perfect for practicing Bootstrap. I haven't touched this framework in over a year. I have also used React Context for managing the color theme. Overall, this one was quite straightforward and easy to complete.

As always, feel free to leave some feedback.

Thanks!

Hi All,

Hope you are well.

I've decided to do this project because I needed to distract myself from React.js for a little bit. I stated learning React back in March/April and I haven't done a normal website project like this since then!

In this challenge, I used a little bit of TypeScript for the navigation as well as SCSS for styling - I also haven't used it for over 4 months and forgot how handy it is!

Overall, this project was fairly simple and it was nice to practice the basics after such a long time.

As always, if you have any suggestions, I'll be happy to read them.

Happy Coding!

Hi All,

Hope you're well.

I've just completed another project in React.js and TypeScript.

This one was fun, at the beginning I had no idea how to create a comment and nested replies list, but I think I somehow managed to do it in a nice way:

• you can add comments and replies, edit and delete them
• for modal, I used a portal to make it appear above the main app content
• Ihave also added an extra reply to show that only 3 levels of replies are allowed and if you delete a parent comment or reply, the child ones also get deleted
• state in the app is managed via React Context
• functions for fetching, adding, deleting and editing the comments are exported from a separate file that imitates a dummy API

Hope you like it and as always, I'll be grateful for any suggestions what I can improve.

Thanks!

Hi all,

I've just finished the Calculator app, which to be honest took me a couple of days and attempts to create working calculator logic.

On top of the basic requirements, I have also implemented:

• logic for squaring the numbers
• history that saves up to 10 latest calculations

Hope everything works and if it doesn't - please do let me know and I will work on it.

Thanks & happy coding!