Conversation
|
had issues with the api and the .env file. debugged with ai's help. I think I found a solution by renaming the env.local file to .oldenv.local. The idea was to turn it off without deleting it. Would very much like some advice on it. I did not have the problem when I was running the server locally. I coded this on my own and not in a team as I have very stupid working hours at the moment. |
There was a problem hiding this comment.
Really good looking application with a lot of features, good work! I like how you have set up the API functions and URLs in a separate file, it makes it easy to change and handle. Nice to see that you keep the secrets in an .env file as well!
One thing about .env files with secrets though, they should never be committed. They should just be kept locally and the secrets are usually shared between team members through other services that handle secrets. It's fine for this project, but keep that in mind when doing real projects. You have set up a .env.example which is good, that symbolizes which env variables should be set.
The mobile design on the start page is not really that mobile friendly. The grid could be set to maybe one or two grid items in width and the filtering could be revamped a bit.
I saw your comment about the background image and there are multiple ways of setting a background image on pages, but you can check this out to see if it can help you.
You don't have to use encodeURIComponent for the API key. API keys are, as of my knowledge, always URL friendly and should not be manipulated in order for them to work. Or they don't change at all with the encoding, which makes it redundant.
Try to split up your application a bit more into separate components. That way when you have to reuse parts you don't have to type it out more than once. Not super necessary in a project of this size, but one should think of how it can grow. And if not, it makes for good practice!
Overall good job!
- Add color-scheme: dark to body so native form controls (selects) render with dark OS styling instead of jarring light theme
- Fix .movie_card width: 100% so cards fill their grid columns instead of leaving gaps at wider viewports
- Remove getApiKeyParam helper and its encodeURIComponent+split pattern; use url.searchParams.set('api_key', apiKey) directly to avoid potential double-encoding
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
- App.jsx: render Home always; MovieDetails mounts as a fixed overlay on top - MovieDetails: rewritten as a modal — blurred/dimmed poster fills the background, crisp poster shown in content area alongside details - Close via ✕ button, clicking the backdrop, or pressing Escape; body scroll is locked while the modal is open - MovieDetails.css: full rewrite with modal layout, poster background, scrim, close button, and responsive single-column layout on small screens Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Configures Vite as the framework so Vercel doesn't misdetect Next.js. Adds a catch-all rewrite so React Router handles client-side navigation (e.g. /movie/:id) without 404s on direct URL access. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2 participants
Netlify has suspended my sites for the month. Trying another system and will put up the link when done