The project aimed to create a centralized platform initially showcasing internal network tools and resources such as how-to articles and scripts, later adapted for portfolio purposes to feature books, movies, and video games.
AAppsNTools
Government
February 26, 2024
The project aimed to create a centralized platform for showcasing a diverse range of tools, apps, and resources tailored for the client's internal network. Originally designed to feature how-to articles, Violentmonkey scripts, Jupyter notebooks, Python apps, web apps, and more, the website served as a hub for internal stakeholders to access and explore these resources easily. However, for portfolio purposes, the content was adapted to showcase books, movies, and video games, providing a more varied and engaging display for potential clients or employers. Through the iterative development process, features such as dark mode, search functionality, and favoriting options were implemented to enhance the user experience and ensure easy navigation of the showcased content. Leveraging technologies like Vite, Node.js, and Material UI, the final product emerged as a polished and user-friendly platform, fulfilling the client's original vision while also serving as a compelling showcase for portfolio purposes.
Dark Mode Toggle: Users can toggle between dark and light modes, altering the appearance of the website.
Filtering by Category: Users can filter the displayed content by categories such as books, movies, and video games.
Search Functionality: Users can search for specific titles, years, categories, or summaries using a search bar.
Sorting Options: Users can sort the content alphabetically in ascending or descending order.
Tile Cards Display: Content is displayed in tile cards, providing visual representation of each item.
Tile Card Interaction: Users can interact with tile cards, clicking on them to view additional details.
Condensed/Expanded View Toggle: Users can switch between condensed and expanded views of the tile cards.
Top App Bar: Provides access to various functionalities like dark mode toggle, filtering, searching, and sorting.
Menu Overlay: Displays additional menu options and links when activated, providing access to external content.
Favorites Selection: Users can mark certain items as favorites for easy access.
JSON Entires: Users can update the website easily by adding new websites to the existing JSON files organized by category.
We kicked off the project by diving into conversations with the client to understand what they were after. They were seeking a one-stop-shop where they could flaunt their collection of apps, tools, and other goodies. They wanted it to be slick, easy to navigate, and well-organized.
Armed with the client's wishlist, I doodled up a basic plan centered around tile cards. It seemed like the perfect way to showcase everything neatly. As we progressed, we kept adding new bells and whistles like dark mode, search bars, and favoriting tools for later.
Once the sketches got the nod, it was time to roll up the sleeves and get coding. Using Vite, Node.js, and Material UI, I started building. The tile card layout became the heart and soul of the site, giving each app and tool its own little space to shine. We kept tweaking and adding features like modal overlays for more info as we went along.
With the basics in place, it was time to put the site through its paces. We hunted down bugs and squashed them, making sure everything ran smooth as butter. The client's feedback was invaluable here, helping us fine-tune the design and functionality.
After all the testing and tweaking, it was finally showtime! We deployed the site to the client's internal network, and they were thrilled to have their very own showcase space. But the journey didn't end there. We're always on standby for maintenance and updates, ensuring the site stays fresh and fabulous.
The project was a real team effort, with everyone pitching in to bring the client's vision to life. By keeping things collaborative, we built a website that not only met the client's needs but also achieved their goals.
