audiophile solution built with Next + Typescript
Design comparison
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-MicahPosted over 1 year ago
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 - @codejohnson89Posted over 2 years ago
I just finished this challenge and saw yours and man this is DOPE!!!!!! Great job!!!!!
1 - @jNembhardPosted over 2 years ago
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@YazdunPosted over 2 years ago@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@jNembhardPosted over 2 years ago@Yazdun Gotcha, yea I just fixed all my file paths and will definitely use that method in the future!
1 - @mrvicthorPosted over 2 years ago
Thanks for your help. If you do not mind can you tell me what the problem was?
0@YazdunPosted over 2 years ago@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@mrvicthorPosted over 2 years ago@Yazdun thank you for your feedback. I am still learning typescript
1 - @mrvicthorPosted over 2 years ago
1 | import type { NextPage } from "next"; 2 | import Head from "next/head";
3 | import Countries from "./countries"; | ^ 4 | import { useContext } from "react"; 5 | import { ThemeContext } from "./../components/Layout"; 6 | Build error occurred Error: Call retries were exceeded at ChildProcessWorker.initialize (/vercel/path0/node_modules/next/dist/compiled/jest-worker/index.js:1:11661) at ChildProcessWorker._onExit (/vercel/path0/node_modules/next/dist/compiled/jest-worker/index.js:1:12599) at ChildProcess.emit (node:events:527:28) at Process.ChildProcess._handle.onexit (node:internal/child_process:291:12) { type: 'WorkerError' } Error! Command "npm run build" exited with 1 Error: Command "vercel build" exited with 1
0 - @mrvicthorPosted over 2 years ago
Type error: Cannot find module './countries' or its corresponding type declarations.
0@YazdunPosted over 2 years ago@mrvicthor I opened a PR to your repo which fixes the issues, I deployed it on Vercel and it works fine now
0 - @mrvicthorPosted over 2 years ago
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
Please log in to post a comment
Log in with GitHubJoin 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