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.
Registration and authentication.
Sidebar menu and navigation.
Account profile and settings.
Adding bookmarks.
Bookmark settings.
Adding categories.
Category settings.
Drag-and-drop functionality to organise bookmarks and categories.
Search bar functionality to quickly filter bookmarks and categories.
Pagination functionality for managing large bookmark collections.
Responsive design to adjust to multiple mobile resolutions.
Project Details
GrainCircuit is more than just a bookmark manager. It is a platform that transforms how users interact with their
saved URLs.
Features
Registration and Authentication: Secure user registration and login.
Sidebar Navigation: Intuitive menu for quick access to app sections.
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.
Key Benefits
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.
Development
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.
Deployment
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.
Team and Collaboration
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.
Key Responsibilities
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.
Challenges
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.
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.