Purpofy — Leading-edge web design to help you find out your purpose!
This project was carried out as part of the TechLabs “Digital Shaper Program” in Düsseldorf (Winter Term 2021/22).
Purpofy is a website intended to help people who are feeling disoriented or unhappy with their life, specifically with regards to their career path. Through this project, people should be supported in order for them to figure out what their true purpose is, giving them a space to talk about their experience depending on which field they are working in. We offer users access to a community based on the results of a personality test that can be taken directly on our website. Once a personality type is assigned to them, users will be able to find individual content in the dashboard, such as videos and articles about self-development, events and much more.
To begin with, we created a general concept for the web structure by dividing it in different sections linked through a navigation bar. We then planned the steps of the user journey, starting from which we sketched the first wireframes. During this project phase, we tried out various designs and finally decided to select the one that was the user-friendliest and the most appealing solution for our problem. After that, we created a corporate design for our brand, so that all the sections of the website look consistent. Once the wireframes were ready, we went on to code.
In order to code our front-end design, we decided to use Bootstrap, the world’s most popular front-end open source toolkit. We first wrote the code for the homepage, consisting of a menu, log-in and sign-up buttons, a logo, a background and a section with the main information. Then, we made it responsive by using media queries, so that it would be correctly displayed on all screen sizes. After that, we adapted the code for the following pages and implemented the respective content.
Finally, our website consisted of a landing page with a button that led to a questionnaire. After answering all of the questions, the user gets to know their personality type. In addition to this, they have the option to create an account in order to access an individual dashboard and a community of like-minded people.
In the backend, we used various npm packages such as Express, Mongoose, jsonwebtoken, bcrypt and Embedded JavaScript(ejs). As a database, we used MongoDB, more specifically MongoDB Atlas cloud database service. We dynamically rendered our HTML documents using ejs. The routes conform to the RESTful concept. For the database, we created two schemas, one for the user and one for the questions to be displayed on the questionnaire page. On the questionnaire page, we use the questions from our database to embed and display to the user. Based on the user’s answers to these questions, they are then assigned a personality type that indicates what type of content they will see in the future.
When creating an account, the system checks wether the username is unique or not. If it is unique, the user has to type in a password that consists of at least 6 characters which gets hashed later on by usage of bcrypt. This is an important step for security so that, even if the database gets leaked somehow, it is hard to extract the passwords out of the hashes.
When it comes to authentification, JWTs (JSON Web Tokens) are used. This means that everytime a client wants to communicate with the server, he does that via a JWT. It consists of a header, a payload and a signature. The signature is created out of the encoded header, the encoded payload, a secret and an algorythm specified in the header. Since the secret is only known by the server, it is not possible for the client to change the content of the payload because it would no longer match the signature. So only if the payload, sended by the client, matches the signature stored on the server, the client gets authenticated and is able interact with the server.
GitHub repository: https://github.com/1106Markus/Purpofy.git
The Team:
Markus Schürmann: Web Development
Kristiyan Merdzhov: Web Development
Laura Vogel: Web Development
Gaetano Manzone: Web Development
