Bryt-Isen was a project completed in the spring of 2024 by Anders Vestrum, Eirik Engen Kvam, Hannah Lervik, Jens Høie, Julie Amundsen Wolff, Mats Gaupset and Snorre Sæther.
The projects was part of the course TDT4140 - Software Engineering at NTNU. The course has a focus on developing software as a team, where we learned Agile development methodes like Scrum and Kanban. In TDT4140 the teams are not determined by the students, and most of the groups consist of students from different study programs. All groups recive a project and a product-owner which have requirements for the product. The team consideres these requirements during the project in processes like Spirint planning.
The product owner presented a problem focusing on helping young people in social settings, especially in new and unfamiliar environments. There is a desire for the team to create a service where users can more easily build new acquaintances. This can come in the form of games and activities. For example, singing games, name games, and drinking games. Typical situations where these might be relevant include during orientation week, at festivals, and in student associations.
Based on this problem, we wanted to create a website where users can - through a structured and user-friendly experience - find various ice-breaker games. The games is distributed in predefined categories, but the site will also present a selection of games immediately upon opening the page. The website has a login function, which not only allows users to share their opinions about the games but also to contribute their own activities by providing names, rules, and a description of the activity. There is also the possibility of having an admin user who can manage all games and activities on the website.
For more information see the "About Bryt-Isen" docs only in Norwegian
For information about the tech-stack see the Tech-stack docs
requires that you have docker installed
- Navigate to the root of this project (
/bryt-isen) in your terminal - Run
docker compse buildfrom your terminal - Run
docker compse upto start the containers - Go to localhost:3000 for the frontend, or localhost:8000 for the Django admin panel. 📢 as of september 2024 there is no seed script, so content has to be added manually.
Detaljer lengre ned!
Gruppen har brukt Docker🐋 for å kjøre utviklingsmiljøet og utviklings servere.
Prosjekte kjører som smurt hvis man :
- Gå til docker sin hjemmeside, last ned docker dekstop.
- Åpne Docker Desktop (og dermed Docker daemon)
- Fra bryt-isen/ mappen, kjøre først
docker compose build, når containeren er bygd, kjøredocker compose up - Frontend åpnes på lh:3000, backend på lh:8000
git clone <prosjekt-URL>
# 👀fra frontend mappa (i bryt-isen/)
npm installDa det ikke har vært noe krav har vi ikke fokusert på at prosjeket skal "builde", så det er tvilsomt at det vil har noe for seg å prøve.
# 👀fra backend mappa (i bryt-isen/)
pip install pipenv# 👀fra backend/
pipenv install# 👀fra backend/
pipenv run python manage.py makemigrations# 👀fra backend/
pipenv run python manage.py migrateÅpne en terminal i backend og en annen terminal i frontend
# 👀fra backend/
pipenv run python manage.py runserver# 👀fra frontend/
npm run devfrontend åpnes på localhost:3000 og backend åpnes på localhost:8000
For å lage superbruker i django kjører man:
# 👀fra backend/
pipenv run python manage.py createsuperuserMed superbruker kan man benytte seg av admin-panalet på localhost:8000/admin
Det offisielle prosjektomfanget er definert i Forstudie og andre innleveringer.
Bryt-Isen er et produkt som er ment å hjelpe unge mennesker i sosiale settinger, spesielt i nye og ukjente omgivelser. Dette kan komme frem i form av leker og aktiviteter. For eksempel sangleker, navneleker og drikkeleker. Typiske situasjoner hvor disse kan være relevante er blant annet under fadderuke, på festivaler og i studentforeninger.
Bryt-Isen ønsker å leve opp til denne visjonen ved å la brukere finne ulike bli-kjent-leker gjennom en strukturert og brukervennlig opplevelse, samt annen funksjonalitet som at innloggede brukere kan vurdere bli-kjent-leker og favoritisere bli-kjent-leker. Brukere skal også kunne filtrere og søke på bli-kjent-leker. Det vil være mulig å rapportere upassende innhold, som administratorer kan slette.
- Context for the project: (added september 2024)
- 🧊⛏️Bryt-Isen
- Simple setup docs
- Uten Docker:
- Om prosjektet
- Oversikt
- Utviklingsmiljø & teknologistakk
- Sett opp utviklingsmiljø - Steg 1: klon🐑 - Steg 2: naviger til frontend 📁 - Steg 3: installer frontend avhengigheter📦 - Kjør frontend server🚀 - Steg 4: naviger til backend 📁 - Steg 5: installer pipenv📦 - Steg 6: åpne pipenv shell 🐢 - Steg 7: installer backend avhengigheter📦 - Kjør backend server 🎸
- Kjør utviklingsmiljøet i Docker
Sjekk ut detaljert dokumentasjon.
👋 For utvikling vil du bare trenge å bruke det som står i Kjør frontend server og Kjør backend server, etter du har gått gjennom steg 1 - 7 for å sette opp prosjektet.
MEN, det kan være ganske nice å heller bruke Docker for å kjøre utviklingsmiljøet virtuelt.
Krever Python(pip, v. 12.1) og pipenv
Krever Node.js(v. 21.6), med npm📦. Kan være greit å ha nvm, men dette er en smule herk i Windows
- 🚀Vite for å bygge React app
- ⚛️React
- ⌨️TypeScript
- 🥾Bootstrap
- ✨Prettier (kode formattering)
- 🔎 ESlint (linter)
Har du Python (pip) og Node.js (npm)? Les mer om Python og Node.js krav.
kommandoer kjøres i terminalen.
Klon prosjektet fra GitLab til en passende lokasjon på din datamaskin.
git clone <prosjekt-URL>
Har laget et setup script. Litt usikker på hvor bra det funker, men i windows skal man kunne høyreklikke på windows-setup.ps1 filen og velge å kjøre med powershell. Dette er ment å automatisk sette opp prosjektet. Igjen, det kreves at man har Node.js og Python satt opp riktig. For macOS kan du kjøre macos-setup.sh filen ved å skrive ./macos-setup.sh i terminalen fra bryt-isen mappen.
Hvis du ikke får startet frontend og backend serveren virket det ikke. Da burde du slette hele bryt-isen mappen, klone den på nytt og fortsette oppsettet manuelt. Altås steg 2 - 7.
💡Hvis det virket anbefales det å sjekke ut hvordan du kan bruke Docker videre: bruke Docker for å kjøre utviklingsmiljøet virtuelt
Gå til bryt-isen repoet du klonet. F.eks. med cd bryt-isen
Deretter til frontend med: cd frontend
Pakk ut frontend delen av prosjektet med node package manager (npm).
# 👀fra frontend mappa
npm installDette installere alle avhengigheter som trengs i et utviklingsmiljø for å utvikle og kjøre frontend delen av prosjektet. npm install må kjøres fra mappen hvor package.json ligger.
For å sjekke at steg 3 var suksessfult/for å åpne en lokal frontend server:
# 👀fra frontend/
npm run dev💡Trykk Ctrl + C i terminalen for å stoppe serveren.
Gå ytters i bryt-isen repoet du klonet.
Hvis du er i frontend, bruk cd .. for å beveg deg et lag opp i mappestrukturen i terminalen.
Installer Python pakke-administratoren pipenv med :
# 👀fra backend mappa
pip install pipenvpip er Pythons pakke installatør.
💡 Her kan det hende noen må bruke pip3
For å installer og pakke ut Python-pakker må man åpne et virtuelt shell. Bruk:
# 👀fra backend/
pipenv shellInstaller backendavhengigheter, inkludert Django:
# 👀fra backend/
pipenv installFor å sjekke at steg 7 var suksessfult/for å åpne en lokal backend server:
# 👀fra backend/
python manage.py runserverTrykk Ctrl + C i terminalen for å stoppe serveren.
💡Her kan det hende noen må bruke python3
💡Filen manage.py brukes i Python for å kjøre Django kommandoer.
Docker🐋 er et verktøy for å kjøre (blant annet) utviklingsmiljøer virtuelt, sørge for at utviklingsmiljø variabler er konstant på forskjellige datamaskiner og for å strømmlinjeforme utviklingsprosessen.
For å komme i gang med Docker: last ned Docker Desktop her. Når ferdig nedlasted og installert, åpne Docker Desktop programmet. I Windows er det mulig man må sette opp Docker med Windows Subsystem for Linux. For hjelp med dette, sjekk ut denne fremgangsmåten, frem til (men ekskludert) den førte terminal kommandoen som blir nevnt.
1️⃣ Deretter gå til bryt-isen mappen i en terminal og kjør følgende:
# 👀fra bryt-isen/
docker compose build💡Dette bygger noe som kalles et Docker container, som inneholder det virutuelle utviklingsmiljøet. Vår Docker container skal inneholde to Docker images, ett for frontend og ett for backend.
2️⃣ Start Docker containeren (dette starter det virtuelle utvikler miljøet og frontend+backend serverene):
# 👀fra bryt-isen/
docker compose up💡Disse to kommandoene trenger du bare kjøre for å sette opp prosjektet i Docker. Videre kan du bruke Docker Desktop brukergrensesnittet for å starte frontend og backend serveren.
💡💡 Nå vil du se en oppdatering i brukergrensesnittet i Docker Desktop under "containers" som indikere at containeren med frontend og backend images kjører. Dette betyr at Fra brukergrensesnittet kan du åpne localhost:3000 og localhost:8000, for å se det kjørende prosjektet i browser.
Fordelen med å bruke Docker er at du bare trenger å forholde deg til Docker Desktop for å utvikle. Altså trenger du ikke tenke på f.eks. pipenv shell eller å starte frontend/backend serverene fra terminalen. Når det kommer tid for å jobbe i backend kommer man til å måtte bruke terminalen litt mer, noe som kan gjøres enklere med Docker Desktop.
🚨 Åpne bryt-isen VScode i det virtuelle utviklermiljøet ved å trykke på de tre prikkene for bryt-isen Docker containeren:
