This project centers around a social network called "PetsLife," designed to enable dog lovers to share their most special moments with their faithful friends. Additionally, it provides a platform to access valuable information shared by other users about adoptions, locations for sterilizations, and vaccinations.
The key features of PetsLife are as follows:
🐶1. Registration and Login: Users can sign up and access the platform using their email address and a secure password.
🐶2. Google Login: For added convenience, we also offer the option to log in via Google.
🐶3. Pet Registration: When registering with an email and password, users can add information about their pets, creating personalized profiles for their furry companions.
🐶4. Content Posting: Users have the ability to create, edit, and delete posts to share their experiences and anecdotes with their pets. This feature promotes interaction and a community around the shared passion for dogs.
🐶5. Logout: Users can securely log out whenever they wish.
🐶🦮🐩🐕🦺🐕 PetsLife 🐶🦮🐩🐕🦺🐕 Strives to be a welcoming and enriching space for dog lovers, providing opportunities to strengthen the connection with their pets and access crucial information for animal well-being. Join our community and share the love for dogs!
🐶1. User Stories.
🐶2. App Names, Color Palette, Logo, and Photos Selection.
🐶3. Final Logo, Name, and App Color Palette.
🐶4. Interviews and Surveys.
🐶5. Prototypes.
🐶6. Usability Testing.
🐶7. Preview.
🐶8. General Features.
🐶9. Who Are the Users?
🐶10. Objectives Regarding the Product.
🐶11. Technologies Used.
🐶12. Testing.
🐶13. Issues.
🐶14. Code Review.
App Name Proposals
Color Palette Proposals
Logo Proposals
Photos Selection for the App
- Low-Fidelity Mobile Prototype.
- High-Fidelity Mobile Prototype.
🐶User 1: Argued that in each view of the application, an image related to the theme should be included because the white background gave it a rather simplistic appearance. (1 user mentioned this).
🐶Users: They were asked to complete the tasks in the application and then share their opinions based on their experience. This user stated that the application was easily accessible and that the required actions were clear. (4 users agreed).
Mobile Images
Tablet Images
Web Images
Mobile Video
Web Video
🐶This is a Single Page Application (SPA) consisting of various views, such as the home page (Home), registration (Register), login (Login), the dog registration form (Dogform), and the feed.
🐶We utilized Firebase, a platform primarily designed to simplify web and mobile application development, enabling more efficient work without compromising the required quality.
🐶It leverages Firestore, our cloud-based NoSQL database, to store and synchronize data in a flexible and scalable manner. This facilitates development from both the client and server sides, ensuring efficient and reliable data management for the application.
This project is aimed at dog lovers, the "best friends of humans," including dogs of all breeds and sizes.🐶🐕🐕🦺🐩🦮
🐶The primary purpose of this product is to allow users to share their best moments with their dogs while also providing valuable information about adoptions, sterilization, and vaccinations. This information is currently available exclusively for Mexico and Chile.
🐶JavaScript: Used to execute web functionality and display the results.
🐶HTML5: Employed to render the app through a div that behaved like a node, allowing us to observe all elements created from JavaScript (inputs, buttons, text boxes, etc.).
🐶CSS3 (@mediaquery): Determines the style and design of our application, including responsive design. Media queries were used in this project for designing on mobile phones, tablets, and desktop computers.
🐶GitHub: This technology's utility was for storing the repository and facilitating collaborative work.
🐶Git: Provided version control support.
🐶Node.js: Used as the runtime environment for JavaScript.
🐶Jest: Unit tests were performed using this technology, as it allowed for mocks to simulate Firebase methods and test the functions developed by the team. Additionally, it provided a report to assess code quality.
🐶Firebase: Different Firebase methods were used to enable users to access the application. User registration was accomplished using createUserWithEmailAndPassword and signInWithPopup. For the login view, GoogleAuthProvider was used to allow logging in with Google credentials. Furthermore, signInWithEmailAndPassword was employed for email login, and onAuthStateChanged was used to monitor changes in user authentication status, with signOut being used for logging out.
🐶Firestore: This technology allowed us to access a real-time NoSQL document database. Our collections focused on user-generated posts, so methods like collection and addDoc were used. The object requested user email properties, date, and content.
🐶SPA (Single Page Application): In order to provide our users with a faster browsing experience, the design was based on a Single Page Application (SPA).
🐶Vercel: Utilized to deploy the application directly from GitHub.
- npm run pretest
- npm test
- npm run open-coverage-report
- Only in these two sections, the test did not pass.
General Issues
🚨 Initially, there were issues with Firebase configuration.
🚨 There was a problem with CSS: views were being affected by responsiveness, and several elements needed to be designed. The background images did not fit correctly in the initial attempts. After reviewing Display Grid and delving deeper into responsive design, we were able to resolve it.
🚨 Problems with post duplication were encountered and resolved by adding a line in the onSnapshot function (section.innerHTML = '';).
🚨 Another issue was with the date; it was only displaying milliseconds and not the full date and time. The solution was to use this code: datePost.textContent = new Date(doc.data().date.seconds * 1000).toLocaleString(); This code was added to format the date properly.
🚨 In the tests, there was an issue where the dialog was not recognized in the delete test. To resolve this problem, we had to implement the following functions: HTMLDialogElement.prototype.showModal = jest.fn(); HTMLDialogElement.prototype.close = jest.fn().
🐶I consider that you work in an extremely organized manner. Your code looks clean and elegant, with specific variable declarations that are perfectly understandable thanks to the names you use. It's clear that you communicate effectively about what you are doing.