In the process of developing the web application, our group has applied some of the teachings that was used to apply various several key practices and applications. Whereby Git commands enabled our group with applying commands such as fetch, pull, and push ensuring efficient collaboration and management of codebase. HTML tags were structured to creating essential pages such as login, signup, homepage, and profile pages. The integration of tags and attributes is implemented to configure HTML elements, harmonizing them with other languages like CSS for styling and JavaScript for backend functionality. A systematic approach is maintained through the segregation of codes based on their use and functionality, ensuring a clear distinction between the user interface, HTML page styles, and the backend functionality implemented in JavaScript. Furthermore, CSS selectors are employed to precisely target and style specific HTML elements, contributing to a cohesive and visually appealing web application.
Our team has optimized the organization and layout of webpages for enhanced user experience. With the implementation of seperating of div elements to systematically structure each column on the webpage, employing tools like Flexbox for efficient manipulation of elements. Ensuring a seamless user experience across various devices, we prioritize the responsiveness of our webpages. This is achieved through an indirect approach using media queries, ensuring that the layout adjusts dynamically to different screen sizes. Furthermore, we incorporate animations to engage users, employing subtle movements to prompt responses and create an interactive environment.
Other such functions were used in recording user interactions within the system to create a dynamic and responsive interface. Additionally, the incorporation of validation methods further enhances the system's robustness by ensuring the accuracy and integrity of user inputs. Validation methods act as a safeguard, preventing erroneous or inappropriate data from compromising the functionality of the system. Together, the implementation of functions and validation methods contributes to an efficient and user-friendly experience, promoting reliability and precision in handling user interactions.
The integration of API serves multiple purposes within the system. Firstly, it facilitates the posting of user information while ensuring the validation of user inputs. Then, it enables the retrieval of user information, crucial for validating existing users through the creation of unique user instances using tokens that are then stored in the website's local storage. The implementation of post methods allows users to input content, which is subsequently displayed in the webpage's timeline through the post API. Furthermore, the system incorporates a follower system, utilizing get and delete APIs to obtain and display other instances of user data along with their posts. A like system is also integrated, utilizing the post API. Lastly, a trend system is implemented, breaking down a user's post to record terms or words accompanied by hashtags, contributing to a comprehensive and dynamic user experience
The design inspiration for the website is strongly influenced by the beauty of outer space and the distinctive style of Kurzgesagt. Our group collectively agreed on exploring the theme of space, drawing from the prevalent use of minimalism and glass design as it is somewhat overused. Consequently, the overall ambiance of the website aims to capture the beauty of space, reflected in the choice of fonts, layout, and the integration of animated elements that enhance the user experience with a touch of dynamism. The design focuses on a minimalistic flat style with subtle and deep colors, occasionally incorporating gradients. The website structure exhibits similarities to Twitter, complemented by additional elements to enhance its uniqueness.
The approach involved segmenting elements into their respective parts on the website and adding comments to identify tasks and address complex functionalities in the program. This was done to enhance the readability and organization of elements, as well as to separate files into their designated groups. HTML primarily manages the exterior user interface for user interaction, with visual feedback incorporated through styles and responsive design within the JavaScript code. CSS styles are organized to facilitate reuse and integration with other elements, while JavaScript files handle data processing and recording. Our initial website development approach included creating a prototype to determine the placement and responsiveness of various webpage components. We utilized Figma's conceptual framework, generating conceptual responses to integrate with our team's designer. This process allowed us to finalize our framework and seamlessly integrate components into the final product. Subsequently, we shifted towards implementing an API to facilitate data manipulation and information handling. The backend design, named "TwitterCloneAPI," was paired with the frontend UI of the site. In the final stages, we focused on incorporating essential features such as Posts, Likes, Followers, and Trends. With the goal of maximizeing production efficiency, manage time effectively, and minimize conflicts related to bugs and merging processes.
The overall purpose of working on the website is to develop features that enable us to engage more effectively with users. With the involvement of implementing visual prompts and designs specifically tailored to enhance the overall user experience.
To deploy the project, our group followed a sequence of steps involving NPM, GitHub deployment pages, and Netlify. By cloning the project code from an example repository on GitHub and utilized the Netlify UI to create a new site. Leveraging continuous deployment in Netlify, we initiated an automated build process that generated site assets. Upon completion, we visited the demo project's URL to explore the site, now available through a content delivery network (CDN). Subsequently, we deployed the project to Netlify, establishing a connection to the group's GitHub repository. To ensure proper functionality, we installed dependencies necessary for the project. This comprehensive approach allowed us to seamlessly deploy, connect, and configure the project, utilizing key features of both Netlify and GitHub.
With the use of Figma, we were able to organize tasks based on the requirements and assign them individually according to capabilities and a volunteering system. This enabled our group to document various task points, whether it was the completed UI or API, development periods, or the implementation of additional features.
- Gerona UI and HTML response
- Alcantara API
- Rea API and HTML response
- Santos API and HTML response
- Tiongco API and HTML response
When working as a team, conflicting code will be inevitable. So to combat this, the team has made use of the different git commands such as "git status", "git fetch", "git merge", and "git pull". These commands help us by allowing all group members to code at the same time. Using git status to check how behind or ahead the file that is being worked with is. Git fetch used to get the latest version of the main repository. Git merge to merge the fetched version and your workspace's version. And git pull to directly get the latest version straight to your workspace.
As our group or section has recently begun working with HTML, CSS, and JS languages, we possess a fundamental understanding of these languages along with some knowledge of code and functions. That our familiarity with certain code or functions may be limited, and there might be more efficient alternatives within these languages that we are yet to discover. Acknowledging this, we recognize the potential for enhancing our website by incorporating more efficient functions or optimizing our code for better logic and efficiency.
Some additional thoughts and ideas that we intend to work on include implementing more visual interactions and designing with a focus on unleashing pure creativity and innovation to create something unique. Additionally, we aim to further explore additional functionalities as time permits.