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

audiophile solution built with Next + Typescript

#next#react#typescript#framer-motion
Yazdunā€¢ 1,310

@Yazdun

Desktop design screenshot for the Audiophile e-commerce website coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
5guru
View challenge

Design comparison


SolutionDesign

Solution retrospective


Hey everyone ! This is my first Guru challenge and It's a little bit different from the original design, For example I completely changed the desktop hero section and I created a sidebar for the cart, which was supposed to be a modal.

I also decided to use more reddish color as the primary color, The original orange color didn't look alive enough to me šŸ˜

I'm open to feedbacks and let me know of your thoughts about this solution. Thanks in advance

Community feedback

@chukwudobe-Micah

Posted

I noticed you use blurred photos a lot, so when they're viewed you change to the original photo which helps performance. How do you get the blurred photos?

1

Yazdunā€¢ 1,310

@Yazdun

Posted

@chukwudobe-Micah It's handled by NextJs Image component

0
Micah Johnsonā€¢ 240

@codejohnson89

Posted

I just finished this challenge and saw yours and man this is DOPE!!!!!! Great job!!!!!

1

Yazdunā€¢ 1,310

@Yazdun

Posted

@codejohnson89 Thank you šŸ„°

0
P
Jason Nembhardā€¢ 320

@jNembhard

Posted

This is good! I also did NOT know you could add an @ symbol to point directly to folders instead of writing out the entire file path when importing files...brb need to make some updates haha.

1

Yazdunā€¢ 1,310

@Yazdun

Posted

@jNembhard Thanks ! That's highly recommended by Vercel to use absolute Imports and module path aliases , you just need to configure your config file and your are good to go ! This also makes writing unit tests much much easier

1
P
Jason Nembhardā€¢ 320

@jNembhard

Posted

@Yazdun Gotcha, yea I just fixed all my file paths and will definitely use that method in the future!

1
Leonardā€¢ 1,025

@leoikeh99

Posted

Wooooowwwwwwww

1
Victor Eleanyaā€¢ 500

@mrvicthor

Posted

Thanks for your help. If you do not mind can you tell me what the problem was?

0

Yazdunā€¢ 1,310

@Yazdun

Posted

@mrvicthor Your welcome. You shouldn't put components inside pages directory, And your TypeScript looks very confusing and you'll probably run into more issues later on, I just fixed them temporary so you can deploy it.

0
Victor Eleanyaā€¢ 500

@mrvicthor

Posted

@Yazdun thank you for your feedback. I am still learning typescript

1
Victor Eleanyaā€¢ 500

@mrvicthor

Posted

1 | import type { NextPage } from "next"; 2 | import Head from "next/head";

0
Victor Eleanyaā€¢ 500

@mrvicthor

Posted

Type error: Cannot find module './countries' or its corresponding type declarations.

0

Yazdunā€¢ 1,310

@Yazdun

Posted

@mrvicthor I opened a PR to your repo which fixes the issues, I deployed it on Vercel and it works fine now

0
Victor Eleanyaā€¢ 500

@mrvicthor

Posted

Well done. Great job. I recently completed the rest countries API challenge using typescript and nextjs but I have been having problems deploying it in vercel. Any chance you can help me?

0

Yazdunā€¢ 1,310

@Yazdun

Posted

@mrvicthor Thanks ! What's the issue?

0

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