Creative Work

GrainCircuit is a full-fledged, user-friendly web application for managing bookmarks and URLs. Designed with simplicity and efficiency in mind, it provides users with an elegant way to organise, categorise, and interact seamlessly with their bookmarks.

GrainCircuit is more than just a bookmark manager. It is a platform that transforms how users interact with their saved URLs.

• Registration and Authentication: Secure user registration and login.
• Sidebar Navigation: Intuitive menu for quick access to app sections.
• Account Management: Update profile information, reset passwords, and manage account settings.
• Bookmarks Management: Add, edit, search, and delete bookmarks with ease.
• Category Management: Customise categories with names and colours for better organisation.
• Drag-and-Drop Sorting: Intuitive drag-and-drop functionality for rearranging bookmarks and categories.
• Search Bar: Quickly locate bookmarks by title, category, or tags.
• Pagination: Efficiently handle large collections of bookmarks.
• Mobile Responsiveness: Fully optimised for mobile and desktop devices.

• Visual Organisation: Bookmarks are displayed as interactive, visually rich cards featuring metadata such as images, titles, categories, and dates.
• Customisation: Users can personalise their experience by creating custom categories, assigning colours, and adding tags.
• Efficient Workflow: Default categories like "Unsorted" and "Trash" help keep bookmarks organised automatically, with powerful search and sorting features to streamline navigation.

• The application is built with Django on the backend, complemented by JavaScript for dynamic features like drag-and-drop functionality and real-time updates.
• Utilizes server-side rendering for initial pages while integrating dynamic JavaScript for enhanced interactivity.
• Implements a modular design for scalability, with custom Django apps for features like user management, bookmarking, and category organization.
• Includes a PostgreSQL database for robust data handling, ensuring data consistency and scalability.

• The application is containerized using Docker, simplifying deployment and environment replication.
• Configured GitHub Actions for Continuous Integration (CI).
• Deployed on Azure Web Apps, leveraging the platform's scalability and availability.
• Static and media files are stored in Azure Blob Storage, with automatic management using Django's collectstatic during deployment.
• Docker images are built and pushed to Docker Hub, ensuring reproducible deployments.

The development of GrainCircuit was an individual effort. 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.

• Database Models: Designed and maintained models to represent application data effectively.
• User Management: Extended Django’s default user model with additional fields and functionality.
• Views and Interactions: Developed backend views, AJAX functionality, and JavaScript for dynamic features.
• Form Handling: Built and validated forms to process user input securely and efficiently.
• File Storage: Configured Azure Blob Storage for scalable handling of static and media files.
• Testing: Created unit tests to ensure functionality and reliability of critical features.
• Version Control: Managed code quality and collaboration using Git and GitHub workflows.
• Technology Integration: Migrated from SQLite to PostgreSQL, containerised with Docker, and deployed to Azure Web Apps.

Developing GrainCircuit introduced several technical challenges, particularly in ensuring dynamic functionality, seamless integration, and scalability. Implementing a reliable fallback system for fetching high-quality metadata addressed issues with low-resolution favicons by leveraging BeautifulSoup and external APIs. Customising drag-and-drop functionality for bookmarks and categories using SortableJS required careful event handling to prevent inadvertent URL openings and ensure smooth user interactions.

Migrating the database from SQLite to PostgreSQL involved resolving schema alignment and maintaining data integrity. Setting up CI/CD pipelines with GitHub Actions required securely managing environment variables and automating deployments to Azure Web Apps. Ensuring mobile responsiveness and cross-browser compatibility demanded a combination of media queries, CSS restructuring, and testing across various devices and platforms. Additionally, configuring Azure Blob Storage for static and media files posed challenges in optimising caching and cost efficiency.

Python Django JavaScript AJAX HTML CSS Responsive Design Bootstrap Docker Azure Web App Azure Blob Storage Git GitHub Actions PostgreSQL REST APIs BeautifulSoup SortableJS

The development of GrainCircuit has been a rewarding experience, deepening my understanding of web development principles and their practical application. Leveraging Django for backend functionality and JavaScript for dynamic interactions, I implemented key features such as drag-and-drop organisation with SortableJS and API integration for rich content previews. The project provided valuable insights into integrating diverse technologies, including database migration to PostgreSQL, containerisation with Docker, and deployment to Azure Web Apps via Docker Hub. While there are opportunities for further refinement, this experience has strengthened my technical skills and ability to create intuitive, user-focused software solutions.