Skip to content
Submitted almost 4 years ago

React | SCSS | shrtcode API | SessionStorage | Clipboard API

Toni Kulić•60
@tkulic
A solution to the URL shortening API landing page challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

Hello everyone!

This is the first challenge I took up on Frontend Mentor. I completed it in a few steps. First, I took enough time to plan out HTML structure and CSS classes based on design files. Then, I created well-structured content as React components with JSX and styled them afterwards with SCSS. Implementing main functionality was a bit bumpy, but i managed to do it with help of Clipboard API and Session storage. Hope someone finds this short description helpful....

I appreciate Your feedback! Cheers!

Code

Please log in to post a comment

Log in

Community feedback

  • Mike Hayden-Moore•1,005
    @mickyginger

    Hey @tkulic this is great!

    I would recommend setting a max-width on the main containing div element in App.js so that the content doesn't fill the entire width of the screen, something like 1200px is reasonable.

    I would also consider using a main or section rather than a div as the main containing element, as it's more semantic.

    Your components are nicely organised. You can name any file index.js or index.jsx and import it using the name of the folder, so for example:

    import Main from './components/Main' would work fine if the component was located in ./components/Main/index.jsx.

    Finally I notice that you used a mixture of double quotes " and single quotes ' in your JavaScript. It's probably worth using a formatter like Prettier that will format your code for you.

    Great first project, well done! 🎉

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord