Overview

🛠 Frameworks used

- ReactJS (Javascript)
- NodeJS / NPM
- MongoDB
- MongooseJS
- Express.js

📌 Further links

- GitHub Repository
- TechLabs organization
- Medium article

‍

👨🏼‍💻 Personal Contribution

This group work was part of the TechLabs learning journey to receive the web development certificate. Due to my prior knowledge in web development I could finished both (backend and frontend) specializations in the e-learning track. For the first time I worked with styled components 💅🏼 to implement our design ideas. My main task were to design and implement the event frames including all event information as well as buttons to edit, delete and update events. Secondly, I created the menu as well as the overall responsiveness of our web-application so it can be used on mobile devices as well.

‍

Creation Process

‍

🔍 Empathize

To find out what people need we hold digital interviews via Zoom and Google Meet. Gathering as much information as possible, we took them to define our problem in the next step. Because the group work was focused on learning web development techniques, we spend less time on the first levels of Design Thinking.

📝 Define

The second step in our way to the final application we defined the problem which we wanted to solve: Create an easy-to-use application for fast organizing meetings. The application is suitable for organizing big events, like everyday meetings in a café or co-working space, as well as for birthdays. Our goal was to encourage people to meet in real-life.

💡 Ideate

Thirdly, during the ideation phase we created as many as possible design solutions for our application. We used the Design Tool Figma for this step so we could all work together in one document making notes and finally voting on our final design.

‍

‍

‍

‍

🔨 Prototype

To create our prototype we created a GitHub repository as the first step so we could all work together in one project and if necessary could go back to an early version of our app. After that we could start with our ReactJS application. Also, each of the participants locally installed the following programs: mongoDB and nodeJS (incl. npm). These programs let us run the project and display it in the browser. Despite the fact that all the programs were installed, some of us could not start the program the first time. In order to do this, we established a guide for both front- end backend in our README file.

We split our group into three parts:

• Camila and Eva developed the design and most of the frontend work
• Igor did the backend part with the MongoDB integration
• Chris and I supported both groups because we studied both learning tracks from TechLabs and passed them onto the others

Regarding the frontend I took the designs from Camila and Eva and programmed the CSS properties using styled components 💅🏼

To secure our backend and password authentication we used JSON web token and all passwords were hashed

‍

‍

‍

‍

‍

‍

‍

‍

💬 Learnings

- Different coding experiences can address different topics

- Willingness of more experienced participants to help others allowed us to work as a team

- Difficulties to coordinate meetings and advance the project due to our main jobs/study phases - better communication beforehand is needed

- Great experience to work in a very international team: 🇧🇷🇩🇪🇷🇺🇰🇿

‍