Skip to content
OverviewSolutions
31
Comments
2210
T
ApplePieGiraffe
@ApplePieGiraffe

All comments

  • Tesla_Ambassadorβ€’3,000
    @tesla-ambassadorSubmitted 2 months ago
    What are you most proud of, and what would you do differently next time?

    I'm mostly proud of the fact that I got to learn how to use the react-hook-form and also completing this project while using TypeScript for the first time with Next.js.

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

    I explained all these details in my README.md file

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

    Mainly accessibility and better coding practices when using Next.js/React.

    Mortgage Calculator using react-hook-form and TypeScript.

    2
    ApplePieGiraffeβ€’30,545
    @ApplePieGiraffePosted 2 months ago

    Broooooo

    I've just seen this!!

    Nice work dude! 😎 Your solution looks great and I loved reading your README πŸ˜‚ You put a lot of thought into this and that's how you learn the most!

    Keep on grinding my guy and happy coding!! 😁

    EDIT: I'm touching grass these days... whenever I can 😜

    1
  • tedikoβ€’6,680
    @tedikoSubmitted 4 months ago
    What challenges did you encounter, and how did you overcome them?

    Hello! πŸ‘‹

    MovieDB is a full-stack application written in vanilla JavaScript that serves as an interactive hub for movie and TV series enthusiasts. To provide seamless user authentication and data management I used Supabase backend-as-a-service (BaaS) solution. This integration ensures secure user registration and login process, efficient session management which enables users to build their own collection by bookmarking favorite movies and TV series as well as completing profile with data and custom avatar with all user-specific data securely stored in the database and storage. App fetches data from The Movie Database (TMDb) API to deliver up-to-date and extensive information on films and TV shows. Both API and database operations are handled on Netlify serverless functions backend to reduce the load on the frontend, leading to faster response times and a more responsive user experience. This allows for better management of sensitive data, as environment variables can be securely stored and accessed only on the server side, removing the risk of exposure in client-side code. MovieDB App allows users to explore, search, bookmark, create their own user profile and engage with a vast collection of media content as well as display information about a specific movie/TV series on sub-page.

    With the integration of user authentication I've decided to elevate app functionality and user experience by designing an landing page that serves as the introduction to MovieDB App. This landing page streamlines the user authentication process by providing registration form and login cta button redirecting respectively to register and login sub-page. Moreover showcases selection of popular movie trailers in slider that users can watch in popping lightbox modal that has trapped focus for users that require accessibility features. Additionally, there is a placeholder section with mockup image that contain video within.

    After logging in, the user is redirected to the app which is based on the single page application (SPA) architecture with custom router. For handling bookmark state across SPA I created central state management system - bookmarkManager. This allows components to subscribe to bookmark updates and receive notifications when bookmarks change without the need of fetching it from database. If logged in user navigate to route that doesn't exists router will redirect to 404 page. To improve user experience while fetching data I implemented shimmer effect which is simply visual feedback during data fetching. User can login on test account to explore app without the need to register, but test account is limited when it comes to updating profile with custom informations/avatar.

    πŸš€App features

    • User Authentication: Users can create an account by providing email and password and then log in to the app using their credentials, providing a secure and personalized experience.
    • Search: Functionality that allows to search for movies or TV series by title.
    • Trending: Dedicated section where users can view a list of currently trending movies or TV series.
    • Latest Trailers: Showcase of popular movie and TV series trailers in a slider. Users can watch them in a lightbox modal.
    • Recommended for You: Personalized feature that suggests movies and TV series based on the titles user have bookmarked.
    • Top rated: A list of the top 100 movies and TV series, ranked based on their overall user ratings.
    • Bookmarks: Personalized space where users can store and manage their bookmarked movies and TV series.
    • Details page: Each movie has a dedicated sub-page that provides users with a detailed informations, list of the actors involved, photos and similar titles recommendations.
    • Random title: Randomly selected movie/tv series displayed within details page.
    • Profile: Customizable account settings. Users can upload a custom avatar or update account information including name, email, and password.
    • 404 page: "Page Not Found" with a little easter egg. Instead of a standard error message, users are greeted with a funny message and a playful image. User need to be logged in.

    πŸ’‘Here's some new things I used or learned:

    • Sass placeholder selector is special kind of selector known as a β€œplaceholder”. It looks and acts a lot like a class selector, but it starts with a % and it’s not included in the CSS output.
    • The try..catch statement is a powerful tool for error handling in JavaScript. By implementing it effectively, you can create more resilient applications that provide a better experience for users.
    • JSDoc comments enhances code readability and maintainability by providing clear documentation directly within the source code.
    • Focus trap is a JavaScript utility designed to manage keyboard focus within a specified element, enhancing web accessibility by preventing focus from escaping outside of interactive components, such as modal dialogs.
    • URLSearchParams is a built-in JavaScript object that provides a convenient way to work with the query string of a URL.
    • Promise.all() allows multiple fetch operations to be executed concurrently, rather than sequentially. This can significantly improve performance, especially when dealing with independent API calls
    • How to build router in vanilla JS - Routers control the application's views based on the URL, without the need for full-page refreshes. While several libraries such as React Router for React offer robust solutions for managing routes in SPAs, you can build your own rudimentary router in Vanilla JavaScript to understand the underlying mechanics.
    • createObjectURL() static method of the URL interface creates a string containing a URL representing the object given in the parameter (Blob in my case).
    • Replacing switch statements with Object literals

    πŸ› οΈBuild with: (can be found also in my others projects)

    • Vite is a build tool that aims to provide a faster and leaner development experience for modern web projects. It consists of two major parts: a dev server, and build command that bundles your code with Rollup.
    • Sass CSS pre-processor is a stylesheet language that’s compiled to CSS. It allows to use variables, nested rules, mixins, functions, and more, all with a fully CSS-compatible syntax. Sass helps keep large stylesheets well-organized and makes it easy to share design within and across projects.
    • BEM - Block, Element, Modifier methodology, which is a popular naming convention for classes in HTML and CSS. BEM is useful when it comes to larger, more complex projects when code organization becomes crucial. The idea behind it is to speed up the development process, and ease the teamwork of developers by arranging CSS classes into independent modules.
    • Supabase is an open-source backend-as-a-service platform designed as an alternative to Firebase.
    • Serverless Netlify functions open a world of possibilities for running on-demand, server-side code without having to run a dedicated server.
    • Swiper is a JavaScript library that creates modern touch sliders with hardware-accelerated transitions.

    ❓Questions:

    • Any suggestions on how I can improve are welcome! If you want to learn more about my process - README.

    MovieDB fullstack app - Supabase, Vite, Sass, BEM, Swiper, Serverless

    7
    ApplePieGiraffeβ€’30,545
    @ApplePieGiraffePosted 3 months ago

    Yoooo @tediko!!

    It's been a while lol but I just noticed this πŸ˜† How have you been?

    Just wanted to drop in to say I love your solution! Everything looks good and works really well! And the 404 page is great hahaha

    I'm glad to hear you learned a lot during this project and it's awesome to see how far you've come! πŸ‘

    As ever keep coding and happy coding too! πŸ˜„

    0
  • brenda127sβ€’20
    @brenda127sSubmitted 9 months ago

    Hello community! I am still learning javascript and the basics of it. I had trouble alternating between the plus and minus icons. Once I finally got it to work, you can still see the plus icon behind it. How would you typically switch between icons, making one or the other visible based on clicks?

    I also had trouble expanding the paragraph element within javascript. I got it to work when the icons were clicked, then I got it to work when the questions were clicked but then it wouldn't work with the icons anymore. Is there a way to add two variables to the same forEach method? How would I be able to have two different variables perform the same function?

    I appreciate any help/criticism!

    FAQ accordion using CSS Flexbox and Javascript

    1
    ApplePieGiraffeβ€’30,545
    @ApplePieGiraffePosted 9 months ago

    Hey there, brenda127s! πŸ‘‹

    Congratulations on completing your first Frontend Mentor challenge! πŸŽ‰ Great job on this project! πŸ‘

    I'd like to suggest using the <details> and <summary> elements for the accordions in this component. Currently, you are using <div>s for those elements, which aren't accessible because they aren't keyboard-focusable or recognized as interactive elements by browsers and screen readers. There are also some issues like some of the answer content getting cut off towards the bottom of the accordions on smaller screens. Using the <details> and <summary> elements will help solve these issues. If you're interested, you can learn more about them here from MDN.

    As for dealing with the icons, if you go with using the <details> and <summary> elements you can check for the open attribute on the <details> element and show/hide the icons based on the state of that attribute.

    Also, don't forget to add some alt text to the <img> elements on your page (but leave the alt text empty if those images are just for decoration and don't need to be noticed by screen readers) and to give the <img> elements unique IDs. πŸ˜‰

    Hope you find these suggestions helpful. 😊

    Keep coding (and happy coding, too)! 😁

    Marked as helpful
    0
  • Schismondβ€’160
    @SchismondSubmitted about 1 year ago

    this is the last time I use figma to try and get the right sizes , well I get it 99% accurate but I'm tired of all this pixel declarations I believe it's not the right way to do things , please comment your opinion

    newsletter-sign-up

    1
    ApplePieGiraffeβ€’30,545
    @ApplePieGiraffePosted about 1 year ago

    Hey there, Schismond! πŸ‘‹

    Nice effort on this challenge! πŸ‘

    A few suggestions I have are,

    • Taking another look at the responsiveness of your site. At the moment, things start to look a little broken/get cut off around ~1000px as the screen width decreases. Remember that even if the desktop and/or mobile views of your site look good, it is important to make sure that your site looks great across all screen sizes so that as many people as possible can enjoy your work. If you’d like to learn more about how building responsive layouts, check out this helpful course
    • Avoiding using px for setting the values of things like font-size and spacings in your styles. Instead, use a responsive unit such as em or rem so that users will be able to change the size of the text (and ideally, overall layout) of your site by changing the default font-size of their browser. If you'd like to learn more about those units in CSS and how all of this works, check out this helpful video

    Don't worry too much about making "pixel-perfect" solutionsβ€”it's more important to focus on things like accessibility and responsiveness so that people can use and enjoy the websites you make πŸ˜‰ As long as your solution looks more or less like the design in the end and it is functional and accessible, that's great πŸ‘

    Hope you find these suggestions helpful. 😊

    Keep coding (and happy coding, too)! 😁

    Marked as helpful
    2
  • Carlos Perezβ€’190
    @perezc52Submitted about 1 year ago
    1. What did you find difficult while building the project?

    getting the two sides to line up. i had an issue where the right side grew bigger than the left and it was causing layout issues.

    1. Which areas of your code are you unsure of?

    i am still unsure about the layout. i think it probably could have been structured better.

    1. Do you have any questions about best practices?

    i'd like to know better practices for creating layouts like this. and just any feedback in general.

    Solution using HTML and CSS

    2
    ApplePieGiraffeβ€’30,545
    @ApplePieGiraffePosted about 1 year ago

    Hello, Carlos Perez! πŸ‘‹

    Nice effort on this challenge! πŸ‘

    I'd like to suggest taking another look at the responsiveness of your site, especially around ~1060px where things seem to look a bit broken as the screen width decreases. Remember that even if the desktop and/or mobile views of your site look good, it is important to make sure that your site looks great across all screen sizes so that as many people as possible can enjoy your work. If you’d like to learn more about building responsive layouts, check out this helpful course

    Also I wouldn't make the "76" the main heading for this page/component because it isn't very descriptive by itself and doesn't identify the main content or information on the page. A simple span should do instead πŸ™‚

    When deciding which elements to make headings, try to choose elements that describe the content below or around them, rather than elements which just look like headings in the design. Here's a great article that may help you learn more about making semtantic, accessible headings

    Keep coding (and happy coding, too)! 😁

    Marked as helpful
    1
  • ApplePieGiraffeβ€’30,545
    @ApplePieGiraffePosted about 1 year ago

    Greetings, Luan BarcaΓ§a! πŸ‘‹

    Good job on this challenge! πŸ‘ Your solution looks great and responds well! πŸ‘

    One thing I'd like to suggest is to remove the alt text from the star icons and simply set them to be an empty string. Otherwise, screen readers will read out the alt text for each star icon, which is unnecessary and can be slightly annoying πŸ˜…

    Keep coding (and happy coding, too)! 😁

    Marked as helpful
    0
  • Loukas Vovlasβ€’40
    @vovlaslSubmitted about 1 year ago

    Hi everybody. I have some problems with this project and I'd like if someone could point out what i did wrong. So... problem number:

    1. The container below the navigation is off center and Ξ™ don't know why or how to fix it.

    2. When I open the menu (on a small window size), I would like it to not be able to scroll.

    3. Is there a better way to put the "read more" button at the bottom of its container.

    If you see something else that's wrong please tell me, it will help me a lot.

    Responsive homepage using html, css and vanilla js only

    1
    ApplePieGiraffeβ€’30,545
    @ApplePieGiraffePosted about 1 year ago

    Hello there, Loukas Vovlas! πŸ‘‹

    Good job on this challenge! πŸ‘

    The reason the main content in your site appears slightly off center is because there is some extra gap being added to the right side of the grid of div.two-columns. To get rid of that, set grid-column: 1 / span 2 on div.three-columns (instead of grid-column: span 3). Also, be sure remove the width property from div.small-box so that it can fill up all of the space in its section of the grid container

    To prevent the page from scrolling when the mobile menu is open, you'll need to add overflow: hidden to the body when the menu is toggled. You can do that with a little JS (and remember to remove that style when the menu is closed so that users can scroll again)

    You could make the attribution always stick to the bottom of the screen with absolute positioning (but it may overlap the rest of the content at times), so instead you could turn the body into a flex container (make it flex-direction: column) and add margin-bottom: auto to main. That will push the attribution to the bottom of the body if there is ever any extra space

    Hope you find these suggestions helpful. 😊

    Keep coding (and happy coding, too)! 😁

    Marked as helpful
    0
  • バレンタむン πŸ˜ˆβ€’64,170
    @VCaramesSubmitted about 1 year ago

    The challenge was pretty straightforward and a great way to practice responsive images and overlapping content.

    The "Creations" section required the most attention, as I wanted the entire image to be "clickable" and be accessible, while also applying gradient-background to the image.

    To make things easier to manage, I decided to implement each creation item as a JSON and then render it as list using map().

    After that I "overlapped" the links and images on top of one another using CSS Grid:

      &__item {
    display: grid;
    grid-template-areas: "stack";

    & > * {
      grid-area: stack;
    }
  }

    For the layout, I used grid-template-columns and simply changed the layout during certain breakpoints.

    To make the entire image "clickable" I used Andy Bell's method of doing so:

    More details provided in the GitHub README...

    As always, all feedback to better improve this challenge is greatly appreciated! β™₯️

    Loopstudios [Landing Page]

    1
    ApplePieGiraffeβ€’30,545
    @ApplePieGiraffePosted about 1 year ago

    Hello, バレンタむン 😈! πŸ‘‹

    Nice job on this challenge! πŸ‘ Your solution looks great in the design comparison! πŸ‘

    I think the "Leader in interactive VR" section might be missing its background color in the desktop layout (since at the moment some of the text in that section gets hidden behind the image next to it) πŸ˜…

    Also (as your solution report suggests), you can probably leave the alt text for the images in the "Our creations" section empty since the links that they are a part of already have text inside them to identify them

    And don't forget to add a favicon to your site πŸ˜‰

    Keep coding (and happy coding, too)! 😁

    0
  • kaseyβ€’320
    @kaseyveeSubmitted over 1 year ago

    Having some hydration issues on my checkout page when I have items in my cart. In src/app/components/checkout/Cart.tsx, I can fix this by making my cartItems state and setting the state to { ...localstage } in a useEffect, but this doesn't allow me to update my cart in real time without force refreshing, since router.resfresh() doesn't seem to help. Haven't put much time thinking about this but if anybody has any quick feedback, feel free to drop some.

    Any other feedback much appreciated! Also more specifically Next.js 13 with app router best practices.

    Responsive e-commerce website with Next.js 13 App router

    1
    ApplePieGiraffeβ€’30,545
    @ApplePieGiraffePosted over 1 year ago

    Greetings, kasey! πŸ‘‹

    Nice job on this challenge! The UI looks great πŸ‘

    I don't have time to look at all of your code but I had a quick look at the Card component. You don't really want to be using the router to refresh the page to display changes in the UI (that's a bit of anti-pattern as this is what React state is for). Instead, if you store the card data in some state then any time you update that state, React will re-render any components which use that state and update the DOM for you. You can then update local storage with that new state value if you want persist data that way for this project. Also since some of the cart data appears in other places around the site (such as in the product pages), you may want to store that state higher up in your app and pull it into components with React context. If you want to learn more about React state or context, I'd recommend checking out the new React docs as they are very-well written and include a few helpful guides. Hopefully that makes sense πŸ‘

    Keep coding (and happy coding, too)! 😁

    Marked as helpful
    2
  • Feithersβ€’180
    @FeithersSubmitted over 1 year ago

    Hello there!

    This time I think I did pretty good, even though I had no idea at the beginning on how to do the "185 GB left" detail, which I don't even know if I did ok. Is that the correct way?

    Either way, all help is appreciated, and if you think I have some unnecessary code, let me know!

    Thanks!

    Solution using CSS and HTML!

    1
    ApplePieGiraffeβ€’30,545
    @ApplePieGiraffePosted over 1 year ago

    Greetings, Feithers! πŸ‘‹

    Good effort on this challenge! πŸ‘

    I'd like to suggest taking another look at the responsiveness of your site. Currently, things look okay in the desktop layout, but as the size of the screen gets smaller the content begins to look a little squished and things start to break. Even if the desktop and/or mobile views of your site look good, it is important to make sure that your site looks great across all screen sizes so that as many people as possible can enjoy your work. If you’d like to learn more about how to make your site responsive, check out this helpful course or this one from web.dev is great as well.

    Another approach to creating the "185 GB" popup would be to wrap it in a container like this:

    <div class="popup-container">
  <div class="popup-content"> content goes here... </div>
  <div class="popup-triangle"></div>
</div>

    Allow the container element to be sized by the content and use absolute positioning to position the triangle relative to the container. You can use the CSS clip-path property to make the triangle div into an actual triangle shape. πŸ™‚

    Hope you find this helpful. 😊

    Keep coding (and happy coding, too)! 😁

    Marked as helpful
    0
  • AJITH Mβ€’20
    @alex-ajithSubmitted over 1 year ago

    Could you please recommend some good resources for learning concepts like flex, grid, and media queries in-depth? I did find difficulties in writing flex, making it responsive.

    Feel free comment my code and tell the areas of improvement, it will be useful for my learning.

    Thank you! :)

    Results Summary Component using HTML and CSS

    1
    ApplePieGiraffeβ€’30,545
    @ApplePieGiraffePosted over 1 year ago

    Hey, AJITH M! πŸ‘‹

    Nice work on this challenge! πŸ™Œ Your solution looks good and is responsive! πŸ‘

    It's worth keeping in mind that it is considered a best practice to only have one h1 tag per page. After you've added a h1 to your page you should use less important heading tags for the rest of the headings. πŸ™‚

    Also, I think you can use flexbox to lay out the items in the "Your result" container and add space between those items using gap (which is easier and more consistent than adding margin or padding to individual elements).

    web.dev has a great free course on responsive design if you're interested. The more you practice building responsive sites, the better you will become at it. πŸ˜‰

    Hope you find these tips helpful. 😊

    Keep coding (and happy coding, too)! 😁

    0
  • ApplePieGiraffeβ€’30,545
    @ApplePieGiraffePosted over 1 year ago

    Hi, Rabbituz! πŸ‘‹

    Nice job on this challenge! πŸ‘ Your solution looks good and is responsive! πŸ‘

    There is a horizontal scroll bar appearing along the bottom of the page because the image in the hero section of the page overflows the body of the document quite a bit. You may want to add overflow-x: hidden to the html and body elements in order to prevent that from happening.

    And don't forget to add a title and favicon to your page. πŸ˜‰

    Hope you find this helpful. 😊

    Keep coding (and happy coding, too)! 😁

    Marked as helpful
    0