Skip to content
OverviewSolutions
6
Comments
8

Francisldn

@francisldnLondon250 points

Freelance frontend developer with blockchain dev experience. Dev contributor @ Airswap | #JS #TS #Solidity #react #nodejs #truffle #hardhat | Open to new opportunities

I’m currently learning...

React library and hooks, NextJS, Typescript, responsive design - focusing on building portfolio projects

Latest solutions

Latest comments

  • Francisldn•250
    @francisldnPosted almost 3 years ago

    Hi @ohermans1 nice job! Everything works smoothly and it is fully responsive. Well done! The only comment I have is regarding the search bar. I personally think that it's not aesthetically pleasing to display the search bar if it's empty, so for my build, I chose to hide it if it's blank. But this is purely down to personal preference. You can take a look at mine here: https://www.frontendmentor.io/solutions/job-listing-search-with-nextjs-tailwind-and-typescript-BJci7g6I5 Feel free to comment on my solution too.

    Marked as helpful
    1
  • Francisldn•250
    @francisldnPosted almost 3 years ago

    Great job, really love your solution, bookmark, search and authentication functionalities work well. I just submitted my solution today and I have used similar technologies - Typescript, React, Firebase. I like your notification from the 'react-hot-toast' package. I will implement the same for my project too. Will spend some time studying your solution as there are so many learning points for me.

    Marked as helpful
    0
  • Francisldn•250
    @francisldnPosted almost 3 years ago

    Hi @ericnbello great job on completing this challenge. I have just submitted my solution today for this challenge. I have a few comments on your solution:

    • I notice that you used React and TailwindCSS for your solution. Similarly I have use these technologies, I'm a big fan of both React and Tailwind.
    • On large screen size, the spaces on margin left and right seem quite large, I would try to adjust the spacing for the layout on large screen size.
    • For the "Trending" movies, I personally think that the scrollbar is not aethestically pleasing, so I chose to get rid of it using a package called "tailwind-scrollbar-hide", you can check it out.
    • The bookmark functionality works when user clicks on it but it doesn't add to the "Bookmark" page when I bookmark a movie/TV show.
    • On the "Bookmark" page, when I remove a bookmark, I would expect the movie/TV show to drop off from the list, but it remains on the list.
    • Good job on implementing the search functionality.
    Marked as helpful
    0
  • Francisldn•250
    @francisldnPosted almost 3 years ago

    Hi @JakubStranianek, nice work on completing this challenge. I have just submitted my solution today for this challenge. I have a few comments below:

    • Really love the "play" icon on hover. I will try to implement the same as well.
    • Scrollbar for the "Trending movies" doesn't look aethestically pleasing, I chose to hide it for my project
    • Bookmark functionality doesn't seem to work, ie. a user can't add or remove bookmarks
    • I see that you have implemented "login" and "sign-up" components but they don't seem to be available on the hosted site.
    • Really great responsive layout
    • Search functionality works fine, good job.
    Marked as helpful
    0
  • Francisldn•250
    @francisldnPosted almost 3 years ago

    While tackling this challenge, I have encountered an issue which I could not resolve: https://stackoverflow.com/questions/72095723/problem-with-using-useref-to-add-csstext-in-typescript

    Would highly appreciate if anyone can share any insight into this issue.

    0
  • Francisldn•250
    @francisldnPosted almost 3 years ago

    Hi @NicolasEiriz, regarding your question, this is caused by the default body height setting. Body height is by default set to the height of the elements (.card + .attribution) on the page. So you should add below to expand the body height to 100% of the viewport height. Then flexbox will automatically center the elements.

    body {
min-height: 100vh;
}

    Refer to this article to learn more.

    Marked as helpful
    0
View more comments