diff --git a/index.xml b/index.xml index 098c59af..8929874b 100644 --- a/index.xml +++ b/index.xml @@ -25,6 +25,15 @@ The concept is the project foundation and was developed in collaboration and coordination with the Marc Sinan Company. An important point here was dividing the whole act into substeps to define the possible states of it. + + Features + https://htw-imi-showtime.github.io/tryout/ws23/bachelor/b1-peek/features/ + Mon, 01 Jan 0001 00:00:00 +0000 + + https://htw-imi-showtime.github.io/tryout/ws23/bachelor/b1-peek/features/ + 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. + + Features https://htw-imi-showtime.github.io/tryout/ws23/bachelor/b4-hypnobuddy/features/ @@ -551,6 +560,15 @@ Our brainstorming process As interesting as all of those ideas would have been, Personalized needs with various trackers Different trackers will be developed for users to set them individually according to their own preferences. + + Process + https://htw-imi-showtime.github.io/tryout/ws23/bachelor/b1-peek/process/ + Mon, 01 Jan 0001 00:00:00 +0000 + + https://htw-imi-showtime.github.io/tryout/ws23/bachelor/b1-peek/process/ + 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. + + Process https://htw-imi-showtime.github.io/tryout/ws23/bachelor/b7-ar-interaction-city/process/ @@ -702,6 +720,15 @@ idealo decided to discontinue the Direktkauf feature, the scope was changed, so The process started with a brainstorming session where all potential requirements were documented. This information was then reviewed and prioritized, focusing on the most important features for both target groups. + + Tech Stack + https://htw-imi-showtime.github.io/tryout/ws23/bachelor/b1-peek/techstack/ + Mon, 01 Jan 0001 00:00:00 +0000 + + https://htw-imi-showtime.github.io/tryout/ws23/bachelor/b1-peek/techstack/ + Communication Discord Zoom Planning Notion Figma Programming Visual Studio Code React NextJS ExpressJS GitHub Utility MongoDB Docker 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 + + Tech Stack https://htw-imi-showtime.github.io/tryout/ws23/bachelor/b2-mobile-multitouch-multiplayer/tech-stack/ diff --git a/projects/index.html b/projects/index.html index 0f5b8b19..954e5bb6 100644 --- a/projects/index.html +++ b/projects/index.html @@ -118,6 +118,24 @@

Bachelor Project Template


+

+
+
+ B1 Bachelor + +

Peek

+
+

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!

+ -> Details +
+ + + + + Peek +
+
+

diff --git a/sitemap.xml b/sitemap.xml index 37b03ed4..941c604a 100644 --- a/sitemap.xml +++ b/sitemap.xml @@ -5,6 +5,8 @@ https://htw-imi-showtime.github.io/tryout/ss23/master/m2-mentist/challenges/ https://htw-imi-showtime.github.io/tryout/ss21/bachelor/b4-manifesto/concept/ + + https://htw-imi-showtime.github.io/tryout/ws23/bachelor/b1-peek/features/ https://htw-imi-showtime.github.io/tryout/ws23/bachelor/b4-hypnobuddy/features/ @@ -113,6 +115,8 @@ https://htw-imi-showtime.github.io/tryout/ss20/bachelor/b5-the-missing-tool-projekt/finding-ideas/ https://htw-imi-showtime.github.io/tryout/ss23/master/m2-mentist/future/ + + https://htw-imi-showtime.github.io/tryout/ws23/bachelor/b1-peek/process/ https://htw-imi-showtime.github.io/tryout/ws23/bachelor/b7-ar-interaction-city/process/ @@ -145,6 +149,8 @@ https://htw-imi-showtime.github.io/tryout/ws22/bachelor/b6-book-reading-club-applikation/process/ https://htw-imi-showtime.github.io/tryout/ws22/master/m7-valit/process/ + + https://htw-imi-showtime.github.io/tryout/ws23/bachelor/b1-peek/techstack/ https://htw-imi-showtime.github.io/tryout/ws23/bachelor/b2-mobile-multitouch-multiplayer/tech-stack/ @@ -701,6 +707,8 @@ https://htw-imi-showtime.github.io/tryout/ss21/master/m6-migrate-the-imimap-to-mevn/ https://htw-imi-showtime.github.io/tryout/ws23/bachelor/b2-mobile-multitouch-multiplayer/ + + https://htw-imi-showtime.github.io/tryout/ws23/bachelor/b1-peek/ https://htw-imi-showtime.github.io/tryout/ws21/bachelor/b5-penny-pincher/ diff --git a/ws23/bachelor/b1-peek/alexej.png b/ws23/bachelor/b1-peek/alexej.png new file mode 100644 index 00000000..d83b5681 Binary files /dev/null and b/ws23/bachelor/b1-peek/alexej.png differ diff --git a/ws23/bachelor/b1-peek/app-concept.jpg b/ws23/bachelor/b1-peek/app-concept.jpg new file mode 100644 index 00000000..3f4da935 Binary files /dev/null and b/ws23/bachelor/b1-peek/app-concept.jpg differ diff --git a/ws23/bachelor/b1-peek/app_functionality.gif b/ws23/bachelor/b1-peek/app_functionality.gif new file mode 100644 index 00000000..c139c313 Binary files /dev/null and b/ws23/bachelor/b1-peek/app_functionality.gif differ diff --git a/ws23/bachelor/b1-peek/cat.jpg b/ws23/bachelor/b1-peek/cat.jpg new file mode 100644 index 00000000..3ee30f58 Binary files /dev/null and b/ws23/bachelor/b1-peek/cat.jpg differ diff --git a/ws23/bachelor/b1-peek/discord-icon.png b/ws23/bachelor/b1-peek/discord-icon.png new file mode 100644 index 00000000..c71fe213 Binary files /dev/null and b/ws23/bachelor/b1-peek/discord-icon.png differ diff --git a/ws23/bachelor/b1-peek/docker-icon.png b/ws23/bachelor/b1-peek/docker-icon.png new file mode 100644 index 00000000..5617b701 Binary files /dev/null and b/ws23/bachelor/b1-peek/docker-icon.png differ diff --git a/ws23/bachelor/b1-peek/expressjs-icon.png b/ws23/bachelor/b1-peek/expressjs-icon.png new file mode 100644 index 00000000..4bb15f67 Binary files /dev/null and b/ws23/bachelor/b1-peek/expressjs-icon.png differ diff --git a/ws23/bachelor/b1-peek/features/index.html b/ws23/bachelor/b1-peek/features/index.html new file mode 100644 index 00000000..d3331688 --- /dev/null +++ b/ws23/bachelor/b1-peek/features/index.html @@ -0,0 +1,170 @@ + + + + + + + + + + + +IMI Showtime - HTW Berlin + + + +
+
+

+ B1 Bachelor + Peek +   +

+
+
+ +

Team

+
    + +
  • Alexej Bormatenkow
  • + +
  • Marlin Pohl
  • + +
  • Leif Rehtanz
  • + +
  • Tobias Bayer
  • + +
  • Laura Bärtschi
  • + +
  • Matthis Ehrhardt
  • + +
+ + +

Supervision

+ Prof. Dr.-Ing. David Strippgen + +
+
+
+
+ +
+
+ + + + +
+
+ +
+

+ + 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.

+ +
+
+ + +
+ + + diff --git a/ws23/bachelor/b1-peek/figma-icon.png b/ws23/bachelor/b1-peek/figma-icon.png new file mode 100644 index 00000000..8173824d Binary files /dev/null and b/ws23/bachelor/b1-peek/figma-icon.png differ diff --git a/ws23/bachelor/b1-peek/github-icon.png b/ws23/bachelor/b1-peek/github-icon.png new file mode 100644 index 00000000..a013b44e Binary files /dev/null and b/ws23/bachelor/b1-peek/github-icon.png differ diff --git a/ws23/bachelor/b1-peek/index.html b/ws23/bachelor/b1-peek/index.html new file mode 100644 index 00000000..9d5ba72b --- /dev/null +++ b/ws23/bachelor/b1-peek/index.html @@ -0,0 +1,204 @@ + + + + + + + + + + + +IMI Showtime - HTW Berlin + + + +
+
+

+ B1 Bachelor + Peek +   +

+
+
+ +

Team

+
    + +
  • Alexej Bormatenkow
  • + +
  • Marlin Pohl
  • + +
  • Leif Rehtanz
  • + +
  • Tobias Bayer
  • + +
  • Laura Bärtschi
  • + +
  • Matthis Ehrhardt
  • + +
+ + +

Supervision

+ Prof. Dr.-Ing. David Strippgen + +
+
+
+
+ +
+
+ + + + +
+
+ + + + +

+ 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! +

+ + + + + + + + + +
+ Portrait of App Functionality +
App Functionality
+
+ +
+

+ + 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.

+ +
+
+ + + + +
+ + + diff --git a/ws23/bachelor/b1-peek/index.xml b/ws23/bachelor/b1-peek/index.xml new file mode 100644 index 00000000..055801a5 --- /dev/null +++ b/ws23/bachelor/b1-peek/index.xml @@ -0,0 +1,37 @@ + + + + Peek on IMI Showtime + https://htw-imi-showtime.github.io/tryout/ws23/bachelor/b1-peek/ + Recent content in Peek on IMI Showtime + Hugo -- gohugo.io + de-de + + Features + https://htw-imi-showtime.github.io/tryout/ws23/bachelor/b1-peek/features/ + Mon, 01 Jan 0001 00:00:00 +0000 + + https://htw-imi-showtime.github.io/tryout/ws23/bachelor/b1-peek/features/ + 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. + + + + Process + https://htw-imi-showtime.github.io/tryout/ws23/bachelor/b1-peek/process/ + Mon, 01 Jan 0001 00:00:00 +0000 + + https://htw-imi-showtime.github.io/tryout/ws23/bachelor/b1-peek/process/ + 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. + + + + Tech Stack + https://htw-imi-showtime.github.io/tryout/ws23/bachelor/b1-peek/techstack/ + Mon, 01 Jan 0001 00:00:00 +0000 + + https://htw-imi-showtime.github.io/tryout/ws23/bachelor/b1-peek/techstack/ + Communication Discord Zoom Planning Notion Figma Programming Visual Studio Code React NextJS ExpressJS GitHub Utility MongoDB Docker 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 + + + + diff --git a/ws23/bachelor/b1-peek/kitty.jpg b/ws23/bachelor/b1-peek/kitty.jpg new file mode 100644 index 00000000..dc5254fa Binary files /dev/null and b/ws23/bachelor/b1-peek/kitty.jpg differ diff --git a/ws23/bachelor/b1-peek/laura.png b/ws23/bachelor/b1-peek/laura.png new file mode 100644 index 00000000..7d80ca1c Binary files /dev/null and b/ws23/bachelor/b1-peek/laura.png differ diff --git a/ws23/bachelor/b1-peek/leaf-eye.jpeg b/ws23/bachelor/b1-peek/leaf-eye.jpeg new file mode 100644 index 00000000..a32c1a10 Binary files /dev/null and b/ws23/bachelor/b1-peek/leaf-eye.jpeg differ diff --git a/ws23/bachelor/b1-peek/leif.png b/ws23/bachelor/b1-peek/leif.png new file mode 100644 index 00000000..da95e76c Binary files /dev/null and b/ws23/bachelor/b1-peek/leif.png differ diff --git a/ws23/bachelor/b1-peek/marlin.png b/ws23/bachelor/b1-peek/marlin.png new file mode 100644 index 00000000..4df8da20 Binary files /dev/null and b/ws23/bachelor/b1-peek/marlin.png differ diff --git a/ws23/bachelor/b1-peek/matthis.png b/ws23/bachelor/b1-peek/matthis.png new file mode 100644 index 00000000..bd31d77d Binary files /dev/null and b/ws23/bachelor/b1-peek/matthis.png differ diff --git a/ws23/bachelor/b1-peek/mongodb-icon.png b/ws23/bachelor/b1-peek/mongodb-icon.png new file mode 100644 index 00000000..eb4bc40a Binary files /dev/null and b/ws23/bachelor/b1-peek/mongodb-icon.png differ diff --git a/ws23/bachelor/b1-peek/nextjs-icon.png b/ws23/bachelor/b1-peek/nextjs-icon.png new file mode 100644 index 00000000..436bb8c3 Binary files /dev/null and b/ws23/bachelor/b1-peek/nextjs-icon.png differ diff --git a/ws23/bachelor/b1-peek/notion-icon.png b/ws23/bachelor/b1-peek/notion-icon.png new file mode 100644 index 00000000..266595f8 Binary files /dev/null and b/ws23/bachelor/b1-peek/notion-icon.png differ diff --git a/ws23/bachelor/b1-peek/process/index.html b/ws23/bachelor/b1-peek/process/index.html new file mode 100644 index 00000000..7b5dce4a --- /dev/null +++ b/ws23/bachelor/b1-peek/process/index.html @@ -0,0 +1,159 @@ + + + + + + + + + + + +IMI Showtime - HTW Berlin + + + +
+
+

+ B1 Bachelor + Peek +   +

+
+
+ +

Team

+
    + +
  • Alexej Bormatenkow
  • + +
  • Marlin Pohl
  • + +
  • Leif Rehtanz
  • + +
  • Tobias Bayer
  • + +
  • Laura Bärtschi
  • + +
  • Matthis Ehrhardt
  • + +
+ + +

Supervision

+ Prof. Dr.-Ing. David Strippgen + +
+
+
+
+ +
+
+ + + + +
+
+ +
+

+ + 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.

+ +
+
+ + +
+ + + diff --git a/ws23/bachelor/b1-peek/react-icon.png b/ws23/bachelor/b1-peek/react-icon.png new file mode 100644 index 00000000..ccaed68e Binary files /dev/null and b/ws23/bachelor/b1-peek/react-icon.png differ diff --git a/ws23/bachelor/b1-peek/techstack/index.html b/ws23/bachelor/b1-peek/techstack/index.html new file mode 100644 index 00000000..15fa0f40 --- /dev/null +++ b/ws23/bachelor/b1-peek/techstack/index.html @@ -0,0 +1,264 @@ + + + + + + + + + + + +IMI Showtime - HTW Berlin + + + +
+
+

+ B1 Bachelor + Peek +   +

+
+
+ +

Team

+
    + +
  • Alexej Bormatenkow
  • + +
  • Marlin Pohl
  • + +
  • Leif Rehtanz
  • + +
  • Tobias Bayer
  • + +
  • Laura Bärtschi
  • + +
  • Matthis Ehrhardt
  • + +
+ + +

Supervision

+ Prof. Dr.-Ing. David Strippgen + +
+
+
+
+ +
+
+ + + + +
+
+ +
+

+ + Communication + +

+
+
+ + +
+
+ +
+

+ + Planning + +

+
+
+ + +
+
+ +
+

+ + Programming + +

+
+
+ + +
+
+ +
+

+ + Utility + +

+
+
+ + +
+
+ +
+

+ + Image Sources + +

+
+ +
+ + +
+ + + diff --git a/ws23/bachelor/b1-peek/tobias.png b/ws23/bachelor/b1-peek/tobias.png new file mode 100644 index 00000000..72bb835e Binary files /dev/null and b/ws23/bachelor/b1-peek/tobias.png differ diff --git a/ws23/bachelor/b1-peek/vsc-icon.png b/ws23/bachelor/b1-peek/vsc-icon.png new file mode 100644 index 00000000..8c706785 Binary files /dev/null and b/ws23/bachelor/b1-peek/vsc-icon.png differ diff --git a/ws23/bachelor/b1-peek/zoom-icon.png b/ws23/bachelor/b1-peek/zoom-icon.png new file mode 100644 index 00000000..02020b87 Binary files /dev/null and b/ws23/bachelor/b1-peek/zoom-icon.png differ diff --git a/ws23/bachelor/index.html b/ws23/bachelor/index.html index 072ae76d..486afdcb 100644 --- a/ws23/bachelor/index.html +++ b/ws23/bachelor/index.html @@ -71,6 +71,8 @@

  • Mobile Multitouch Multiplayer - Spike Shielders
  • +
  • Peek
  • +
  • SmartLibrary - It's A Match!
  • Vision.IO
  • diff --git a/ws23/index.html b/ws23/index.html index ecd01b69..e87db2b3 100644 --- a/ws23/index.html +++ b/ws23/index.html @@ -137,6 +137,24 @@

    Bachelor Project Template


    +

    +
    +
    + B1 Bachelor + +

    Peek

    +
    +

    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!

    + -> Details +
    + + + + + Peek +
    +
    +