Creative Work

GrainCircuit is a comprehensive web application designed to streamline bookmark management. Developed as the capstone project of CS50 Web Programming with Python and JavaScript, this application offers a more intuitive and visually engaging way to organise, sort, and interact with bookmarks.

GrainCircuit provides a clean, intuitive interface that allows users to organise their bookmarks effortlessly. Its core features include:

• Bookmarks/Index: Displays all saved URLs.
• Unsorted: Collects bookmarks that have not been categorised yet.
• Trash: Stores deleted bookmarks, with the option for permanent removal.
• Categories: Allows users to create custom categories with color-coding for easy identification.
• Profile: Allows users to update their profile picture and username.
• Settings: Provides options for modifying email, password, and deleting the account.

Bookmarks are presented as interactive, rearrangeable cards, each displaying its associated image, title, category, and date. Users can further enhance organisation by adding custom tags to bookmarks. By default, two categories—"Unsorted" and "Trash"—are automatically created for each user, while additional categories can be customised with a unique name and one of eight predefined colours. A search bar helps users quickly find bookmarks by title, category, or tags, and pagination is used to manage large collections.

GrainCircuit’s backend is built with Django, responsible for user authentication, bookmark management, and metadata extraction. JavaScript manages dynamic interactions like drag-and-drop functionality, colour selection, sorting, and pagination. The project uses a hybrid rendering approach, combining server-side rendering with Django's templates and client-side dynamic content managed by JavaScript.

The development of GrainCircuit was an individual effort, carried out as a part of my capstone project. While no external collaboration was involved, this personal project was instrumental in refining my ability to manage a full-stack development process from concept to completion. Throughout the project, I was responsible for every aspect—from initial design and database modelling to implementing dynamic front-end functionality and testing. This independence allowed me to cultivate a strong sense of ownership over the project and to develop critical problem-solving skills in areas such as UI/UX design, back-end logic, and API integration.

• Model Creation: Designed and implemented database models to represent the application's data.
• View Development: Created views to handle user requests and return appropriate responses
• URL Configuration: Mapped URLs to views for routing logic.
• Forms Handling: Created and processed forms for user input.
• Authentication: Implemented user authentication to control access.
• JavaScript Logic: Wrote JavaScript code to manage dynamic user interactions.
• AJAX Requests: Enabled seamless data fetching and updates through asynchronous requests.
• Integration Ensured smooth communication between backend and frontend components.
• Testing: Developed unit tests to ensure functionality and correctness.

The core functionality of GrainCircuit, including dynamic URL metadata fetching, drag-and-drop bookmark sorting, and mobile responsiveness, introduced additional complexity. Implementing a reliable fallback system for fetching high-quality metadata (using BeautifulSoup and Google’s Knowledge Graph Search API) was crucial in addressing cases where low-resolution favicons were fetched. Additionally, customising the drag-and-drop functionality for bookmarks and categories using the SortableJS library required in-depth analysis and careful design to ensure that URLs were not inadvertently opened during the dragging process. Lastly, ensuring the site was fully mobile-responsive involved implementing a set of media queries, careful CSS restructuring, and extensive testing across devices.

Python Django JavaScript AJAX HTML CSS Responsive Design Bootstrap Git SQL REST APIs BeautifulSoup SortableJS

The development of GrainCircuit has been a rewarding journey, reinforcing my understanding of web development principles and their practical application. Utilising Django as the core framework and JavaScript for dynamic interactions, I successfully built an application that met the course requirements, ultimately contributing to the completion of my certification. Key features, including drag-and-drop organisation powered by SortableJS, and API integration for rich content previews, have significantly enhanced the app’s functionality while offering valuable learning experiences. While there remain opportunities for further refinement, I am pleased with the final product and my ability to balance technical proficiency with the creation of intuitive and user-friendly software solutions.