Concept

A conversation I had with a friend of mine who is an educational administrator prompted me to build Bloom Explorer as a resource for teachers trying to improve their teaching of critical thinking in the classroom. I decided to explore the Vue.js framework dor this project, and I decided to intentionally keep the interface as minimalist as possible to allow teacher to find helpful content quickly and without the need to create an account or pay any fees. The result was a better understanding of Vue.js, REST apis, and LLM prompting for productive results.

The first iteration included a simple way to explore topics for grades 3-8. I was able to generate content in JSON format that was easily added to my Mongo No-SQL database by leveraging the strengths of several LLMs. I had ChatGPT research state standards, curriculum guides, and other educational resources to comile a list of topics for these grades over a span of several subject areas. I then had Gemini use this list to generate questions for Bloom's Taxonomy levels for each topic, as well as providing the other details like a unique slug and JSON format to fit the DB schema.

Database & API

After I had the initial prototype functioning, it seemed like a great opportunity to really put some work into making the application api RESTful, as the scope was small enought to really take time to implement pagination, querying, and providing static links for a read-only database api. I found the process pretty straight-forward thanks to Express, Mongoose, and the countless resources that exist about designing restful APIs. The api now exists at the "api" subdomain for the site and is freely accessible for anyone looking to integrate it into their projects. The API is rate limited, and documentation is available at the index ('/') endpoint.

Below is the primary query endpoint handler for the /concepts endpoint. It validates and cleans query input to return structured responses with pagination data, links to individual records, and clear error messages for debugging.

Vue.js

I decided to use Vue.js for the front-end of this project as it was a great fit for the project's needs. I used the Vue.js Composition API to manage state and make API calls to the backend. The project is fully responsive and works on mobile and desktop. I also used Tailwind CSS for the styling, which was a great choice for the project's needs. I also used the Vue.js router for navigation and the Vue.js devtools for debugging.

I really enjoyed exploring the Vue.js framework in this project. A few things that stood out to me were the ability to list for and emit structured events between parent and child components. This was a striking difference from the React framework where the data consistently travels down and only down. The 'v-model' directive was also a great feature to quickly link inputs to state variables. Even in TypeScript, it seemed Vue.js was easy to set up (using Vite), and simple to implement. Once I learned Next.js I quickly prefered it to React. I will be curious to see if the same is true for Nuxt in future projects.

Future Improvements

I plan to continue to improve the application's functionality and user experience. I plan to regularly add content to the database, as well as add a bug-reporting function so users can quickly alert me of any data inconsistencies that need to be ironed out. Eventually, I hope to expand the functionality of Bloom Explorer to leverage an LLM api where users can quickly create lists of Bloom's Taxonomy questions for any topic they choose.