Albert/readme docs

README.md

@@ -375,6 +375,8 @@ Dette prosjektet har brukt Claude (Anthropic) som støtte gjennom utviklingspros
 
 **Oppsummert:** KI er brukt til prosjektplanlegging, komponentarkitektur, feilsøking, API-sikkerhet, styling og CI/CD-oppsett. All kode er gjennomgått og forstått før den er tatt i bruk.
 
+**Erfaringer:**
+KI var nyttig gjennom hele prosjektet, spesielt til å effektivisere lesing av dokumentasjon — i stedet for å lese gjennom store mengder API- eller bibliotek-dokumentasjon selv, kunne KI raskt oppsummere det som var relevant. Den var også til hjelp for å finne kilder og eksempler på hvordan ting bør gjøres, både i form av beste praksis og alternative løsninger å vurdere. På den tekniske siden ga KI god generell støtte med TypeScript-syntaks (typing, generics, korrekt bruk av interfaces/types), og fungerte som en rask referanse for kommandoer man ellers måtte slått opp (git, npm/pnpm, deploy-relaterte kommandoer). Ved konkret feilsøking — som import-feil i React-komponenter, PATH-problemer i deploy-scriptet, var KI effektiv til å peke ut sannsynlig årsak og forslag til løsning, noe som sparte tid sammenlignet med å feilsøke fra bunnen selv. Samtidig var det nødvendig å alltid kvalitetssikre og teste forslagene selv, siden KI ikke alltid traff riktig på første forsøk og enkelte ganger krevde oppfølgingsspørsmål eller mer kontekst for å komme til en fungerende løsning.
 
 
 ## Template under i tilfelle andre vil ha samme oppsett for KI-bruk

src/api/tmdb.ts

@@ -40,6 +40,13 @@ export function fetchCurrentMovies(): Promise<TmdbResponse<Movie>> {
   );
 }
 
+export function fetchUpcommingMovies(): Promise<TmdbResponse<Movie>> {
+  return tmdbFetch(
+    '/movie/upcoming?language=en-US&page=1',
+    'Klarte ikke hente kommende filmer...'
+  )
+}
+
 export function fetchPopularPeople(): Promise<TmdbResponse<Person>> {
   return tmdbFetch(
     '/person/popular?language=en-US&page=1',

src/components/Sidebar.tsx

@@ -13,15 +13,15 @@ type SidebarProps = {
 // Underpunktene som vises under HOME på desktop
 const sections = [
   { id: 'populaere', label: 'Populære filmer' },
-  { id: 'nye-filmer', label: 'Kommende filmer' },
+  { id: 'kommende-filmer', label: 'Kommende filmer' },
 ];
 
 // Bunnlinja på mobil. Kortere etiketter, fordi fire knapper deler skjermbredden -
 // på 390px blir det under 100px hver.
 const mobileItems = [
   { id: 'hjem', label: 'Hjem' },
   { id: 'populaere', label: 'Populære' },
-  { id: 'nye-filmer', label: 'Kommende' },
+  { id: 'kommende-filmer', label: 'Kommende' },
   { id: 'favoritter', label: 'Favoritter' },
 ];
 

src/hooks/useMovies.ts

@@ -5,6 +5,7 @@ import {
   fetchPopularMovies,
   fetchSearchMovies,
   fetchMovieById,
+  fetchUpcommingMovies,
 } from '../api/tmdb';
 
 export function usePopMovies() {
@@ -23,6 +24,14 @@ export function useCurMovies() {
   });
 }
 
+export function useUpMovies() {
+   return useQuery({
+    queryKey: ['movies', 'upcomming'],
+    queryFn: fetchUpcommingMovies,
+    select: (data) => data.results,
+  });
+}
+
 export function useSearchMovies(query: string) {
   return useQuery({
     queryKey: ['movies', 'search', query],

src/layout/MainLayout.tsx

@@ -2,7 +2,7 @@ import { MovieList } from '../components/MovieList';
 
 import { Section } from '../components/Section';
 import { TrendingPreview } from '../components/TrendingPreview';
-import { useCurMovies, usePopMovies } from '../hooks/useMovies';
+import { useCurMovies, usePopMovies, useUpMovies } from '../hooks/useMovies';
 
 import type { Movie } from '../types/tmdb';
 
@@ -20,6 +20,7 @@ export function MainLayout({
 }: MainLayoutProps) {
   const popular = usePopMovies();
   const current = useCurMovies();
+  const coming  = useUpMovies();
 
   return (
     <>
@@ -53,14 +54,14 @@ export function MainLayout({
         )}
       </Section>
       <Section
-        id="nye-filmer"
-        title="Nye filmer"
-        isLoading={current.isLoading}
-        error={current.error}
+        id="kommende-filmer"
+        title="Kommende filmer"
+        isLoading={coming.isLoading}
+        error={coming.error}
       >
-        {current.data && (
+        {coming.data && (
           <MovieList
-            movies={current.data}
+            movies={coming.data}
             isFavorite={isFavorite}
             onToggleFavorite={toggleFavorite}
             onSelectMovie={onSelectMovie}