The Expressway to Fullstack.
9 weeks into the course, and this is where everything stared to come together. The first two projects in GA were simply front-end — jQuery and React, but with knowledge of Node.js and Express, I finally had the ability to build a fullstack app. This was also the first collaboration project in a team, meaning my Git version control was put to the test with proper branching and pull requests. Let’s get into it!
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.
Frontend:
Built with React, and is able to make AJAX calls to the server with either vanilla JS fetch or with a package that I use, like axios. Essentially HTTP requests that send/receive data to the ROUTES available in the server.
// An axios GET call for some data.axios.get("/categoriesbackend")
.then((res) => { // JSON response handled here })
.catch((error) => { // error handled here });
Server:
Built with Express, based on RESTful API. A RESTful API needs to include certain semantic methods: GET, POST, PUT, DELETE. These HTTP methods are the ‘bridge’ that allow connections to be made and data to be exchanged between the frontend and backend. With a database, you can then perform Create, Read, Update, Delete (CRUD) operations.
// a GET route in the category controller.categories.get("/", (req, res) => { // query to database here ...
res.send({ data: someJSONData }) // JSON data sent to frontend
});
Database:
Built using MongoDB with Mongoose. MongoDB stores data in JSON files that are similar o JavaScript objects. It is non-relational and is very flexible as objects are not required to have the same properties to be stored in the same collection, the equivalent of a table in a SQL database. Mongoose is an Object Document Modeller (ODM) that simplifies querying of the database. A sample query:
// 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.
CSS Framework Used:
Material UI, a great alternative to Bootstrap. Similar to Bootstrap, MUI is a component based library that makes it simple to build responsive projects. Its also based on CSS flexbox and grid system.
Pros:
- Comprehensive list of components and icons, rarely have to leave the framework
- Beautiful design
- Great and relatively easy to understand documentation.
Cons:
- Not immediately apparent which is the base wrapper element (i.e in Bootstrap it’s a container div)
- Every component has to be imported from the package, which gets bloated real quickly.
- Custom makeStyles API which contributes to clutter as more styles are applied to components
Screenshots
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.
Each member worked on their own branch, with a PR made once each ‘feature’ was complete.
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.
Challenge 2: Deployment
Each machine had slightly different configurations and thus source code had to be set up to run on each environment. This took some time to figure out, and underscores the importance of establishing common ground at the start to reduce problems down the road. Deployment hit a wall at the end due to two issues:
1. CORS not configured correctly.
2. Frontend bug: Data was being rendered in a component while awaiting response from backend causing ‘undefined’ cascade error.
Areas for Improvement
As with previous projects, lots to improve!
- User information — User information object stored inside session storage which actually isn’t super secure. Storing some information in session/local storage is fine, but definitely keep it as bare as possible (non-PII), only what is absolutely needed for app to function.
- Validation — Form validation is quite important for both frontend and backend. Assumption is that you cannot trust the user to enter clean information.
- 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!
The fourth project is something I will discuss soon, so let me know if you have any feedback/comments thus far about my projects!
