My foundations year at Holberton is coming to a close and what better way to recap it then by talking about my end of the year portfolio project. My team’s mission was to create a professional social network where software engineers can find jobs while also making connections. Breaking into the tech industry can be difficult and my team wanted to create an app that can help alleviate some of that burden. Our project is called Kanvas.
The team consisted of Erika, our Project Manager and DevOps, Kevin, our Full Stack Engineer, and myself, the Frontend Developer.
Whenever I think of the name Kanvas, I chuckle a bit because of how it got its name. Erika and I were just bouncing ideas on what our project should be called, we wanted it to be something that didn’t sound too complicated but also expressed the vision and creativity we had in mind for the project. Then Erika thought of calling it Canvas, but there’s already an app with that name out there. Thanks to some prior research I did about coming up with a good brand name, I found that a common tactic to thinking of a good brand name was to purposefully misspell or replace a letter in an existing word. And that was how we came up with the name Kanvas. But now the misspelling serves a purpose. Erika, Kevin, and I really value collaboration and kindness. We wanted the K to represent a core value that each of us value and share.
Want to read this story later? Save it in Journal.
Components are the building blocks of React.
They define how particular elements in the app are viewed. (FYI, the word component will show up quite a bit but that’s just how important they are in React!)
Here I have a simple diagram of how some of the components in Kanvas are structured.
At the top we have the App component that’s also known as the root component because it contains all of the other components (the child components).
Then we have the Menu component which is the navigation bar on our app.
One of the components in the navigation bar is the Posts component.
When you click on one of the posts in our home page it will redirect you to the Single Post component.
And within that Single Post component you have the Comments component nested in it.
Another component in the Menu’s navigation bar is the Users component that displays all the users of our app.
If you happen to click on your own profile then what you will see are three different components: New Post, Edit Profile, and Delete Profile.
However if you’re viewing someone else’s Profile then what you will see instead is the Follow or Unfollow components.
Here I have a more visual representation of what some of our components look like.
The black border around the entire page is the App component and it contains all of the other components.
Within the green border we have our Menu component which is the navigation bar.
Then the blue border contains the Single Post component that contains the post title, image, body, and likes.
And here in the red border we have the Comments component, which is where you can create or delete a comment.
Bootstrap Material Design
Bootstrap Material Design was definitely a time saver. Given the time crunch and scale of our project we knew that creating a website layout from scratch with just React and CSS would have taken longer than desired, so we went with Bootstrap Material Design.
Material Design was used to create the structure for how our site looks. And with the addition of only one line of code in the index.html file, the world of Bootstrap was open to us.
One downside to using Material Design is reading through all of the documentation to see what’s flexible and can be changed. However, if there was an element on the page that still didn’t fit the look I was going for it was easy to override the original style using Sass.
Sass stands for Syntactically Awesome Style Sheets. It’s basically CSS but like 100 times better. Sass is a CSS preprocessor and all that means is that it adds extra features to CSS and gets compiled into regular CSS.
Sass allows you to create variables by using the $ followed by whatever name you give the variable.
You can also create the mixins which are functions that allow you to apply the same styling to multiple elements.
And you can import partial files (which are Sass files that start with an underscore) and nest styling to reduce the size of your style sheet to make it more readable.
And the only place that the Sass file had to be imported for our site was in the App component because that’s the root component and the style basically cascades over all of its child components.
Node JS was used to interact with the backend. Whenever there was a new component to be created I had to make sure to create a route for it.
There were also times throughout the project when we got unexpected errors and it was difficult to decipher whether it was coming from the back or frontend. However, whenever errors like that popped up, I would retrace my steps to see what lines of code I added or deleted and console.log many places to check the logic with Kevin and Erika through Google Hangouts’ screen sharing.
I learned a lot throughout this project. I learned that web development is the path that I want to continue pursuing. React was definitely the biggest learning curve but thanks to the React docs, countless YouTube videos, and my team I was able to push through and move forward. Communication was also very important in all aspects of this project from the planning, coding, and presenting. It wasn’t only a matter of checking in to know whether we met our project deadlines but checking on each other’s well being. And I’m glad I worked and will continue to work with my team to see what new and exciting projects we can come up with.
I’m a Bay Area native that was born and raised in Oakland. To me, the tech industry has always had this impenetrable bubble around it and that use to intimidate me, but I realized that if there isn’t a place for me in tech at the moment, I’d rather go and make it for myself than wait. Nine months ago I never would’ve thought that I could create an app with others while working remotely but here it is: