From Front-end to Full-stack web application

As a developer, you have an idea, what do you do? You developed said idea right? So let's get to it, In this article, I'll share my experience on building a web application initially as a front-end project but realizing later on it would be better suited as a full-stack application.

So I always had the idea to develop a career guidance website to help students choose a career path. This is something I struggled with during my final year. After working out the details of the project and finally having a game plan, the real work began;

1. I worked on the design of the project using Figma
2. Setup my project folder and GitHub repo
3. I decided to go with the 16 personality types by Isabel Myers and Katharine Briggs
4. I needed to find an API for the assessment questions, which proved to be harder than I thought it would be, so I ended up generating my questions using the International Personality Item Pool
5. Finally, it was time to write some code

Note: I would like to point out I am no psychology Major so this project is based on what I discovered during my research about personalities and how they can shape our lives.

The coding part was easy for the most part. I used HTML, SCSS, and Vanilla JavaScript for this project. During the implementation phase, I was also in search of a career API during the weekends(I will like to point out that the weekends are a no-code day for me), which like the previous one was difficult to find, the ones that I found were not suited for this project. The next option on the table was to build an API that will meet the requirements of my project. After all, it will be a new learning experience, so why not?

After I reached a point in the project where I couldn't go further without an API, I focused on finding resources to learn how to go about an API. I stumbled on a tweet from the #100Devs crew about how they build an API as an assignment, so fast forward I found the software engineering BootCamp playlist of Leon Noel's #100Devs bootcamp. I focused on the videos about building an API. I learned about Node.js, Express, MongoDB, EJS, and CRUD operations. I first created a small-scale API for characters from the Disney show Gigantosaurus. Then I proceeded to build my API for this project, keeping in mind I am a one-person team, so I limited the courses to only 17 science-related courses.

During the process, one thing that poked my interest particularly was the MongoDB atlas search, which was perfect for my search bar. First I created a search index in my database. Then created an aggregation pipeline using the aggregation pipeline builder on the MongoDB atlas interface. Using the snippet of code generated, I included it in my server.js file, and now I have robust search functionality on my website.

...
app.get("/api/courses/search", (req, res) => {
  const {searchString} = req.query;

dbConnection
    .aggregate([
      {
        $search: {
          index: "searchCourse",
          text: {
            query: searchString,
            path: {
              wildcard: "*",
            },
            fuzzy: {},
          },
        },
      },
      {
        $project: {
          name: 1,
          description: 1,
        },
      },
    ])
    .toArray()
    .then((result) => res.json(result))
    .catch((err) => console.log(err));
  })
...

In the search function above, I've implemented fuzzy matching for spelling mistakes, the wildcard allows us to search in any field in any document, and the $project specify which fields(name, description) are to be returned.

As I was building the API, it crossed my mind that why don't I just build the career guidance website as a full-stack web application, since I am already on the right track? But I need a bit of structure to properly manage the codebase later on and most importantly have readable code. Again Leon to the rescue as he uploaded the MVC (Model View Controller) lecture on his youtube channel.

After going through the video and doing more research, I finally understood the concept of MVC. I'll try to break down what I learned about MVC. MVC is a software design architecture that allows us to separate our code into model, view, and controller. The controller simply listens to requests and hands said requests to the view or model, so basically it's the middle man. For example, a user sends a request by clicking a button, and the controller hears that request and sends it to the appropriate handler. The request could be to navigate to another page, so in this case, the controller will talk to the views to get the page, and then the controller sends the page back to the browser which the user will see. The view simply put is just the user interface. The model here handles the data-related logic, It is the only part that talks directly to the database. For example, when a user clicks on a cart button, our controllers will hand off the request to the model, which returns the data that will be used to update the user interface accordingly.

In short, MVC architecture brings a level of modularity and abstraction. I got to understand why the separation of concerns is important and you don't run the risk of breaking your entire code in case you make changes to one part. Next, I needed to convert my codebase to use the MVC architecture. It was pretty much easy since I have done most of the work. I just copied my front-end files to the views folder in the current working directory. Also, have my routes as well as controllers in their corresponding folders. I should also mention that the entire web application was deployed on Heroku.

And that's it, folks. That's how I built my first full-stack web application. Here is a link to the repo and the live website