DEV Community

Josh Endemann
Josh Endemann

Posted on

Today’s Progress: Implementing APIFeatures

Introduction

Today, I focused on implementing APIFeatures in my band's website. This functionality includes filtering, sorting, pagination, field limiting, and aliasing. I gained these skills from a Udemy course and applied them step by step to enhance my project.


Creating Sample Data

To start, I created a variety of products in my merchController. These included a Din hat, shirt, sweatshirt, CD, and vinyl. Each item had unique attributes such as different quantities and prices. This allowed me to test each feature against a realistic dataset and ensure my implementation worked as intended.


Step-by-Step Implementation

Initially, I built all the features directly within the merchController.js file. As I worked, I tested each feature using Postman to verify its functionality:

  • Filter: Allowed querying products by attributes like price or quantity.
  • Sort: Enabled sorting by attributes such as price or date created.
  • Pagination: Broke down results into manageable pages.
  • Field Limiting: Returned only specified fields in the response to reduce payload size.
  • Alias: Created an alias route (/top-5-merch) to display the cheapest merchandise.

Once all the features were functional, I refactored my code. I extracted the logic into a reusable APIFeatures.js utility file located in a utils folder. This improved the structure and readability of my code. I then imported APIFeatures into merchController.js and cleaned up the controller by replacing inline logic with modular methods from APIFeatures.


Key Takeaways

While refactoring, I learned how to effectively use this.query and this.queryString in place of req.query and query. This approach made the code more reusable and modular. I also revisited how to use Postman to test features, entering various query parameters to confirm the functionality of my code.

Additionally, I implemented an alias for the route /top-5-merch. This feature displays the cheapest merchandise in the database. Moving forward, I plan to incorporate similar aliases in other controllers. For instance, I envision creating a "top tracks" feature to showcase the most-played or most-liked songs once fans can "like" tracks.


Next Steps

Now that I have integrated APIFeatures, I will continue learning through my Natours project. Practicing new concepts from the course in both projects has proven to be an effective way to solidify my understanding. I will keep building on this foundation and add new features as I progress.


Conclusion

Today’s work was a significant step toward making my band's website more robust and user-friendly. By focusing on practical application and refactoring, I improved both the functionality and maintainability of my project. I’m excited to continue this journey and further enhance my skills.

Feel free to check out my GitHub repository for this project here, and don’t hesitate to connect with me!

Top comments (0)