pull request for b1-peek-website (#289)

* added website for b1-peek

* resized images, added gif

* set draft to false in index.md

content/ws23/bachelor/b1-peek/_index.md

@@ -0,0 +1,29 @@
++++
+title = "Peek"
+project_id = "B1"
+
+# Properties for displaying the project in the project list
+card_image = "leaf-eye.jpeg"
+card_description = "Tired of looking through thousands of documents to get the data you need? Well, we are here to help! With Peek you simply connect to your MongoDB database and let our interactive charts do the filtering. All query-free!" 
+
+team = ["Alexej Bormatenkow", "Marlin Pohl", "Leif Rehtanz", "Tobias Bayer", "Laura Bärtschi", "Matthis Ehrhardt"]
+supervisor = "Prof. Dr.-Ing. David Strippgen" 
+draft = false
++++
+
+{{<team-member image="app_functionality.gif" name="App Functionality">}}
+
+{{<section title="Our Goal">}}
+There's no denying that MongoDB is a powerful database with a lot of use cases but as powerful as it is - it is also a little tedious to go through once your collections and documents become bigger. And it's not very helpful to only see a list of documents and key-value pairs, if you've got a long list to go through, is it?
+
+Our goal with this project is to simplify the way you interact with your Mongo database. We want to eliminate the need to use queries to get the data you need. Visually representing key-value pairs as informative graphs and charts that you can interact with to filter your data is supposed to make MongoDB more manageable and enhance your experience when working with it.
+{{</section>}}
+
+{{<gallery>}}
+{{<team-member image="alexej.png" name="Alexej">}}
+{{<team-member image="marlin.png" name="Marlin">}}
+{{<team-member image="leif.png" name="Leif">}}
+{{<team-member image="tobias.png" name="Tobias">}}
+{{<team-member image="laura.png" name="Laura">}}
+{{<team-member image="matthis.png" name="Matthis">}}
+{{</gallery>}}

content/ws23/bachelor/b1-peek/features.md

@@ -0,0 +1,24 @@
++++
+title = "Features"
+weight = 1
++++
+
+{{<section title="Features">}}
+
+* **Visualisation through Charts**
+
+Each Key existing in the documents of your collection receives their own chart window. In it, all the values of that key from the documents will be displayed in an aggregated way. Depending on the type of the key that aggregation may be in form of a pie chart, bar chart or list. That gives you a quick overview of the existing values and their occurrences.
+
+* **Interaction with Charts**
+
+The charts are not only there to display the values but you can also interact with them. By selecting or deselecting values you can filter your data and have these changes shown in your charts in real time. This way you can easily get the data you need and get immediate visual feedback on what each click actually does to your data set.
+
+* **Schema Chart**
+
+Each existing key of the selected collection gets displayed in the schema chart. Next to it you can see which percentage of the documents include that key and therefore follow the schema. If a key is a nested document or object array you can unfold it to see its keys. By clicking on the keys' eye-icons you can make their chart window visible.
+
+* **Query Builder**
+
+The user is able to get an automatically generated query corresponding to the data changes.
+
+{{</section>}}

content/ws23/bachelor/b1-peek/process.md

@@ -0,0 +1,16 @@
++++
+title = "Process"
+weight = 1
++++
+
+{{<section title="Process">}}
+Since our project had a lot do to with displaying data so it's easy to understand, we first created a concept of what our application should look like in Figma. The user should be able to navigate the interface easily, without immediately being overwhelmed. To do that, we decided that the application should have a simple login interface and once logged in, the user should be presented with only the necessary options first, navigating deeper into the interface as needed.
+
+Using this logic, we also decided on which team member would code what part of the interface and also which components were needed for the rest of the team to start working on their parts. We devided the team into sub-groups to work on different components and also had specialists for frontend and backend.
+
+The backend was developed prior to and alongside the frontend. We needed some backend functionality and initial reading data from the database to build the frontend on top of this functionality.
+
+While that initial backend development was happening, frontend members started reading into React and components, so they could start working immediately once the backend functionality was implemented.
+
+Then, everyone began working on their part and the team came together to update each other, suggest improvements or merge branches. During the process we always adapted our concept little by little - adding or removing certain features - and there was a lot of work involved in finding the right approach to display our charts correctly while giving the user maximum freedom in selecting or deselecting values.
+{{</section>}}

content/ws23/bachelor/b1-peek/techstack.md

@@ -0,0 +1,49 @@
++++
+title = "Tech Stack"
+weight = 1
++++
+
+{{<section title="Communication">}}
+{{<gallery>}}
+{{<image src="discord-icon.png" alt="Discord-Icon" caption="Discord">}}
+{{<image src="zoom-icon.png" alt="Zoom-Icon" caption="Zoom">}}
+{{</gallery>}}
+{{</section>}}
+
+{{<section title="Planning">}}
+{{<gallery>}}
+{{<image src="notion-icon.png" alt="Notion-Icon" caption="Notion">}}
+{{<image src="figma-icon.png" alt="Figma-Icon" caption="Figma">}}
+{{</gallery>}}
+{{</section>}}
+
+{{<section title="Programming">}}
+{{<gallery>}}
+{{<image src="vsc-icon.png" alt="Visual-Studio-Code-Icon" caption="Visual Studio Code">}}
+{{<image src="react-icon.png" alt="React-Icon" caption="React">}}
+{{<image src="nextjs-icon.png" alt="NextJS-Icon" caption="NextJS">}}
+{{<image src="expressjs-icon.png" alt="ExpressJS-Icon" caption="ExpressJS">}}
+{{<image src="github-icon.png" alt="GitHub-Icon" caption="GitHub">}}
+{{</gallery>}}
+{{</section>}}
+
+{{<section title="Utility">}}
+{{<gallery>}}
+{{<image src="mongodb-icon.png" alt="MongoDB-Icon" caption="MongoDB">}}
+{{<image src="docker-icon.png" alt="Docker-Icon" caption="Docker">}}
+{{</gallery>}}
+{{</section>}}
+
+{{<section title="Image Sources">}}
+https://es.logodownload.org/discord-logo/
+https://es.logodownload.org/zoom-logo/
+https://logos-download.com/40130-notion-app-logo-download.html
+https://es.logodownload.org/?s=figma
+https://logospng.org/logo-visual-studio-code/
+https://logos-download.com/9747-react-logo-download.html
+https://creazilla.com/nodes/3244252-nextjs-icon
+https://www.mementotech.in/nodejs-development-company-rajkot.html
+https://logodix.com/github-resume
+https://www.kindpng.com/imgv/hhJbRxJ_mongodb-logo-png-transparent-png/
+https://iconduck.com/icons/94225/docker-icon
+{{</section>}}