All solutions

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

I added some animations for winning and losing. I didn't add any for draw situations though.

What challenges did you encounter, and how did you overcome them?

I incorporated some animations into the challenge, but I've struggled with the following questions:

• Which animations are the most appropriate?
• How can I seamlessly integrate them with the challenge?
• Are the animations too simple or too complex?

In the end, I’m not fully satisfied with the result, as it’s challenging to integrate more complex animations effectively.

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

I built the app using Blazor WebAssembly and .NET. In the future, I plan to explore different technologies for my next project.

What challenges did you encounter, and how did you overcome them?

Blazor primarily uses CSS for styling pages, which I found limiting. To work around this, I used a familiar npm package called "gulp" to watch for changes in my SCSS files and automatically generate the corresponding CSS files.

However, there are alternative approaches. For instance, you can inject the Sass/SCSS library directly into App.razor (similar to how you would in an HTML file) and use it from there.

What specific areas of your project would you like help with?

I encountered some issues with deploying the code to Azure/GitHub, so I decided to switch to Heroku due to its convenience.

I really need to learn about clouds :)

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

What I think is an achievement:

• The use different technologies (Angular, Google Firestore, etc.) rather than use the same ones as the last challenge.

What I can do better:

• Use another hosting services instead of Heroku and Netlify (I tried to use Azure but failed)
• Maybe, I will play with Node.js instead of .NET to build back-end next time

What challenges did you encounter, and how did you overcome them?

• The use of new technologies (e.g., Google Firestore) => I really took my time to learn how to intergrate them through trial and error (with the help of google search and ChatGPT of course 😉)

Take your time to learn new things. Don't rush the process.

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

Technologies used:

• Frontend: HTML, SCSS, TypeScript, Vue 3, Vite
• Backend: C#, ASP.NET 8
• Database: MongoDB Atlas

What challenges did you encounter, and how did you overcome them?

The data includes information from 250 countries, which causes the page to load very slowly if all the data is loaded at once.

• To address this, I implemented pagination. Initially, only a portion of the data is loaded. As the user scrolls to the bottom of the page, additional portions of the data are loaded dynamically.

I discovered that MongoDB Atlas offers clusters and databases that restrict access to specific IP addresses only. Since I host my backend on Heroku using the dynos plan, it lacks a static IP address

• Heroku provides an add-on called QuotaGuard Static IP, which ensures outbound requests have a static IP address. I have added this IP address to MongoDB Atlas for access.
• However, I encountered an issue where I couldn't access MongoDB Atlas using the assigned IP address. I am currently investigating the cause of this issue. In the meantime, I have temporarily allowed access to the database from any IP address.

It's important to note that if a setup works on your local machine, it doesn't guarantee it will work online. Hosting involves numerous tasks and considerations to ensure everything functions correctly in a live environment.

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

What I learnt:

• I learnt to create a server for this web application using ASP.NET Core 8.0.
• I learnt to deploy the server using Heroku.
• I learnt how to configure proxy on the React client.

What I would do differently next time:

• Store data in a real database instead of reading data from the data.json

What challenges did you encounter, and how did you overcome them?

Challenges I encountered:

• How to deploy an ASP.NET Core app for FREE => I learnt to use Heroku.
• I put the client and the server in the same repository, got a few problems with deploying them separately => I asked ChatGPT how to configure the build settings for the server on Heroku and the client on Netlify.

What specific areas of your project would you like help with?

The server:

• Is the structure of files clear enough?
• With my current settings, what are the potential problems about security?

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

What I've done beside the requirements:

• I added simple animation for this page.
• I also revisited Vue, which I had abandoned for a long time.

What challenges did you encounter, and how did you overcome them?

What I encountered:

• I set "min-height: 100vh" in the and styled the element with "height: 100%" but it didn't work.
• It turned out, "height: 100%" only works if the parent element has a specific height. For example: "100px", "20rem", etc.
• I wanted the element to fill in the content of the element. After researching, I found out a way: styled with "display: flex" and styled with "flex-grow: 1"
• Note: the above can only work if is the only static child element inside of . If there was another static element inside of , you have to find other ways.
• I applied the same trick with other elements as well.

What specific areas of your project would you like help with?

What I think can be better:

• Though I added some animation in this app, I've still not yet satisfied with the result.
• Is there a Vue way to manipulate the elements to have them animated in order?

Hi😁! My name is Huy, and this is my solution for this challenge. It's been a long time since my last challenge. I did this in my free time.

Users should be able to:

• View the optimal layout for the site depending on their device's screen size
• See hover states for all interactive elements on the page

What I used🚀:

• Framework/Library: React
• Language: Typescript, HTML, SCSS

Thank you for viewing! Cheers🎉

Hi, I'm Huy. It's been a while since the last time I uploaded. 😁 I've been busy with work lately, so I don't really have time. Fortunately, this challenge doesn't take a lot of time.

Your users should be able to:

• See hover and focus states for all interactive elements on the page.

Thanks for viewing. 😉

Hi, everyone. I'm back and this is my solution for this challenge.

Your users should be able to:

• Navigate the slider using either their mouse/trackpad or keyboard.
• 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.

Framework: React Language: Typescript, SCSS

Hello😁! My name is Huy, and this is my solution for this challenge.

Users should be able to:

• 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

What I used🚀:

• Framework: React
• Language: Typescript, SCSS

I don't use any extra libraries Thank you! Cheers🎉

Hi😁! My name is Huy, and this is my solution for this challenge. it's been a long time since my last challenge. I did this in my free time.

Users should be able to:

• Control the toggle with both their mouse/trackpad and their keyboard
• 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

What I used🚀:

• Framework: React
• Language: Typescript, HTML, CSS

I don't use any extra libraries

Thank you! Cheers🎉

Hello😁! My name is Huy, and this is my solution for this challenge.

Users should be able to:

• View the optimal layout for the site depending on their device's screen size
• See hover states for all interactive elements on the page
• A section is only shown (except header and hero section) when the user scrolls and that section is in the viewport.

What I used🚀:

• Framework: Angular
• Language: Typescript, HTML, SASS
• I don't use any extra libraries

Thank you! Cheers🎉

Hello😁! My name is Huy, and this is my solution for this challenge.

Users should be able to:

• View the optimal layout for each of the website's pages depending on their device's screen size
• See hover states for all interactive elements on the page
• View each page and be able to toggle between the tabs to see new information

What I used🚀:

• Framework: Angular
• Language: Typescript, HTML, SCSS
• I don't use any extra libraries

Thank you! Cheers🎉

Hello😁! My name is Huy, and this is my solution for this challenge.

Users should be able to:

• View the optimal layout for the site depending on their device's screen size
• See hover states for all interactive elements on the page
• Open a lightbox gallery by clicking on the large product image
• Switch the large product image by clicking on the small thumbnail images
• Add items to the cart
• View the cart and remove items from it

What I used🚀:

• Framework: Angular
• Language: Typescript, HTML, SASS
• I don't use any extra libraries

Thank you! Cheers🎉

Hello😁! My name is Huy, and this is my solution for this challenge.

What I used🚀:

• Framework: Angular
• Language: Typescript, HTML, SCSS
• JS Library: Maplibre - map controller
• Map tile provider: MapTiler

Thank you! Cheers🎉.

Hello😁! My name is Huy, and this is my solution for this challenge.

What I used🚀: HTML, CSS, Typescript, Vue 3.

Thank you! Cheers🎉.

Hello😁! My name is Huy, and this is my solution for this challenge.

What I used🚀: HTML, CSS, Typescript, React.

Thank you! Cheers🎉.

Hello😁! My name is Huy, and this is my solution for this challenge.

What I used🚀: HTML, CSS, Typescript, React.

Thank you! Cheers🎉.

Hello😁! My name is Huy, and this is my solution for this challenge.

What I used🚀: HTML, CSS, Typescript, Vue 3.

Thank you! Cheers🎉.

Hello😁! My name is Huy, and this is my solution for this challenge.

What I used🚀: HTML, CSS, Typescript, React.

Thank you! Cheers🎉.

Hello😁! My name is Huy, and this is my solution for this challenge.

What I used🚀: HTML, CSS, Typescript, Svelte, Moment.js.

Thank you! Cheers🎉.

Hello😁! My name is Huy, and this is my solution for this challenge.

What I used🚀: HTML, CSS, Typescript, Svelte.

Thank you! Cheers🎉.