The project idea

One common thing that new software programming learners do, is to go to supplemental resources, video tutorials, and online forum sites whenever there’s a certain code error that’s hard to figure out. People would go to Stack Overflow for example, to ask technical questions regarding their code. On the same site, students receive different kinds of solutions to their problems or issues. However, whenever they finish building their projects, there’s not one unique platform to submit or showcase their projects in order for them to ask for further feedback, comments, or even suggestions. Unless they post links to their projects on their social media accounts, no one will get to review their projects. The only time that these projects will be seen or reviewed is when they go through a technical review during a job application or recruitment process.

This is probably a daunting task for self-taught learners, like me. Imagine, showing your project to a recruiter for the first time in a while? Although there's enormous support for new learners in the tech community, this is still limited to a small group of people. Not all students have social media accounts such as Facebook or Twitter. Even so, despite having these accounts, there’s still less exposure because of the sites’ algorithm. Study and community groups might help too, but there’s a certain disadvantage. The group members here may have formed friendships along the way and may hesitate to give negative feedback to their fellow students or learners. A big number of learners are still clueless on what kind of project they would build in order to have leverage for being hired. This has always been the number one question, and everyone will just go over to blogs to read more about what to build next. But what if there’s just one platform that you will go to, to check and see what others are building?

There are a lot of community and study groups who are willing to help and volunteer in guiding aspiring software engineers and web developers. With this in mind, I have thought of creating a simple web app which can serve as a platform for learners to showcase their projects. All they have to do is post their projects and anyone can see what they are working on. They can add a description on how they did and the challenges they’ve been through. Their projects can be seen by anyone who is visiting the site, whether from senior software engineers or learners just like them who are also curious about their projects. More than that, they can eventually have proper exposure to potential recruiters, startups or even large companies who are looking for the next qualified candidate. This platform can also be a meetup place where beginners in web development and senior web developers can learn more from each other on how they can improve their code, their project or product. This will also encourage learners because they can explain more casually and confidently on how they did their projects on their own. I also wanted to add features such as a chat box so that the author of the post can directly contact the persons who would give feedback or comments.

The project name

I called this web app “viewRe”. It’s actually just a misspelled word of review where the “re” becomes the last syllable instead of being the first. I had this in mind because I was thinking the learners want their projects to be viewed and reviewed, thus the name of the project. So I added an opening line, “Post your project here. Be seen by a supportive community”. This simple web app is built with HTML, CSS, and Vanilla JavaScript. I’m also using Materialize CSS and Supabase to store data. It’s a single-page web app with a goal to show real-world projects.

The unsuccessful tutorial

This project is for beginners in web development and it is relatively easy to recreate. May I just give you a brief overview of what a web app is. It’s basically more than just a webpage where users can interact with it rather than mindlessly browsing through photo galleries on a portfolio site. I didn’t look that up while I was writing the definition, of course. Now, if you’re a bit confused, don’t worry about it. Fortunately, in programming, it’s better to understand what things are when you start building projects related to these concepts and fundamentals. I wanted to walk you through the web app project with the problem and solution which I have explained from the beginning of this article. But yes, you guessed it right, my project didn’t work. It’s mind-blowing, I know.

This is actually the section where I would tell you to please check all the files that I have added in my Github repository, and then I’ll tell you that once you check all the files, we can create this project together. I also added this disclaimer that I’m no expert. To be honest, I have literally searched for all the relevant coding challenges and projects from video tutorials to documentation and all those sorts. I have opened at least 321 tabs in the past 10 days. I am simply a curator where I curated all these to make one useful, functional project. However, I cannot say this anymore that if ever you have any comments, suggestions, or violent reactions, please let me know in the comment box, because I couldn’t show you the actual project. So, right, my project didn’t magically push through as what I have imagined it to be. I have planned it out for weeks, drew some doodles, and actually started coding for the sole purpose of wanting to write about a project that I also wanted to showcase. Yet, after hours, then days, I have finally given up and asked for help on a discord channel that I have recently joined. I received immediate responses on what to do. I felt relieved and glad, not because the suggestions worked, because of their genuine support. No, the solutions still didn’t solve the errors that kept coming right out from the console. There was even an error on line 108 when there was clearly no single line of code that I wrote there. So, I felt like I saw a ghost when I checked it again and again. It was utterly frustrating yet fulfilling at the same time. Whenever I typed on the input fields and clicked submit, the data would be stored at the Supabase database, but the details wouldn't go to the Projects section. After a while, I couldn't access the database anymore.

This is the full HTML code with Materialize CSS.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="stylesheet.css">    
    <!--Import Google Icon Font-->
      <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <!-- Compiled and minified CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
    <!-- Compiled and minified JavaScript -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>   
    <title>viewRe: Post your software project here</title>
</head>
<body>
    <header>
        <nav>
            <!--Most of the class attributes here are for Materialize CSS -->
            <div class="nav-wrapper teal lighten-2"> 
                <a href="index.html" class="brand-logo left">viewRe</a>
                <ul class="right">
                    <li><a href="#">About</a></li>
                    <li><a href="#">Contact</a></li>
                </ul>
            </div>
        </nav>
    </header>
    <main>
        <div class="container">
            <h4 class="center-align">Post your project here.</h4>
            <h4 class="center-align">Be seen by a supportive community.</h4>
        </div>    
    <section class="input-container">
        <article class="input-container-2">
    <div class="row">
    <form id="post-form">
      <div class="col s12">
        <div class="input-field col s12 m6 l6">
            <i class="material-icons prefix">account_circle</i>    
          <input placeholder="Name" id="name" type="text" class="input" name="owner">
          <label for="name">Name</label>
        </div>
      </div>
      <div class="row">
        <div class="input-field col s12 m6 l6">
          <input type="text" id="pname" class="input" name="pname">
          <label for="project-name">Project Name</label>
        </div>
      </div>
      <div class="row">
        <div class="input-field col s12 m6"l6>
          <input type="text" id="type"  class="input" name="type">
          <label for="project-type">Project Type</label>
          </div>
       </div>
        <div class="row">
        <div class="input-field col s12">
          <textarea id="textarea1" id="description" class="materialize-textarea textarea name" name="description"></textarea>
          <label for="textarea1">Description</label>
        </div>
      </div>
          <button class="btn waves-effect waves-light" type="submit" name="action" id="add">Add Project
        <i class="material-icons right">add_circle_outline</i>
          </button>
      </div>
    </form>
    </div>
    <section>
        <div>
            <ul class="collection-with-header">
                <li class="collection-header"><h4>Projects</h4></li>
                <li id="project-list" class="collection-item avatar">
                <i class="material-icons circle blue-text">folder</i>
                        <span id="project-owner"class="title"></span>
                  <span id="project-name"class="title"></span>
                  <span id="project-type"class="title"></span>
                  <span id="project-description"class="title"></span>
                  <span class="title"></span>

          </li>
            </ul>
        </div>
    </section>        
          </article>    
    </section>   

    </main>

    <footer class="page-footer grey darken-1">

        <p> The viewRe web app is a project by <a href="https://twitter.com/geefealba" class="grey-text text-lighten-3">Geefe Alba</a>.</p>
        <p> viewRe is created for beginners in web development and software programming as a platform to showcase real-world projects.</p>

    </footer>


<script src="https://cdn.jsdelivr.net/npm/@supabase/supabase-js"></script>
<script type="text/javascript" src="app.js"></script>
</body>
</html>

The learning experience

So what have I learned? I’ve learned that even if there are tons of tutorials out there, even websites telling me to copy and paste the code, which I would shamelessly do, the only thing that is between me and my dream project, is console.log. It lets me pull my hair, cry, laugh, and stay awake in the wee hours in just one seating. I can’t believe that supposed tool was actually said to be helpful. I also understand now why web developers are paid generously. No, honestly. I’ve learned that there really is great support from people in the tech industry. And if you are a beginner web developer student or learner, who is in this stage of talking to yourself while writing code, just like me, let me say, let’s not give up, because this is where we should be. Yes, I would continue working on my project, just after I drink more water to calm myself.

If you like to see the JavaScript code, please check below. Please note, it's not working. If you have navigated your way through the code and made the project worked, please share with me how you did it and thank you very much, in advance!

//This is for initializing Supabase, just fill the values of url & key
const { createClient } = supabase;
const supabase = createClient(url, key);


const projectList = document.getElementById('project-list')
const form = document.getElementById('post-form');
const name = document.getElementById('name');
const pname = document.getElementById('pname');
const type = document.getElementById('type');
const description =document.getElementById('description');

//Saving data to database
form.addEventListener("submit", async (e) => {
  e.preventDefault();

  const { value } = document.querySelectorAll('#name, #pname, #type, #description');

  const { data, error } = await supabase.from('projects').insert([
  { 
    name: name.value,
    pname: pname.value,
    type: type.value,
    description: description.value,

  },
    ]);
  postProjects();

});

//This gets data from database
const postProjects = async () => {
  const { data, error } = await supabase.from("projects").select(); 
  let list = "";

  data.forEach((project) => {

  list += `<span class="title">"${project.name}"</span>
        <span class="title">"${project.pname}"</span>
        <span class="title">"${project.type}"</span>
        <span class="title">"${project.description}"</span>
  `;

});

  projectList.innerHTML = list;
};