Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

URL Shortening API || Next.js + Typescript

#framer-motion#next#typescript#tailwind-css
Boots 😺 1,590

@adityaphasu

Desktop design screenshot for the URL shortening API landing page coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
  • API
3intermediate
View challenge

Design comparison


SolutionDesign

Solution retrospective


What are you most proud of, and what would you do differently next time?

Hey everyone! It's been a while 😊

Well, I'm most proud of the PWA support that I could implement within this next.js project. One more step towards progressive web apps!

Currently, I'm using client-side API calls but for future projects, I would like to prioritize using the API dedicated routes and creating custom route handlers to enhance performance and SEO potentially ⬆️

I also implemented a toast when the links are shortened using Sonner!

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

The one challenge that made it difficult for me to implement the API was the API itself. I was running into CORS policy issues and the cleanuri API documentation doesn't really specify how to configure the requests... so I tested the API using postman and it did work but the result link returned by the API is very much prone to phishing attacks. As soon as I clicked that link...my antivirus started screaming at me and I decided to see the website anyway.. yup I shouldn't have... bad decision 💀

In the end, I just opted for a different API which is actually pretty safe and public so for anyone who wants to use that instead here's the repo for it: 1pt-co

The format returned by this API is very much aligned with this specific project so it helped a lot. One less state to maintain haha

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

I'm still learning about accessibility and I've tried to implement it for this project but I'm still not sure if I've implemented it fully so any help with that is appreciated.

While lighthouse does help with the main accessibility issues it doesn't help with core ones apparently so I'd also like to know which tools you guys use to analyze the page for major accessibility issues.

It was a good project overall and I had fun! Any Feedback or suggestions are appreciated.

P.S I used Framer motion to animate the URLs so give it a go! 🪄

Community feedback

P
Ed 720

@EdwinSch

Posted

Hey! Nice to see some new stuff from you again :) About your question: I prefer Axe DevTools over Lighthouse actually. For me just feels like the scanning and improvement suggestions are a bit better. So maybe that helps. In overall structure I just like to test with my keyboard, tabbing through everything and use the shortcuts, just checking if I don't get stuck anywhere.

Marked as helpful

1

Boots 😺 1,590

@adityaphasu

Posted

@EdwinSch is there an extension for it or something? Edit: It seems that there is. Thanks! ✌🏻

0
P
Ed 720

@EdwinSch

Posted

@adityaphasu yeah it's an extension. I actually did a course on accessibility with some co-workers recently and the trainer suggested it. Also started using some screen-readers to test stuff on a11y, but it can be a bit complex to work with. Very interesting stuff tho.

1
Alex 1,310

@AlexKolykhalov

Posted

Finally, where have you been?))) Good work, by the way!!

0

Boots 😺 1,590

@adityaphasu

Posted

@AlexKolykhalov Hey! Haha, life got pretty hectic, but hoping to do more challenges soon! Thanks a bunch for the encouragement, it means a lot! 😄

1

Please log in to post a comment

Log in with GitHub
Discord logo

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