The making of Destructables experience

My very first full-stack web application. Being a noob, I was very eager to get started working on this project. This was a team project with two other people who also had a beginner level understanding of full-stack development.

What does it use?

Destructables uses vanilla JavaScript to manipulate the document, and Express.js as the back end. It also uses Pug Templates to render a lot of the HTML. Building this project was quite the learning experience and made it quite easy to transition to React.js.

MVPs

Authentication/ authorization
Create, read, update, delete projects
Writing comments (my primary role)

Collaboration

Picking a project

Since this was our first project, and a group one at that, we had shorter lectures so we could document and plan out our project. The website we decided to clone was Instructables, where people share how to create things, but we decided to do the opposite on how to disassemble and call it Destructables.

Struggling as one

All of us were struggling, this is unlike other group projects I've worked on where I'm pulling the weight of all those slacking off, and getting into micro aggressions. We felt on top of the world whenever we make progress but will feel felt imposter syndrome when we weren't. It was easy to get along with each other when when we are all on the same boat.

It took a while getting used to Git as a team

Using GitHub and dealing with merge conflicts was an experience in itself and would sometimes take an entire morning just fixing it. I think we even attempted to collaborate by pasting our code on slack and combining them because it was taking too long for us to fix our Git. It was only after failing dozens of times, until we got better at create branches, and working on separate features. After we learned how to use Git, it became in invaluable tool for us. Two forces collide with subtitles saying Git Merge and chaos ensues

Even though all of us struggled, it was very crucial for all of us to put our heads together to fit our knowledge gap which was why each of us had front-end and back-end tasks. Authorization/ authentication has been one of my weaknesses and I still struggle with it to this day. I would even say that all three of us don't fully understand auth but still attempted to implement it. Each of us would brainstorm to help us all get on the same page, and we were able to get far until we had some password hashing issues, persistent login, JSON web token which none of us knew how to solve. Our instructors were also there to help us out if we're stuck, and showed all three of us how it was done.

Each of us had our own strengths and weaknesses, I was weaker on the back-end, another weak on the front-end, and one was almost decent at both. My team mates would help me out when I had to work with the database and it was pretty easy to pick up. In turn, I would help them with styling. After we finished helping each other, we would treat each other more with respect.

Directly copying from the source is no good

You know that feeling when you discover something you think is a secret and want to exploit it without letting one know? That was how I felt when I started using the Chrome elements inspector and copying the entire page without changing anything.

shiba typing Coder copying dom elements and calling it his own.

Before I went to App Academy, I actually used to be a script kiddy like this and just flat out use the same code even if I had no clue how it works. Just when people say tutorial hell is a beginner's trap, I think being a code snatcher is even worse. At least doing tutorials will give us some knowledge while taking other people's work, even if it's allowed, just complicates things since I don't understand it. Even though I copied with the intention of saving time, it does the opposite and wastes more time in the long run when problems arise.

Lesson learned, straight out copying and pasting the entire DOM from the element inspector is not the way to clone a website.

me after I broke out of the habit.

Re-using functions to create elements

It only took a few hours of failing until I completely got out of the code sniping phase habit. Using JavaScript to manipulate the DOM has been a huge part of our curriculum so far and was easier and more fun to work with. This is a lot cleaner, easier to understand, less lines of code, and easier to manipulate compared to copying an entire page with lots of messy classes, divs, etc.

async function createProjectElements() {
   projects.forEach(function (project) {
       const projectDiv = document.createElement('div');
       const currentTimestamp = Date.now();
       const projectTimestamp = new Date(project.updatedAt).getTime();
       const timeAgo = timeDifference(currentTimestamp, projectTimestamp);
       let projectImage = '/public/images/loginSignup.png';

       projectDiv.classList.add("col-lg-3");
       projectDiv.id = (`project-container-${project.id}`);
       if (project.images) {
           projectImage = `https://destructables-storage-dev.s3-us-west-1.amazonaws.com/${project.images[0]}`
       }
       projectDiv.innerHTML = `
           <div class="card mb-2">
           <a href="/projects/${project.id}" class="overflow-hidden">
               <img class="card-img-top" src="${projectImage}" alt="Card image cap">
           </a>
           <div class="card-body">
               <a href="/projects/${project.id}" class="card-title font-weight-bold">${project.name}</a>
               by ${project.User.username}
           </div>
           </div>
       `
       containerExploreCategory.append(projectDiv)
   });
}

Async calling and visual re-rendering

This is my first full-stack project at App Academy, and I could definitely write more optimized code than I did back then. For instance, for handling this asynchronous JavaScript and JSON (AJAX) onClick event, I want to add a new entry to the back-end, as well as re-rendering the entire comment list and reorder them in reverse with the createComments() function.

discussionBoxPostButton.addEventListener('click', async function (e) {
       const commentText = discusionBoxTextArea.value;
       if (commentText) {
           const res = await fetch("/api/comments", {
               method: "POST",
               headers: { "Content-Type": "application/json" },
               body: JSON.stringify({ comment: commentText, userId: 1, projectId: Number.parseInt(currentRoute) })
           });
           if (res.ok) {
               commentsDisplayContainer.innerHTML = '';
               comments = await fetchComments(currentRoute);
               discussionBoxPostButton.disabled = true;
               numberOfCommentsDisplay.innerHTML = `${comments.length} Discussions`;
               discusionBoxTextArea.value = '';
               createCommentElements();
           }
           else console.log('failed')
       }
}

I do appreciate that I’m not doing another GET request and this brute force approach is definitely failsafe and easy to imagine. I would probably use flex-direction: column-reverse and add one item without re-rendering the whole thing.

HTML fundamentals aid in learning UI/ UX tech

No matter what technology I use, they all seem to use the basic elements that make up an HTML page. Aside from using vanilla JavaScript to create DOM elements, I also used pug to render pages. I don’t even think we had an index.html in this project at all.

None of us have ever used Pug templates before, but it was so similar to HTML that it was very easy to pick up after googling the things we don’t know. Having knowledge about HTML really takes me a long way, front-end popular technologies like React, Vue etc. I was actually fond of not having to close off tags, but it was also almost as difficult to spot and fix any indentation problem.

Bootstrap is a fantastic way to style components

The title of this header says it all. Bootstrap CSS made it easier for me to learn Tailwind CSS, the way they use classes to style components is almost the exact same thing, I kid you not!

Conclusion

You may view this project live on this http://destructable.herokuapp.com if you haven't seen it yet. It took us a whole morning to figure out how to host this.

Rendering elements and seeing them in action was a spectacle and was my most hyped moment learning at App Academy. This project used no external libraries, which made it easier to look at the source of inspiration and even copy the elements from the Chrome inspector. It also loaded really fast when it was live.

Full stack project with user auth. Well, all projects created at App Academy had auth, it’s the one requirement all projects need, in addition to create, read, update and delete capabilities for the minimum viable product which is different from team to team.