05 Web Technology 2

This portfolio project will be about creating a fullstack application. That means that you will be building both the frontend and the backend.

• Backend - This part will be an api that is connected to a database

• Frontend - Javascript should fetch data from the api and render that data using HTML and CSS

Projects

You can either create your own website or choose one of the two projects we have described below

☕️ Hvilken cafe skal jeg studere i?

Hjemmesiden skal kunne hjælpe folk med at finde et sted og arbejde i København.

Problemet

Det er svært at finde den rigtige cafe at studere i. Nogle cafeer er små andre store, nogle er hyggelige, andre billige. Som bruger er det svært at finde det helt rigtige sted at studere

Fx kan det være man leder efter en cafe med wifi, hyggelig musik og god kaffe, eller måske vil man bare finde en cafe der er stille og med billig mad.

Krav til backenden

• Database

  • Databasen skal understøtte at man som bruger kan favorite nogle cafeer. Derfor skal der skal være minimum 3 tabeller: cafes, favorites og users

• API

  • Der skal være et endpoint til hver entitet: cafes, favorites og users hvor alt bliver returneret.

    • Fx /cafes returnerer alle cafeer i databasen

  • Der skal være et endpoint til hver entitet: cafes, favorites og users hvor en specifik entitet bliver returneret

    • Fx /cafes/1 returnerer cafeen der har id 1

  • Man skal kunne filtrere cafeer med query parameters. Fx /cafes?city=copenhagen

  • Der skal være et endpoint hvor man opretter en ny cafe

Krav til frontend

• Der skal være en liste af cafeer man kan se

• Man skal på en måde kunne søge/filtrere/sortere cafeer så en bruger nemt kan finde en cafe at besøge der matcher deres behov

📸 Instagram spots

Denne verden er fyldt med utroligt flotte spots. Hvis man gerne vil finde flotte spots at tage billeder af til instagram, kan det være svært. Hvor skal man gå hen og hvor hvornår skal man være et sted. Det skal den her hjemmeside hjælpe med.

Et eksempel kunne være at man på hjemmesiden kan se at man skal tage til Bispebjerg Kirkegård i foråret når kirsebær træerne springer ud

Problemet

Som Instagram bruger vil man gerne tage flotte billeder, men hvor, hvornår og i hvilken retning præcis skal man tage dem?

Krav til backend

• Database

  • Databasen skal understøtte at man som bruger kan tilføje billeder. Derfor skal der være minimum 3 tabeller: spots, images og users

• API

  • Der skal være et endpoint til hver entitet: spots, images og users hvor alt bliver returneret.

    • Fx /spots returnerer alle spots i databasen

  • Der skal være et endpoint til hver entitet: spots, images og users hvor en specifik entitet bliver returneret.

    • Fx /spots/1 returnerer det spot der har id 1

  • Man skal kunne filtrere spots med query parameters

    • Fx /spots?season=winter

  • Der skal være et endpoint hvor man opretter et nyt spot

Krav til frontend

• Man skal kunne se en liste af alle spots

• Man skal kunne søge/filtrere/sortere så brugere nemt kan finde et spot at tage et billede

✍️ Dit projekt her

Man må gerne lave sit eget projekt. Så længe der er en database, et api og en frontend der henter data fra det api

Grupper

I skal selv danne grupper. Der må være max 3 i gruppen

Afleveringer

Der er to afleveringer:

1. En d. 20/11 fokuseret på backenden. Afleveringslink her

   1. Der skal som minimum være link til backend repo (tilføj koden til at lave databasen som en sql fil i repoet)

   2. Der må gerne være link til frontenden hvis i er begyndt, men det er ikke på krævet!

   3. Den her aflevering bruger vi til at give jer feedback!

2. En d. 27/11 fokuseret på hele applikationen. Det i afleverer her er den i kan tage med til eksamen! Afleveringslink her I afleveringen skal der været fire ting:

   1. Link til backend repo (tilføj koden til at lave databasen som en sql fil i repoet)

   2. Link til det deployede backend rest api

   3. Link til frontend repo

   4. Link til deployet hjemmeside frontend

Fokus i opgaven er på koden. Hvis i får det deployet så flot. Hvis ikke, så gør det ikke noget.