Developing a matching application
The development of a matching application was born from the need to automate the matching of the startups with the mentors in the Techstars program by developing a simple algorithm and a super minimalistic interface to free up time for the staff, and as a result, allow them to focus on activities that add more value to the entrepreneurs.
This challenge came from Techstars, a worldwide network that specializes in connecting corporations, investors, and cities with the world’s most promising startups.
The group of people behind this final product is a multidisciplinary team of developers passionate about technology and challenges, consisted of David Arias Fuentes, Deyber Castañeda, Marcos Pimienta, and myself.
The first three weeks were for the research, development, and planning of the proposal. Feedback and guidance over our work were held once a week by the program manager and Lead Program Associates of Techstars. Therefore we made sure to understand every aspect of the problem to implement and deliver a smooth solution when we have to begin the development of the application.
During the establishment of the workflow, we found that the source data for our program, along with other aspects, was strongly connected to the scheduling project. The Scheduling project was another Techstarts challenge that required matching the meetings between the startups and the mentors. This project was in charge of a couple of peers that we quickly contact to discuss and set up an infrastructure that could work for both teams.
At last, we ended up agreeing to implement a microservice architecture that allows independent management and deployment of its services, a RESTful API made with the back-end application Express.js framework for Node.js, that communicates an ORM, called sequalize, from a PostgreSQL database to a React.js user interface.
By the fourth week, we started to develop the application we established, and even though the workflow was simple and straightforward at first, the amount of work for every part was considerable, hence dividing and specify a role to each member as follows became crucial:
- David Arias worked on the Back-end and DevOps.
- Deyber Castañeda was also in charge of the Back-end.
- Marcos Pimienta performed on the Front-end.
- Valentina Jaramillo also worked in the Front-end.
Summary Architecture:
Technologies used:
Back-end:
The data from the Matching and Scheduling projects were stored and managed in the PostgreSQL database. That information includes mentor and company data, scheduled meetings, surveys, and survey results. Sequelize is a promise-based Node.js ORM for PostgresSQL and other database management systems. It features solid transaction support, relations, eager and lazy loading, read replication, and more. The REST API was developed in Express.js, which provides a robust and well-documented set of features for web applications. The API brought the needed data depending on the endpoint for each front-end feature.
Front-end:
We used mainly React.js, an open-source JavaScript library used for building user UI components, but additional libraries were required to achieve design, behavior, and routing in the application. React Router, a set of modules that enable us to synchronizes each personalized URL with a feature in the web app. Ant Design provides us with a set of high-quality React components like tables, modal boxes, icons, buttons, and more, to improve the interactive user interface. React Card Flip which allows us to use the card flipping animation into the surveys for mentors and companies. Finally, we used Auth0, a flexible solution to add user authentication to our application.
Testing:
For testing the application we used Jest, it was the ideal technology to apply tests to our Back-end and Front-end developed in JavaScript.
Deployment:
Heroku, became the easy, great and powerful platform, to make the deployment of our project smoothly.
Features
Automatic survey sender
The survey data will be taken only from the scheduled and finished meetings between mentors and companies and sent to them immediately on a single simple page. Rest assured that no unnecessary survey or complex process to respond to the survey will reach your clients.
Smart Match Algorithm
You’ll never need to wait until the end of a program to evaluate your participant’s progress, and results. The matching algorithm receives the data responses from the mentors and companies, processes them, and retrieves a quantitative result based on their answers for the best match in the mentorship program, in a matter of seconds.
Survey Status Manager
Nothing better than knowing what you have done and what you are missing to do. As far as surveys are filled out the filler will get a rate of such completed which brings a sense of control of the process. Giving real-time tracking of all the mentors and companies.
Technical Challenge
One of the most difficult challenges for me was the use of the Antd Design library. It happens that the Antd design library is made by a Chinese company named “Ant Design” that is own by the Alibaba Group, consequently, it was hard to make some components behave or styled them in a specific way, due to lack of open issues in English about the using of this resource. To resolve these problems it was necessary to carefully read some of the code examples on the antd design main page, as other projects on the internet to figure out how the properties and styles were involved in the behavior of the components. This was possible through determining properties, methods, and functions used within it, to later implement them in the functional components for the front-end views we established.
What I learned
Technical take-aways
I enjoyed learning some basic knowledge of React.js, implement and customize the Ant Design components into the React as planned, determine the routing to match the needs in the unified front-end of the application, learn from zero about user authentication with Auth0, and reinforce my concepts on CSS and JavaScript to request and display the data in a user-friendly way.
What I might have done differently?
I would probably try to have a bigger role in the back-end of the application, be more involved in the use of sequalize with the database, and the development of the REST API. Also, I would have liked to use Figma as wireframing tool sooner to deliver more accurate views during the firsts weeks, and finally, I would have improved the user experience over the application.
What did I learn about myself as an engineer?
Developing this web application gave me a lot of knowledge, new tools, and a work methodology. Also, this experience teaches me that I have the capability of adapting and approaching new technologies if I analyze the documentation, implement whiteboarding or wireframing, and perform quick tests that support my learning.
How did this project inform my engineering path in the future?
This project reaffirmed my desire to be on the path of web development, increased my wish to learn more about React and other technologies like Redux, GraphQL, and styled-components. Besides, it showed me all the steps, considerations, and challenges one might find at the time to develop an application.
About me
I am a Fullstack software developer and Biomedical Engineer, with one year of experience in metrology in the Pharmaceutical industry. I am passionate, independent, honest, and highly adaptable to new challenging situations. I Love web development, design, learn and share knowledge to improve myself.
If you have any feedback for this project. Feel free to contact me on Linkedin or follow me on Github.
