Skip to content
OverviewSolutions
6
Comments
8
Francisldn
@francisldn

All comments

  • Ollie•580
    @ohermans1Submitted over 2 years ago

    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

    A fully functional and responsive job listings page | React

    1
    Francisldn•250
    @francisldnPosted over 2 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 over 2 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 over 2 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 over 2 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
    @francisldnSubmitted over 2 years ago

    SCSS setup

    • As this is my first time using SCSS, setting up the folder structure took a while for me, but once it was set up, it provided a much easier development experience compared to using vanilla CSS. In particular, I would like to highlight a few things as below. 1. Nesting of CSS selectors - SCSS allows for nesting of selectors which allows for easier maintenance and reading 2. Creating variables using @mixin and @functions which provides for reusability 3. Creating CSS group properties such as colors and font which then allows for easy retrieval using map-get function 4. SCSS function such as lighten() enables user to easily change color to lighter shade

    Typescript React

    • I have used React in JS before, but this is my first time using Typescript React for development. Given the strongly-typed nature of Typescript, it took a longer development time as I had to figure out how to resolve certain error messages which are specific to Typescript. I had found Typescript intimidating in the past and was put off by the longer time requirement for development, but this experience has helped me appreciate Typescript a bit more and understand ways to deal with Typescript-specific errors. I did encounter an error which I could not resolve and I have posted it on Stackoverflow here. It is a problem regarding using useRef react hook to add cssText. Would highly appreciate it if anyone has any insight into this problem.

    Responsive mobile and tablet layout

    • It took me a while to adjust the desktop layout to tablet and mobile. I eventually used position: absolute to organise the layout as required. I have learnt various CSS position properties through the process.

    Dark/light mode & localStorage

    • I have learnt how to set dark and light mode using CSS properties and how to store the state in localStorage, using localStorage.getItem() and localStorage.setItem() functions. This allows user to store their viewing mode preference in the local storage and their preference will be persisted for their next visit.

    Github Search using Typescript React and SCSS

    1
    Francisldn•250
    @francisldnPosted over 2 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
  • Nicolas Eiriz•50
    @NicolasEirizSubmitted over 2 years ago

    Hi guys, I just finished my second challenge. For this one I couldn't center the div vertically using the flebox properties, I don''t know why, so finally I decided to use margin to center it.

    Really apreciate your feedback on this.

    Nicolas

    QR-code-component

    2
    Francisldn•250
    @francisldnPosted over 2 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
  • Christopher Adolphe•600
    @christopher-adolpheSubmitted over 2 years ago

    Hello frontend friends! 👋

    This was long overdue but I finally completed my 2nd challenge on Frontend Mentor. 🎉 This project was an opportunity for me to test new approaches on the way I write my CSS.

    Major challenge(s):

    • I started using Sass maps with @each rules to generate helper classes easily. It is not perfect but I think is a good start.
    • I started using custom CSS properties to better organise my CSS and reduce repetition.
    • Getting the grid as per the design was more challenging than I thought. I initially started with by defining the height of each row for the main content for different viewport widths but I soon realised that this was difficult to maintain. I finally found an efficient solution by using the minmax() function with the grid-template-columns and grid-template-rows properties.

    Your feedback would be much appreciated, especially if you have other ideas about how to better implement custom CSS properties in your workflow.

    Thanks in advance. 🙏

    Art gallery website | HTML, CSS, JS

    5
    Francisldn•250
    @francisldnPosted over 2 years ago

    Well done @christopher-adolphe, love your solution, so many learning points for me. Cool animation with GSAP. I'm gonna start using it in my project.

    0
  • Liam•30
    @bvrklSubmitted over 2 years ago

    I understand it is probably not the best solution to use the window.localStorage but it was a short term solution because I didn't fancy setting up a whole redux store only to use it for a small task.

    Interactive rating component (made using React)

    1
    Francisldn•250
    @francisldnPosted over 2 years ago

    Agree with you on the redux store. I have used URL parameters to store and persist the state.

    1