react,vite,MaterialUi,Css,google-Fonts,vercel,git+github

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

I'm most proud of completing my first Frontend Mentor challenge from scratch using React and deploying it successfully with Vercel. I faced several errors during deployment, especially with image paths and Vite configuration, but I didn't give up and learned how to solve them on my own.

Next time, I’d focus more on planning a fully responsive layout from the beginning and possibly use styled-components or Tailwind CSS for better modular styling. I'd also organize my components and assets more cleanly and maybe add light interactivity (like theme toggling or animations).

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

I faced multiple challenges while working on this project. The biggest ones were:

Deployment errors on Vercel: I initially got "vite": "command not found" and missing package.json errors. I fixed these by installing Vite as a dev dependency, correctly setting the root directory, and updating the build settings in Vercel.

Image not showing after deployment: I had placed the image inside the src/assets folder, which caused a Vite build error on Vercel. I overcame this by moving the image to the public/ folder and referencing it using a direct path (/img1.jpeg), as Vite recommends for static assets.

Responsiveness issues: Initially, the layout didn’t look good on smaller screens. I adjusted my CSS using media queries and flexible layout techniques to make sure it works on both mobile and desktop, as per the design guide.

Despite these challenges, I kept trying different solutions, researched documentation, and stayed patient — and Alhamdulillah, I got it working!

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

I'd love feedback on the following areas:

Responsiveness: Does the layout look good across different screen sizes? Any improvements in spacing or text alignment? Component structure: I used Material UI's Card and CardMedia inside a single component. Is this a good practice for small projects, or should I break it into smaller components? Styling choices: I used a mix of MUI components and custom CSS. Would it be better to use a single styling method (like styled-components or Tailwind)? Performance: Are there any optimizations I could apply, especially for images or layout structure? General best practices: Any suggestions to improve my React + Vite workflow or folder structure?

I'm open to any kind of constructive feedback — thank you!