Skip to content
OverviewSolutions
31
Comments
2205
ApplePieGiraffe
@ApplePieGiraffe

All comments

  • Emmilie Estabillo•5,580
    @emestabillo
    What are you most proud of, and what would you do differently next time?

    Hey everyone! 👋 It's been a minute! 😊

    I built this project incrementally during the holidays, and took the opportunity to practice Typescript and explore GSAP integration with the app router. To further challenge myself, I used Contentful for managing the project listings and implemented Google Maps on the contact page. It took a little longer than expected to finish, but the process proved to be more valuable than the end result.

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

    Most of the challenges I encountered were from Typescript. This was the first time I used GSAP with the app router, and I tried to keep the animations on the component files as much as possible, so much so that I was thinking I was creating non-essential files just to support the animation feature. Feedback would be appreciated on that regard, and on any other improvements including accessibility.

    I had to host the fonts since Spartan is not available on Google anymore, and made minor adjustments to the logo to match the design. I also increased the base font to the standard 16px.

    Thanks and looking forward to hearing your thoughts!

    EDIT: From the screenshot, it looks like I followed an outdated design. Will push improvements.

    Arch Studio multi-page site with Next.js, GSAP, and Contentful CMS

    #contentful#gsap#next#typescript
    4
    ApplePieGiraffe•30,525
    @ApplePieGiraffe

    Emmmm!!

    So nice to see you submit another solution! 🎉 I love the sleek but subtle animations in this one!

    Hope you've been doing well and happy coding!

    Marked as helpful
  • Tesla_Ambassador•3,070
    @tesla-ambassador
    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.

    #next#tailwind-css#typescript#accessibility
    2
    ApplePieGiraffe•30,525
    @ApplePieGiraffe

    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 😜

  • tediko•6,700
    @tediko
    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

    #accessibility#bem#supabase#vite#sass/scss
    7
    ApplePieGiraffe•30,525
    @ApplePieGiraffe

    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! 😄

  • ApplePieGiraffe•30,525
    @ApplePieGiraffe

    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
  • ApplePieGiraffe•30,525
    @ApplePieGiraffe

    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
  • ApplePieGiraffe•30,525
    @ApplePieGiraffe

    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
  • ApplePieGiraffe•30,525
    @ApplePieGiraffe

    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
  • ApplePieGiraffe•30,525
    @ApplePieGiraffe

    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
  • ApplePieGiraffe•30,525
    @ApplePieGiraffe

    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
  • ApplePieGiraffe•30,525
    @ApplePieGiraffe

    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
  • ApplePieGiraffe•30,525
    @ApplePieGiraffe

    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
  • ApplePieGiraffe•30,525
    @ApplePieGiraffe

    Hey, Vinay Maurya! 👋

    Just wanted to say you did an excellent job on this challenge! 👏 Your solution looks good and responds very nicely! 👍

    Your code looks great as well! 🙌

    Keep coding (and happy coding, too)! 😁

  • ApplePieGiraffe•30,525
    @ApplePieGiraffe

    Hello, Henry Andrew Baum! 👋

    Well done on this challenge! 👍

    If your CSS file is becoming very long and harder to navigate, it may be worth looking into using a tool like Sass to make writing and managing your styles easier. Using Sass you can split your styles into smaller files for organization and do cool things like write simple "functions" to avoid repeating code.

    It's a good practice to use ems/rems over pixels for font sizes for accessibility reasons. Here's a great article on the topic if you're interested in learning more about it. I'd also recommend using ems/rems for other the values of other properties in your CSS such as margin, padding, etc., as that will cause the rest of the design of your site to scale with the user's chosen default font size. 🙂

    As for your solution, I'd suggest leaving the alt text for the icons in the card component empty since they are mostly decorative and don't need to be read by screen readers.

    And don't forget to use a button element for the button in the card. 😉

    Hope you find this helpful. 😊

    Keep coding (and happy coding, too)! 😁

    Marked as helpful
  • ApplePieGiraffe•30,525
    @ApplePieGiraffe

    Hi, Craig Johnson! 👋

    Nice job on this challenge! 👏 The card component looks great and so does your code! 👍

    Just a small suggestion or two! 😉

    Instead giving the card component a fixed width, I often find it a good practice to give a component such as that width: 100% and then add a max-width to prevent it from becoming too wide. This way, the width of the component will adjust to the size of its container in the tablet/mobile layouts and avoid causing an overflow.

    You probably don't need to use section tags inside the markup of the card since section tags should always include a heading inside them to identify that section and the markup of the card is quite simple. I think div tags should work just fine in this case. 🙂

    Hope this helps. 😊

    Keep coding (and happy coding, too)! 😁

    Marked as helpful
  • ApplePieGiraffe•30,525
    @ApplePieGiraffe

    Hey there, Dawid Keyser! 👋

    Good work on this challenge! 👍

    I haven't used Tailwind or Astro before, so I'm afraid I can't offer you much help with that, but I have one or two other small tips for you. 🙂

    Instead of adding a fixed width to the card in the mobile layout, I would suggest giving it width: 100% and then adding a max-width to it to prevent it from becoming too wide. This way, the card component should adjust to the viewport width (and not cause any overflow) on smaller screen sizes.

    Also, I would leave the alt text for the icons in this card empty since they aren't important for the content of the card and don't need to be noticed and read by screen readers. 😉

    Hope you find these tips helpful. 😊

    Keep coding (and happy coding, too)! 😁

    Marked as helpful
  • ApplePieGiraffe•30,525
    @ApplePieGiraffe

    Hey, Malekos74! 👋

    Nice effort on this challenge! 👏

    I would suggest looking into making your solution more responsive. Currently, things look okay in the desktop and mobile layouts, but a lot of the page content gets hidden in between and the a horizontal scroll bar appears along the bottom of the page. If you need some help or some ideas with starting to build responsive layouts, this YouTube playlist from The Net Ninja might help you. 🙂

    Also, to change the color of an SVG element, you can usually select all of the elements inside it and change their fill color like this:

    svg * {
  fill: lightcoral;
}

    Keep practicing and your solutions will become better and better. 😉

    Hope you find this helpful. 😊

    Keep coding (and happy coding, too)! 😁

    Marked as helpful
  • ApplePieGiraffe•30,525
    @ApplePieGiraffe

    Hey, AlexMagargiu! 👋

    Well done on this challenge! 👍 I think you did a good job on the styling and your solution looks good! 👏

    I would suggest leaving the alt text for the icon and maybe even illustration in this challenge empty, since they aren't relevant to the content of the page and we don't really want them to be noticed and read by screen readers.

    And a small tip for your JS—rather than call getValue inside of switchDisplay, you can call switchDisplay inside of getValue if the user has selected an option. This will make your code slightly easier to follow and you won't have to bother with returning a boolean from getValue. 😉

    Keep practicing and with time you'll find better and better solutions to problems you encounter. 👍

    Hope you find this helpful. 😊

    Keep coding (and happy coding, too)! 😁

  • ApplePieGiraffe•30,525
    @ApplePieGiraffe

    Hey, Syd! 👋

    Congratulations on completing your first Frontend Mentor challenge! 🎉 Nice job on this one! 👍

    A few things you can do to improve your HTML would be,

    • Turning the features section into a list using the ul and li tags (since that is a list of features).
    • I don't think the word "tailored" in the page heading needs to be a link, as it probably only has that underline for decoration.
    • Not adding any alt text to images you don't want screen readers to notice and read (such as decorative images, which aren't important to the content of the page).
    • For the above reason, it might be worth removing the alt text on the social media icons in the footer of the page and adding an aria-label to the links that wrap them instead.

    I don't think using Sass for this project was overkill. Sass has lots of great features that are easy to get used to and using it here is great practice for larger projects where it comes in very handy. 😉

    Making layouts responsive and using absolute positioning are two things that become much easier to do (and think about in general) with practice! 😉 Something that really helped me become better at the two is inspecting other websites and reading other people's code to see how they did things. Use the dev tools to inspect and poke around professional websites or browse this platform and the read the code of high quality solutions—this will show you ways of doing things that you might not have thought of before and give you a chance to explore new ideas. 🙂

    Hope this helps. 😊

    Keep coding (and happy coding, too)! 😁

    Marked as helpful