Forside
CV
  • Github

  • LinkedIn

Palette Banner

Palette

Github logo

Palette

Github logo

Om Projektet

Frontend

Backend

LLM

Palette er en farvepalet generator, som er udviklet som et fritidsprojekt. Appen kan generere tilfældige farvepaletter, som brugeren kan gemme i sin profil. Derudover har appen en AI chatbot, som kan hjælpe brugeren med at finde frem til paletter som passer til deres behov.

Appen er bygget i Next.js med TypeScript, og bruger MongoDB til at gemme data om brugerne og de farvepaletter, de har gemt. Appen bruger også Mistral API som LLM til at kunne generere farvepaletter i chat vinduet.

Jeg har lavet appen som en øvelse i at arbejde med AI og MongoDB. Jeg har genskabt designet fra den eksisterende app 'Coolors', som er en farvepalet generator.

Testbruger:

Email: sylto@gmail.com

Kodeord: hello1234


Techstack

React
icon-React
Next.js
icon-Next.js
MongoDB
icon-MongoDB
Mistral
icon-Mistral
Tailwind CSS
icon-Tailwind CSS
TypeScript
icon-TypeScript
Zustand
icon-Zustand

Snapshots

snapshot
snapshot
snapshot

Teknologier

React

Jeg har brugt React til at skabe en interaktiv og dynamisk brugergrænseflade for min farvepaletgenerator. Ved at opbygge siden med genanvendelige komponenter, har jeg sikret en effektiv udviklingsproces og en brugervenlig oplevelse.

React logo
Next.js

Next.js har været fundamentet for at skabe en hurtig og effektiv webapplikation. Jeg har brugt det til at udvikle min farvepaletgenerator, hvor brugerne nemt kan generere og gemme deres egne farvepaletter.

Next.js logo
MongoDB

For at håndtere brugerdata og gemte farvepaletter har jeg implementeret MongoDB. Denne NoSQL-database giver mig fleksibiliteten til at gemme og hente data effektivt, hvilket er afgørende for funktionaliteten af min applikation.

MongoDB logo
Mistral

Mistral har været en central del af at tilføje intelligens til min applikation. Jeg har integreret Mistral i chatvinduet, så brugerne kan få hjælp til at generere farvepaletter, hvilket giver en mere intuitiv og assisteret oplevelse.

Mistral logo
Tailwind CSS

Med Tailwind CSS har jeg hurtigt og effektivt stylet min farvepaletgenerator. Det har gjort det muligt for mig at skabe et moderne og responsivt design, der fungerer godt på alle enheder.

Tailwind CSS logo
TypeScript

TypeScript har hjulpet mig med at skrive mere robust og vedligeholdelig kode. Ved at tilføje typekontrol til JavaScript har jeg reduceret fejl og forbedret udviklingsprocessen.

TypeScript logo
Zustand

Zustand er et state management library til React. Jeg har brugt det til at implementere, at brugere kan låse enkelte farver i paletterne uden at miste 'locked state' efter hver ny paletgenerering. Dette giver brugerne mere kontrol over deres farvevalg.

Zustand logo
GithubLinkedInEmail

Tobias Wolmar