Catch-Up is an innovative blogging platform where users can effortlessly share their experiences, reviews, and thoughts through text, images, and video links. The application is designed to categorize blogs for seamless navigation, offering a personalized and engaging user experience. Developed using Django REST Framework for the backend and React Js for the frontend, Catch-Up promises a responsive and contemporary user interface.
The essence of Catch-Up lies in its user-centric approach, encouraging users to freely express their thoughts on various subjects. Whether it's an adventure in a new country, a critique of the latest tech gadget, a fitness video tutorial, or daily musings, Catch-Up is the perfect space for sharing. Users can also follow others, like their posts, and keep themselves updated with the latest blogs in their interest areas.
The platform's intuitive design allows users to easily navigate through categories, find interesting blogs, or discover new content. When no posts are available in a category, a friendly message guides the user back to the plethora of other content.
Catch-Up also features detailed user profiles, showcasing the blogger's interests, number of followers, and their blogging journey. Each profile is a window into the user's world, with every blog they've posted available for readers to explore and enjoy.
For a detailed guide on the backend API of Catch-Up, please refer to our comprehensive documentation. To learn more about the React frontend, click here.
Live Demo: Catch-Up Blogging Platform
- Catch-Up Overview
Generated with TOC Generator
The journey of Catch-Up began with crafting user stories to define the functionality and aesthetic of the platform. By questioning what users would expect and desire from a blogging site, I could pinpoint the necessary features and design elements to incorporate.
For data structure visualization, I used DrawSQL to create an organized and clear representation of the database schema, illustrating the interconnections between various data tables.
Below are the custom data models tailored for Catch-Up:
Given that Catch-Up is primarily a blogging platform, the blog post model was customized to accommodate full-length blogs with embedded images and video URLs. Essential fields like 'excerpt' and 'category' were included to enhance the structure of each post.
To facilitate blog sorting, a dedicated 'Categories' model was implemented. This model connects to the blog posts, enabling each post to be associated with a specific category. The model was designed for simplicity and ease of integration.
The 'Comments' model allows users to engage with blog posts, providing spaces for posting, editing, and deleting comments. This interaction is vital for a lively community experience on the platform.
The 'Followers' model tracks the connections between users, defining who follows whom. This feature enriches the social aspect of Catch-Up, allowing users to cultivate their own community within the platform.
The 'Likes' model lets users express their appreciation for posts. This simple yet impactful feature enhances user interaction and provides valuable feedback to bloggers.
Each user's profile on Catch-Up is detailed with personal information, including a bio, avatar, and blogging history. This personal touch adds depth to the user experience and fosters a sense of community.
The table below outlines the various API endpoints and their corresponding functions:
| Endpoint | Description | Method | Operation | Type |
|---|---|---|---|---|
| Endpoints for Comments | ||||
| api/comments/ | Gathers all comments made by a user on a selected post | GET | Read | List |
| api/comments/id/ | Allows modification or removal of a user's comment based on its unique ID and ownership or admin rights | PUT | Update/Delete | Detail |
| Endpoints for Followers | ||||
| api/followers/ | Displays a list of all follower relationships, showing who follows whom | GET | Read | List |
| api/followers/id/ | Fetches or erases a specific follower connection based on ID, applicable to the profile owner | GET/DELETE | Read/Delete | Detail |
| Endpoints for Likes | ||||
| api/likes/ | Lists all posts liked by a user | GET | Read | List |
| api/likes/id/ | Removes a like from a post, identified by ID, if executed by the like owner | DELETE | Delete | Detail |
| Endpoints for Posts | ||||
| api/posts/ | Lists all posts, focusing on those liked by the user | GET | Read | List |
| api/posts/id/ | Provides, alters, or removes a post contingent on ID and user's ownership or administrative status | PUT | Update/Delete | Detail |
| Endpoints for Profiles | ||||
| api/profiles/ | Enumerates all created user profiles | GET | Read | List |
| api/profiles/id/ | Retrieves, modifies, or deletes a user profile based on ID and ownership | PUT | Update/Delete | Detail |
| Endpoints for Categories | ||||
| api/category/ | Enumerates all posts by category and allows for new post creation | GET/POST | Create/Read | List |
Catch-Up leverages the power and flexibility of Django and Django Rest Framework for its core development. This foundation is augmented with a variety of additional libraries and tools to enhance functionality and user experience:
-
django-cors-headers: An essential Django application, it integrates Cross-Origin Resource Sharing (CORS) headers into server responses. This feature is crucial for allowing the API to handle requests from various origins, not limited to its own host. More details can be found here.
-
django-cloudinary-storage: This tool is integrated for seamless image management, enabling the storage of user profile images on Cloudinary. This implementation ensures efficient and reliable image handling. Discover more at django-cloudinary-storage.
-
dj-rest-auth: It provides a set of REST API endpoints for authentication processes including login and logout operations, simplifying the authentication flow within the application. For further information, visit dj-rest-auth.
-
djangorestframework-simplejwt: This library offers JSON Web Token authentication, adding an extra layer of security for the API. It ensures safe and secure user authentication. Learn more here.
-
django-filter: Utilized for its powerful filtering capabilities, especially in implementing ISO DateTime filtering for events' GET endpoints. This allows the application to efficiently handle date range queries. More on this can be found at django-filter.
-
dj-database-url: This library plays a critical role in configuring database connections through environment variables, thus streamlining the database setup process. It is particularly effective for managing different environments. Additional information is available here.
-
psychopg2: As a database adapter, it facilitates interactions between Python and PostgreSQL databases, ensuring smooth data handling and operations. More details can be found at psychopg2.
-
I Am Responsive: This is a tool that I used to ensure that the website is well-optimized for various devices. This tool helps in visually confirming that the website adapts to different screen sizes, which is crucial for a good user experience across smartphones, tablets, and desktops. More details can be found at I Am Responsive
-
Coolors: For color scheme creation and ensuring good color contrast, This tool is extremely helpful for designing an accessible and visually appealing interface. It provides a simple and effective way to check and create color contrasts and palettes. Coolors.
-
Axios : Used for making HTTP requests. Axios
-
FontAwesome: Provides icons used in the project. FontAwesome
-
Cloudinary: Hosts user profile images. Cloudinary
Each of these tools and libraries has been carefully selected to ensure that Catch-Up delivers a robust, secure, and efficient user experience, aligning with the latest industry standards.
I conducted extensive manual testing to ensure each API endpoint functioned as intended. This process involved using both the local server interface and the deployed database.
Automated tests were implemented to further validate the functionality, particularly for post creation and management. These tests, found in the tests.py file, simulate various user interactions and check for expected outcomes.
All Python code was validated using the CI Python Linter to ensure adherence to best practices and coding standards.
The design of the Catch-Up application is centered around providing a user-friendly and intuitive experience. Our goal was to create an interface that is easy to navigate, visually appealing, and accessible to a wide range of users.
- Primary Color: #f4980a - Used for primary action buttons and links to draw attention and maintain consistency.
- Secondary Color: #010038 - Applied to secondary elements and to provide visual contrast against the primary color.
- Background Color: #ffffff - A clean white background to ensure readability and a modern look.
- Main Font: "DM Sans", sans-serif - Chosen for its readability and modern feel, which aligns with the overall aesthetic of the application.
- Headings: 'Montserrat', sans-serif - Used for headings to add a distinct and stylish look that complements the main font.
- The layout is structured to provide a clear hierarchy of information, with a focus on content discoverability.
- Navigation is designed to be intuitive, with a top navigation bar that provides easy access to all major sections of the application.
The Catch-Up application leverages the power and flexibility of React Bootstrap to enhance its user interface and user experience. React Bootstrap, a front-end framework, has been instrumental in developing responsive design elements that are both functional and aesthetically pleasing.
Several key components of React Bootstrap have been utilized throughout the development of the app, including:
- Navbars and Dropdowns: To create a consistent and accessible navigation experience across all pages.
- Forms and Modals: For interactive and responsive user input forms, enhancing the functionality of creating and editing blog posts.
- Buttons and Alerts: To provide immediate feedback to users through visually appealing buttons and alert messages.
- The grid layout system of React Bootstrap was employed to create a responsive and adaptable interface that ensures a seamless experience on devices of all sizes.
- While React Bootstrap provided a robust starting point, significant customization was done to align with our unique design language. This involved tweaking colors, padding, margins, and typography to fit our specific aesthetic needs.
- Consistency: React Bootstrap’s component-based structure helped maintain a uniform look and feel across the application.
- Efficiency: It significantly sped up the development process, allowing us to focus more on unique features and user experience enhancements.
- Responsiveness: It was key in building a layout that responds elegantly to different screen sizes, enhancing accessibility and usability.
- Responsive Design: Ensuring the application is fully responsive and accessible on various devices and screen
sizes was a key focus. This approach enhances user engagement across desktop and mobile platforms.
- User-Friendly Forms: Forms for creating and editing blog posts are designed with clarity and ease of use in mind, featuring well-labeled fields and straightforward navigation.
- High contrast color ratios were selected to accommodate users with visual impairments.
- The application is keyboard-navigable and screen-reader friendly, ensuring accessibility for users with different abilities.
During development, several challenges were overcome, including:
-
Category Selection Bug: Resolved by aligning frontend selection options with backend category values.
-
Database Migration Hurdles: Addressed by resetting and properly migrating the database.
-
CSRF Token Issue: Solved by adjusting the development environment settings.
-
Avatar Image Display Issue: Initially, the Avatar component was not displaying images correctly in certain contexts. This issue was addressed by:
-
Ensuring Correct Image Path: Verified and corrected the image source paths to ensure they were accurate and accessible, both in development and production environments.
-
Implementing Fallback Mechanism: Enhanced the Avatar component to include a fallback mechanism. When the primary image source fails (e.g., due to a broken link or if the image is not yet set for a new user), the component now defaults to a predefined image, ensuring that a user avatar is always displayed.
-
Integration with React-Bootstrap Styles: To maintain visual consistency with the rest of the application, the Avatar component was adapted to include React-Bootstrap's styling classes, ensuring that it aligns with the overall look and feel of the application.
-
Testing and Validation: Conducted thorough testing across different scenarios (valid image URL, invalid URL, no URL) to confirm the robustness of the Avatar component in handling image display and fallbacks.
-
Currently, there are no unresolved issues in Catch-Up.
This guide will help you deploy the Bloggerize API to Heroku using a Postgres database through ElephantSQL and Cloudinary for hosting user profile images.
- Fork or clone this repository from GitHub.
- Create a Cloudinary account for hosting user profile images.
- Login to Cloudinary and select the 'Dashboard'.
- Copy the 'API Environment variable' value starting from
cloudinary://. You may need to select the eye icon to view the full environment variable.
- Login to Heroku.
- Select 'Create new app' from the 'New' menu at the top right.
- Enter an app name and select the appropriate region.
- Click 'Create app'.
- Login to ElephantSQL.
- Click 'Create new instance'.
- Name the plan and select the 'Tiny Turtle (free)' plan.
- Choose the nearest data center to your location.
- Click 'Review'.
- In the ElephantSQL dashboard, click on the database instance name for this project.
- Copy the ElephantSQL database URL (starts with
postgres://).
- In the Heroku dashboard, select the 'Settings' tab.
- Under 'Config Vars', click 'Reveal Config Vars'.
- Enter the following:
CLOUDINARY_URL: Your Cloudinary URL.DATABASE_URL: Your ElephantSQL Postgres database URL.SECRET_KEY: A secret key of your choice.ALLOWED_HOST: The URL of your Heroku app (withouthttps://).
- In Heroku, select the 'Deploy' tab.
- Choose 'GitHub' as the deployment method and link your GitHub repository.
- Under 'Manual Deploy', choose the 'main' branch and click 'Deploy Branch'.
I extend my gratitude to various sources that inspired and guided the development of Catch-Up:
- Example data models and blog structures from diverse online resources.
- The Code Institute's Moments app tutorial for foundational learning.
- My mentor, celestine okoro for invaluable insights and guidance.
- The vibrant community on Slack for their support, feedback, and collaborative spirit.
- ChatGPT by OpenAI for providing assistance with coding challenges and offering instant support.
- Fellow students who shared their experiences, challenges, and solutions, contributing to a rich learning environment.
This addition to your README acknowledges the broad range of support and inspiration you received throughout the development of your project. It not only highlights professional guidance but also the value of community and AI tools in the learning and development process.
For further details, please refer to the gassamasaikou@yahoo.com.