My Third General Assembly Project

The Expressway to Fullstack.

Image 1: Landing Page

What is Express?

According to their website, Express is a ‘fast, unopinionated, minimalist web framework for Node.js’. I tend to think library is a more accurate term, but that’s just semantics. Basically, Express abstracts some of the more verbose and boilerplate code in Node.js, and makes it extremely simple to set up a local development server in short time. Most importantly, Express enables you to build a RESTful API, which acts as a bridge between the frontend and a database — yes, Fullstack!

How does a fullstack app function?

I find myself to be more a visual learner, and thus a diagram usually makes things a lot clearer.

Image 2: Simplified Fullstack Diagram
// An axios GET call for some data.axios.get("/categoriesbackend")
.then((res) => { // JSON response handled here })
.catch((error) => { // error handled here });
// a GET route in the category controller.categories.get("/", (req, res) => {    // query to database here    ...
res.send({ data: someJSONData }) // JSON data sent to frontend
});
// a Model.find query which retrieves all documents from the database
Category.find({}, (err, categories) => { // callback function
if (err) {
res.status(400).send({ message: "Unable to find categories." });
} else {
// successful query handled here.
res.status(200).send(categories);
}
});

How does BestestBuy work?

Bestest Buy is a straightfoward e-commerce based application. These are its features:
1. View categories of all products on landing page.
2. User registration for signup/login.
3. Add to cart protection for registered users.
4. Retrieve order history.
5. Admin page to add new products/categories.

Image 3: Product Details Page
Image 4: Cart/Checkout Page
Image 5: Order History Page

Approach to Product Development

Frontend and Backend work was split equally amongst 3 members, providing exposure for all team members to working across the entire stack. The emphasis was on crossing of frontend/backend connections to simulate real-world development as closely as possible.

Image 6: Work Split (green represents my work)

Challenges Faced

Challenge 1: Communication
Communication was a learning curve especially since it was the first time collaborating using git version control. We did not have time to work out JIRA, and so relied on a conventional chat app. While this was flexible, it meant constant and sometimes confusing updates, resulting in multiple erroneous PRs made and accidental merging of incomplete branches resulting in lost code. Development was slowed a result.

Areas for Improvement

As with previous projects, lots to improve!

  1. Validation — Form validation is quite important for both frontend and backend. Assumption is that you cannot trust the user to enter clean information.
  2. Tests — As app gets more complicated, tests will help ensure that functionality is working as expected. Did not have time to delve into testing, but this is an important skill that I probably need to dedicate some time to down the road.

Conclusion

Project 3 was actually my favourite project and one that I use to talk about during interviews due to the many elements that came together. Despite the simple look and functionality, a fullstack project is not that straightforward to build, made even tougher when communicating across a team. Despite the difficulties and hiccups, some debugging and a good postmortem led to a product I am quite proud of!

A Singaporean perspective. Sometimes I write. Sometimes I code. Mostly I watch lots of movies.