A grain of sand…
With less than a month to go before the completion of the foundation phase of Holberton School comes one of the most crucial projects within the program. The final project, this project unlike the others that were carried out within the program because is of each team’s own decision.
This is exciting and at the same time a bit scary because you have to plan a project from scratch, project a scope, take into account time and knowledge constraints, and also assume the risk of the time it takes to learn new technologies dedicated to the achievement of the project. This previous considering that the time dedicated to the project was of around three weeks. This is measured from the time the first proposal was presented, until its end, which was when we made a public presentation.
This timeline was divided by week. In the first one, the whole team developed a React course, adding the deliveries and some first tests.
In the next week, the team began to divide the tasks corresponding to different sections, and the first test on the page. Reaching a point of progress very surprising, in a good sense for us, since in the first week we felt that our progress was little. In the third week, we experimented with new looks and feels of design and added important components to the page and the last days of the week the team was dedicated to AWS and a deploy.
The team members are composed by Felipe Londoño and Fabio Goméz who were focused on the backend of the site and DevOps. Brian Florez who was the leader and he worked in front and back end. And me Pilar Pinto, my main role was in the Frontend.
W create PetSpot, a website whose purpose is to create a fresh and friendly website where people can post pets for adoption. And other people can take a look at the pets available for adoption and thus contribute to decreasing the numbers of street pets.
My approach was mainly that the site should have a fresh, distinctive and different touch to those found in the online market. Since many of the ones we saw on the web have too many functions that make the user lose interest quickly because of the immense amount of information.
We chose this project by brainstorming, we proposed many ideas. But this one had something that stole our heart, the tenderness factor. We all like animals and wanted to do something with purpose that at the same time would allow us to develop new skills.
More than the fact of creating something thought to generate commercial value, we wanted something that would generate social value. And personally I love animals, any little animal, no matter how streetwise, makes me want to pamper it and see the sad situations the little animals go through, that encouraged me to do something for them, even if it is a grain of sand. I’ve even rescued baby birds and bees, but that’s another story.
In the beginning, we thought we would not make it as time was running out for us. But we discovered that the support of each one of us made us develop the MVP as we had planned, it was even more beautiful than we thought. The main feature was to post a pet with data and have it shown on the page, we achieved additional things, such as a page dedicated to pets with a filter by race, an adoption form, email communication and connection to a database in the cloud.
Our team managed to develop the project in such a way that it is basically functional, as shown below,
The user is connected through an IP provided by the AWS service. Within an instance of AWS, an EC2 was created, which is a kind of rented computer where it was configured to have an Ubuntu operating system, since we were familiar with it, as well as installing Nginx as a web server that allows us to manage the web protocols and which you had also used in previous projects.
Inside this server, we installed Node js, since it allows the writing of javascript code as if it were an object-oriented language. React is also installed, this is a Javascript library, which simplifies its writing. Which we used to create components along with bootstrap to handle form design templates, buttons among others and Express as an API handler, where different endpoints were created and invoked as required from the front.
On the other hand, we have the AWS RDS that allows the use of relational databases. This allowed us to accelerate the data testing stage. At the beginning of the project for each test, the team member in charge had to share the SQL query with the other members, but as the tests and tables increased, this process became cumbersome. Therefore, the transfer of the database to a cloud environment allowed further manipulation of the data. This made it easy to put it into production because it was already in AWS.
The amazing thing about the project is that we achieved the following features, which are fully functional.
The first one is that a user who wants to give in adoption can create his user and inside this one can post a new pet, with name, race, type of pet (dog or cat), a description. He can also change his own information.
The second is that the pets within the database are updated in real-time, being shown in a page dedicated to pets. And in order to facilitate the use of the page by an adopter, a filter was created that is capable of filtering by breed.
The third one is a contact form that allows the page to send an automatic greeting message, saving this information in the PetSpot email account for later information or advertising use.
My difficult technical challenge
The front end was something that took me some time on certain components, but one thing, in particular, was the one that was most difficult for me. This, because I also had to work on part of the backend.
The situation was that when I developed the email connection module, I had to try different methods. At the beginning, guided by a tutorial, I got to a point where I didn’t know how to get the information from the contact form to the execution of the module. So I had to get in deep of the tutorials, many of them didn’t work, until I got an article that gave me light on the connection between React, express and node js.
This article gave me the first step to understanding other resources and tutorials that I had found so I decided to start creating the component where I chose a bootstrap form and to this, I added something additional known as Axios, which allows moving the information written in the frontend form.
Later I developed the connection with nodemailer and other useful methods for the operation of the contact, for them also I had to improvise and create the own mail of PetSpot to handle the shipments from this one.
The problem was that I was doing this on non-API modules and I learned to detect errors through the Network option in the inspector so that I could see the status of each action. When I solved the problem, just integrating the module to the API, the result was interesting, an email sent to the person who submitted their data in the form.
On a technical level, I take some learning in the components of react, some of how endpoints work and their use in the real world. But as always it is a small bite of what the MERN stack represents.
Although, I wish I had practised more the backend part because this stack has grey areas between what is pure back and pure front and perhaps achieved other functionalities on the page, such as the use of a payment gateway, for example.
As an engineer, I have learned that planning is important, but communication between the team is more important. This allows for larger goals to be achieved despite time, coronavirus and many other variables. It also gave me a more global perspective of how a project of this type is done. This is because I used to feel that my mental image was missing pieces of how a website is implemented and put into production.
Although my path is not written in stone, it is interesting to show a potential employer that with my group of friends, we can achieve an MVP of a website in a short time. This demonstrates a quick learning ability which can be a factor in a job interview.
We confirmed that working on a new code editor was a great idea, as we were used to emacs, but it would have been a slow process due to we had to handle connections between several files. Which would have been cumbersome in emacs, but vscode made this task easier.
We conclude that we can learn new technologies to develop a project in a short time and that the development comes from an idea, so if the idea has to touch you at the bottom of your being a new project, in this case, a website will emerge. We were touched by the suffering of the pets and you, what moves your heart?
About me
I’m a curious girl, so much so that I’ve explored various fields, from arts to engineering. I don’t like to be pigeonholed into a role. I studied electronic engineering at the National University of Colombia, and I’m currently completing the foundation stage at Holberton School. I like to help so I am a volunteer at Geek Girls Latam. My LinkedIn link.
Some interesting links
Thank you, and Happy adopting!!
