matdweb/twitter-clone

🚀 Dive into the latest Next.ts 13 technologies with our Twitter clone project. Tweet your way to tech excellence! 🐦✨

twitter-clone's Issues

feat: create user authentication with NextAuth

About the Ticket

This ticket addresses the implementation of user authentication functionality in our Twitter clone project. The main goal is to establish a robust and secure user authentication system following best practices.

Key Objectives

• Implement user authentication using NextAuth
• Create a user registration feature.
• Store user information in localStorage.
• Ensure functionality of the authentication system.

Details

To achieve these goals, we need to follow these key steps:

1. Authentication Setup:

   • Configure user authentication using NextAuth.js with TypeScript.
   • Implement the necessary authentication flows for sign-in and sign-out.

2. User Registration:

   • Create a user registration feature that allows users to sign up for an account.
   • Store user information securely and efficiently.

3. LocalStorage Storage:

   • Implement the storage of user data in the localStorage for a seamless experience.
   • Ensure the data is stored securely and can be retrieved when needed.

4. Additional Information:
   - A guide video may be added later to assist users. Leave space for this addition.

Impact

The implementation of user authentication is a critical feature that improves the user experience in our Twitter clone. It allows users to create profiles, connect with others, and have a record of their activities, such as posts and likes. This feature sets the foundation for further enhancements and user interactions.

feat: create register page

About the Ticket

This ticket aims to develop the user interface (UI) for the registration page in both light and dark modes, following the design solutions provided in Figma. The UI development prioritizes delivering an exceptional user experience (UX) by providing clear user guidance, proper error handling, and responsiveness. The registration page's design is aligned with the project's visual identity.

Details

Objective

The primary objective of this ticket is to design and develop the registration page's UI in both light and dark modes, adhering to the Figma design solutions. The UI should offer a user-friendly and visually appealing registration experience.

Proposed Changes

To achieve this objective, the following changes will be implemented:

1. Light Mode Interface Development:

   • Develop the user interface for the registration page in light mode, ensuring it matches the Figma design and maintains visual consistency.

2. Dark Mode Interface Development:

   • Adapt the registration page interface to the dark mode, ensuring the design remains visually appealing and functional.

3. User Guidance and Feedback:

   • Implement user guidance and feedback elements within the UI to assist users in performing actions correctly and provide error indications when needed.

4. Responsiveness:

   • Ensure the registration page's UI is responsive, making it look great on various screen sizes, thus enhancing the user experience on different devices.

Design Solution

To ensure that the registration page aligns with our design expectations, we followed the Figma design solutions provided. Please review the designs below:

• Desktop Design Solution: Figma Desktop Design

• Responsive Design Solution: Figma Responsive Design

These design solutions serve as our reference for creating a seamless and visually appealing registration page that enhances the user experience.

Test

Action Required: Please send a video demonstrating how the UI on the registration page works. Ensure the video includes the following aspects:

1. Responsiveness: Show how the UI adapts to various screen sizes and orientations.

2. Proper Error Handling: Test the UI to ensure it provides correct error messages and user guidance for actions.

3. User Guidance: Highlight how the UI guides users to perform actions correctly.

4. Overall Functionality: Demonstrate the registration page's overall functionality and user interactions.

The video will be used for the final approval of the UI implementation.

Impact

Creating an exceptional User Interface (UI) for our registration page is pivotal in enhancing the user experience. It encourages efficient onboarding, user engagement, and user retention, while reducing errors during registration. A well-crafted UI reflects a professional brand image, instills user confidence, and significantly impacts user engagement and overall application success.

feat: create comment funcionality

About the Ticket

This ticket focuses on implementing a "Comment" functionality, enriching user engagement by allowing users to interact with posts through comments. The goal is to create a seamless commenting experience, both in the application's user interface and in the backend.

Changes Recommended

1. Comment Component:

   • Develop a dedicated Comment component to render and handle user comments on posts.
   • Implement styling and UI interactions for an intuitive and engaging comment section.

2. Backend Integration:

   • Modify the /api/posts endpoint and the Post schema to support adding and retrieving comments for each post.
   • Create a new endpoint or enhance the existing one to handle comment-related operations.

3. Redux State Management:

   • Create Redux actions and reducers to manage comment-related state changes in real time.
   • Integrate the comment functionality into the existing Redux store structure.

4. User Interface Update:

   • Update the Post component to display and interact with comments.
   • Ensure that comments are rendered dynamically and reflect real-time changes.

Impact

Implementing the "Comment" functionality enhances user interaction and engagement with posts. Users can now express their thoughts, creating a more community-driven and interactive social media experience. Real-time updates provide immediate feedback, fostering a sense of connection within the application.

fix: UserImage displaying incorrect profile image

About the Ticket

This ticket addresses the issue where the UserImage component consistently displays the profile image of the currently authenticated user, regardless of the user it is associated with. The goal is to implement a fix by introducing obligatory parameters (source and username) to the UserImage component. This modification ensures that the component displays the profile image of the user it is associated with, enhancing the accuracy and functionality of the UserImage component.

Changes Recommended

1. UserImage Component:

   • Add obligatory parameters (source and username) to the UserImage component.
   • Modify the component to use the provided source URL or display a letter based on the username if no source is provided.

2. Implementation:

   • Update the implementation of the UserImage component in relevant sections to include the source and username parameters.

Impact

Implementing this fix has a positive impact on the accuracy and reliability of the UserImage component. By allowing different instances of the component to display the correct profile image for the associated user, the application ensures a seamless and user-friendly experience. Additionally, optimizing the UserImage component for specific users contributes to code clarity and maintainability.

feat: create manual theme switch button

About the Ticket

This ticket requests the creation of a user interface button that enables manual toggling between light and dark modes on the page. Developers can follow this guide on enabling dark mode in Next.js using the Next Themes packages: Guide.

Details

Objective

The main goal of this ticket is to implement a user interface button for manual theme switching. This serves a dual purpose – aiding developers in verifying the UI's compatibility with both light and dark modes and providing users with the option to change the theme, aligning with modern UX standards.

Proposed Changes

To achieve this objective, the following changes will be made:

• Install the Next Themes packages.
• Wrap the app in the theme provider.
• Create a button that allows users to switch between light, dark, or system themes.

Test

Please provide a video demonstrating the correct functionality of the theme switch button.

Impact

By introducing the ability for users to switch between light and dark modes, this enhancement not only enhances user experience but also streamlines the development process. Users gain the flexibility to customize their viewing experience, while developers benefit from easier UI testing and theme validation.

feat: create mock data API

About the Ticket

This ticket addresses the creation of a mock data API for our Twitter-clone project. The primary aim is to establish efficient data retrieval and management, aligning with the project's core technologies.

Key Objectives

• Set up a mock data API for managing post data.
• Establish an endpoint for fetching post data from JSONPlaceholder.
• Implement an endpoint for retrieving images from Picsum.
• Utilize Redux Toolkit for effective data storage.

Details

To achieve these goals, the following steps are crucial:

1. API Endpoint Creation:

   • Develop /api/posts and /api/images endpoints in the backend for managing data.
   • These endpoints are essential to handle API requests securely and in compliance with best practices.

2. Data Retrieval:

   • Make GET requests to JSONPlaceholder for fetching post data.
   • Make GET requests to Picsum to retrieve images.
   • Store this data in the Redux state manager for efficient access.

3. UI Integration:

   • Display the content and responses from the API calls on the front end.
   • Verify successful API call responses; otherwise, display a brief error message.

4. Redux Integration:

   • Store the retrieved data within the Redux state, creating a structured Redux Toolkit slice for managing posts with associated images.

Test

The successful integration of the /api/posts and /api/images endpoints will ensure that API calls to JSONPlaceholder and Picsum are managed efficiently in the backend. This approach not only enhances security but also adheres to best practices.

Dependencies

• Posts: JSONPlaceholder Posts
• Images: Picsum Images

Impact

By creating a mock data API and integrating it with Redux Toolkit, we enable efficient data retrieval and centralized state management in our Twitter-clone project. This sets the stage for future enhancements and features.

feat: create retweet funcionality

About the Ticket

This ticket focuses on enhancing user engagement through the implementation of a "Retweet" functionality. The goal is to provide users with the ability to share interesting posts within the application, fostering interaction and expanding the reach of valuable content.

Changes Recommended

1. Retweet Button:

   • Introduce a "Retweet" button to posts, allowing users to share content with their followers.
   • Implement a visual indicator, such as a circular arrow icon, to represent the "Retweet" action.

2. Redux Integration:

   • Modify the api/posts to store and track user retweets for each post.
   • Ensure the posts include the updated amount of retweets in real time.
   • Manage all of this funcionality only in Redux state of the posts since there's not access to the mock data base

3. User Interface Update:

   • Update the post component to display the number of retweets each post has received.
   • Implement real-time updates to reflect changes in like counts without requiring a page reload.
     

4. Additional Information:

   • Developers are encouraged to refer to the #8 to understand how the api/posts endpoint works and successfully implement the changes required for the app to record retweets.

Impact

The introduction of a "Retweet" functionality enriches the user experience by adding a social dimension to our platform. Users gain the ability to share valuable content, contributing to a sense of community and interaction. Please note that, as a recommendation, the retweets functionality may work only on the Redux state due to the app's use of mock data without direct database access.

feat(redux): remove counter state

About the Ticket

This ticket addresses the removal of the counter state from our project's Redux store. The primary objective is to eliminate the counter state, as it no longer serves a purpose and was initially used for testing the setup of the Redux configuration.

Key Objectives

• Remove the counter state from the Redux store.
• Clean up and streamline the Redux configuration by eliminating unnecessary code.

Details

To achieve these goals, the following steps are crucial:

1. Counter State Removal:

   • Locate and remove all instances of the counter state from the Redux store, including reducers, actions, and selectors.
   • Ensure that no references to the counter state remain in the codebase.

2. Redux Configuration Cleanup:

   • Review the Redux configuration, focusing on any settings or code that were specific to the counter state.
   • Remove or update this configuration to reflect the removal of the counter state.

Test

Make sure to test the Redux configuration to confirm its continued functionality. Validate that all aspects of the configuration, including data storage and retrieval in the Redux state manager, work correctly after removing the counter state.

Impact

Removing the counter state improves the clarity and efficiency of our Redux store and configuration. It eliminates unnecessary code and ensures that our Redux setup aligns with the project's actual requirements.

feat(redux): Set up Redux for state management

About the Ticket

This ticket aims to set up Redux for efficient state management in our Next.js 13 project. Implementing Redux will improve the organization and handling of application data, making it accessible to various components while maintaining a predictable and centralized state.

Key Objectives

• Integrate Redux for global state management.
• Configure Redux with TypeScript to ensure type safety.
• Implement necessary Redux actions, reducers, and store.
• Connect components to Redux store to access and modify application state.
• Leverage Redux middleware for handling asynchronous actions.
• Ensure compatibility with Tailwind CSS for consistent styling.

Details

To successfully implement Redux in our Next.js 13 project, we will follow these steps:

1. Redux Installation:

   • Install the required Redux packages.
   • Configure Redux Toolkit for a simplified setup.

2. Redux Configuration:

   • Set up the Redux store with TypeScript support.
   • Define the initial state structure.

3. Actions and Reducers:

   • Create Redux actions and reducers to manage specific parts of the application state.
   • Ensure type safety by utilizing TypeScript for action payloads and state slices.

4. Component Integration:

   • Connect components to the Redux store using connect or Redux hooks (e.g., useSelector, useDispatch).
   • Implement state retrieval and modification as needed in components.

5. Middleware Integration:

   • Integrate Redux middleware, such as Redux Thunk, for handling asynchronous actions like API requests.

6. Tailwind CSS Compatibility:

   • Ensure that the integration with Redux does not disrupt the styling and layout provided by Tailwind CSS.

Test

To ensure the correctness of the Redux Toolkit setup, the developer assigned to this ticket should create a simple counter test. This test should involve two buttons, one to add units and another to subtract units from a number. The number's value should be displayed in another component to demonstrate that Redux Toolkit is working effectively.

For a quick start guide on Redux Toolkit, developers can follow this link: Redux Toolkit Quick Start.

Dependencies

• Redux: redux.js.org
• Redux Toolkit: redux-toolkit.js.org
• Redux Thunk (for asynchronous actions): redux-thunk.js.org

User Interface (UI) Changes

The primary focus of this ticket is on the back-end setup and state management. It may impact UI elements indirectly through data presentation and user interactions.

Impact

• Improved state management and data flow in the application.
• Enhanced maintainability and scalability.
• Efficient handling of asynchronous operations.
• A foundation for adding and managing complex features.

fix(react-icons): Correct 'react-icons' package addition in PR #2

About the Ticket

This ticket addresses an issue where a previously merged pull request (PR #2) was intended to add the react-icons packages but failed to do so. The objective is to rectify this omission and ensure that the react-icons packages are correctly added to the project.

Key Points

• Correct the oversight from the previous PR.
• Ensure the react-icons packages are successfully integrated into the project.
• Verify that the react-icons components are available for use in the application.

Details

The steps to fix this issue involve the following:

1. Review the Previous Pull Request: Examine the changes made in PR #2 to understand why the react-icons packages were not added.

2. Integrate react-icons Packages: Add the react-icons packages to the project using the appropriate package manager (e.g., npm or yarn).

3. Update Dependencies: Ensure that the project's dependencies are updated and that the react-icons packages are correctly registered in the project's package.json file.

4. Test the Integration: Verify that the react-icons components are accessible and functional in the project.

5. Create a New Pull Request: After completing the above steps, create a new pull request to merge the changes into the main branch.

User Interface (UI) Changes

This fix primarily relates to project dependencies and integration, and it should not impact the user interface directly.

Impact

Once this ticket is successfully addressed, the react-icons packages will be correctly integrated into the project, enhancing its functionality and providing access to a wide variety of icons.

feat: add-loaders

About the Issue

This issue aims to enhance the user experience by implementing a Loader component in various sections of the application that involve asynchronous actions. As our social media app evolves, it's crucial to keep users engaged and informed during processes that may take some time, such as data fetching or submission. The addition of Loaders ensures a smoother and more responsive interface, indicating to users that their requests are being processed.

Objective

The objective of this issue is to implement a Loader component and integrate it into sections of the page that involve asynchronous actions. The Loader should provide visual feedback to users, indicating that a process is ongoing, and enhance the overall user experience during waiting periods.

Details

Implementation Steps

1. Create Loader Component:

   • Develop a reusable Loader component that can be easily integrated into various sections of the application.

2. Integrate Loader in Async Actions:

   • Identify sections of the page where asynchronous actions occur (e.g., data fetching, API calls).
   • Integrate the Loader component to visually indicate the loading state during these actions.

3. Styling and Animation:

   • Ensure the Loader is styled appropriately to match the overall design of the application.
   • Consider adding subtle animations for a more engaging user experience.

Impact

Implementing Loaders in sections with async actions will significantly improve the user experience by providing clear visual feedback. Users will be informed about ongoing processes, reducing uncertainty and frustration during wait times. This enhancement contributes to a more polished and professional appearance of the application, leading to increased user satisfaction.

feat: create user page

About the Ticket

This ticket focuses on implementing a new feature to create a user page within the application. The primary objective is to introduce a route that renders the page of a specified user, utilizing the userId as a parameter. This ensures the dynamic retrieval of user-related data, enabling a comprehensive and personalized user experience.

Changes Recommended

1. New Route Implementation:

   • Create a new route in the application, preferably named /home/user/[userId].
   • Configure the route to utilize the userId as a parameter for fetching user-specific data.

2. User Page Rendering:

   • Develop the necessary components and logic to render the user page.
   • Ensure the page fetches relevant data such as user details, posts, comments, and other associated information.

3. User Id Parameter Handling:

   • Implement robust handling of the userId parameter to accommodate rendering the authenticated user's page as well as other users' pages.

4. UI Components:
   Firstly, you need to create the page based on the Figma design, but base yourself on the home/user/profile page to create this new user page.
   

Additional Information

• Developers are encouraged to consider optimizing the user page for responsiveness, ensuring a seamless experience across various devices.
• Utilize the existing API endpoints for fetching user data, and if needed, introduce new endpoints for specific user-related information.
• The userId parameter serves as a crucial identifier to fetch the correct user data, emphasizing the importance of proper implementation.

Impact

The introduction of the user page feature enhances the overall user experience by providing a dedicated space to showcase individual user profiles. Users will benefit from personalized content, including their own user page, enabling them to interact with and explore their contributions within the application. This feature contributes to a more engaging and user-centric platform.

feat: create user profile with Redux

About the ticket

This feature aims to create a user profile page utilizing Redux state management for seamless user data handling. The implementation follows the established patterns in the project, ensuring consistency and compatibility with existing components.

Details

Objective

The primary objective is to design and implement a user profile page where users can view and potentially edit their profile information. This includes details such as username, bio, profile picture, and other relevant information.

Changes Planned

1. User Profile Page:

   • Create the /home/users/[username] route and corresponding UI page according to the Figma Design Solutions.
   • Develop the user profile UI with necessary components for displaying user information.
   • Implement the ability to edit and update profile information for the authenticated user. In the other hand, if the user is just looking to other user's profile pages they must not be able to edit this user's data.

2. Redux Configuration:

   • Introduce a new Redux slice for managing user profile-related state.
   • Define actions and reducers to handle fetching, updating, and storing user profile data.

3. API Endpoint (/api/user-profile):

   • Create or modify the necessary API endpoint to interact with user profile data.
   • Ensure the API response includes relevant user profile information.

4. /auth/register Form:

   • Add the country input to the /auth/register form.
   • Ensure the country data is saved in the database for each user during registration.

Redux Configuration

This ticket should include the following modifications to Redux configuration:

• New Slice:

  • Introduce a new Redux slice for managing user profile-related state.

• Actions:

  • Define Redux actions for fetching, updating, and storing user profile data.

API Endpoint: home/user/[username]

About this Endpoint

The api/user/[username] endpoint is responsible for fetching the information of the specified user to be displayed in the page. This will be use to display other user's profile pages.

Impact

Implementing the user profile page enhances user engagement by providing a dedicated space for users to manage and personalize their profile information.

feat: create Post funcionality

About the Ticket

This ticket focuses on implementing the "Create Post" functionality to enrich the user experience and engagement within the Twitter-Clone application. The primary objective is to allow users to share their thoughts, updates, and media content with the community through the creation of new posts.

Changes Recommended

1. Create Post Component:
   • Develop the Create Post component, catering to the UI behavior provided. Ensure that the component aligns with the existing UI and meets responsiveness standards.

2. Responsive Handling (/home/createPost/) :

   • Implement a route (/home/createPost/) dedicated to displaying the Create Post component. Ensure that this route is accessible when the user interacts with the relevant buttons.

3. Image Upload:

   • Allow users to add images to their posts. Utilize the Edge Store and the File Reader API package for efficient image storage. Ensure seamless integration to enable users to enhance their posts with visuals. Check documentation here and you can see how it was implemented in the #22 pull request

Responsive Behavior

For responsive behavior, the Create Post section is hidden on smaller screens. Developers should create a new route (/home/createPost/) that leads to a section specifically designed for creating posts on smaller devices. Clicking the relevant buttons should redirect the user to this responsive route.

Developers are encouraged to align the functionality with the existing UI for consistency and a seamless user experience. Additionally, utilize the Edge Store package for efficient image storage, allowing users to add visually appealing elements to their posts.

Impact

The introduction of the "Create Post" functionality provides users with a platform to share their thoughts and multimedia content, fostering a more dynamic and engaging social experience. The responsive handling ensures a consistent user interface across devices, adapting to the diverse needs of the user base. By incorporating image upload capabilities, users can enrich their posts, creating a more visually appealing and interactive content-sharing environment.

feat: create like funcionality

About the Ticket

This ticket focuses on enhancing user engagement through the implementation of a "Like" functionality. The goal is to provide users with the ability to express their appreciation for posts within the application.

Changes Recommended

1. Like Button:

   • You can use the allready created animate-ping animation from Tailwind
   • Implement a heart icon or similar visual indicator to represent the "Like" action.

2. Redux Integration:

   • Modify the api/posts to store and track user likes for each post.
   • Ensure the posts include the updated amount of likes in real time.
   • Manage all of this funcionality only in Redux state of the posts since there's not access to the mock data base

3. User Interface Update:

   • Update the post component to display the number of likes each post has received.
   • Implement real-time updates to reflect changes in like counts without requiring a page reload.
     

4. Additional Information:

   • Developers are encouraged to refer to the #8 to understand how the api/posts endpoint works and successfully implement the changes required for the app to record likes.

Impact

The introduction of a "Like" functionality enriches the user experience by allowing users to express their sentiments towards content. Users can engage more meaningfully with posts, fostering a positive and interactive environment within the application. Please note that, as a recommendation, the likes functionality may work only on the Redux state due to the app's use of mock data without direct database access.

Revert "fix: UserImage doesn't render correct profile image"

Revert Merge: #41

Issue Description

Following the recent merge of the "fix: UserImage component doesn't render the correct profile image" pull request, an unexpected error has surfaced. The UserImage component, responsible for rendering profile images, is displaying incorrect images in certain scenarios, particularly impacting post rendering.

Problem Identified

1. Post Rendering Error:
   • In specific cases, when rendering posts that include the UserImage component, incorrect profile images are being displayed.
   • This behavior is inconsistent with the intended functionality and negatively impacts the overall user experience.

2. UserImage Component Logic:
   • The recent changes to the UserImage component, introduced to address profile image rendering issues, seem to have unintended consequences.
   • It appears that the logic implemented to fetch profile images based on userId or username may not be functioning as expected in all scenarios.
   • It can also have something to do with the data base and the models. Please give them a look as well

Why Revert is Necessary

1. Impact on User Experience:

   • Incorrectly rendered profile images compromise the accuracy and reliability of the content displayed to users.
   • This issue has the potential to confuse users and diminish the overall quality of the application.

2. Reverting for Stability:

   • To maintain a stable and reliable application, it is crucial to revert the recent changes temporarily.
   • This will allow for a thorough investigation of the root cause and a more systematic resolution of the issue.

Next Steps

1. Root Cause Analysis:

   • Developers should conduct a detailed analysis to identify the root cause of the post rendering error and UserImage component inconsistencies.
   • This may involve reviewing recent code changes, debugging, and testing various scenarios to pinpoint the issue.

2. Refinement and Testing:

   • Once the root cause is identified, developers should refine the UserImage component logic to ensure accurate rendering of profile images.
   • Rigorous testing across different scenarios and user profiles is essential to verify the correctness and reliability of the solution.

3. Re-Submission of Changes:

   • Following resolution and thorough testing, the corrected changes can be re-submitted as a new pull request.
   • This ensures that the revised solution undergoes review and verification before being merged into the main codebase.

Impact Statement

The decision to revert the recent merge is a proactive measure to address a critical issue affecting the application's stability and user experience. Developers are committed to swiftly resolving the identified problems, ensuring that the UserImage component accurately renders the correct profile images as intended. The re-submission of refined changes will follow a careful review and testing process to prevent a recurrence of the reported issues.

feat: create welcome page

About the Ticket

This ticket focuses on the creation of a welcoming and visually appealing welcome page for our social media app. The welcome page is designed to be the first thing users see when accessing the root route (/) of the application. The UI for this page will adhere to the design solutions provided in Figma, ensuring a consistent and engaging user experience.

Changes Recommended

1. Welcome Page UI:

   • Create a visually appealing welcome page following the design specifications outlined in Figma.
   • Ensure that the welcome page is responsive and provides an inviting introduction to the app.
     

2. Integration with Root Route:

   • Implement the welcome page to be the default view when users access the root route (/) of the application.
   • Ensure a seamless transition from the welcome page to the main application interface.
   • Implement protection to the app in the /route so no authenticated user may enter the /home route but be always redirect to this / page for loging in or registering

Impact

The addition of a welcome page enhances the initial user experience, setting a positive tone for their interaction with the app. A well-designed and welcoming introduction can captivate users' attention and encourage them to explore further. This contributes to a more engaging and user-friendly onboarding process for new users.

feat: create-post-page

About the Ticket

This ticket focuses on the creation of a dedicated post page, accessible through the /home/post/[id] route. The page will display individual posts along with their associated comments, providing users with a detailed view of specific posts.

Changes Recommended

• Create a new route: /home/post/[id] to handle individual post pages.
• Develop the post page layout, displaying the post content and associated comments.
• Implement the necessary logic to fetch and render post details, including comments.

Impact

The introduction of the post page enhances user navigation and engagement by providing a dedicated space for viewing individual posts and their associated discussions. This feature contributes to a more immersive and informative user experience within the application.

Creare global styles

About the Issue

You are asked to create the global styles for the app promptly.
You should check the Design-Solution provided in the Figma documents here and for mobile/responsive here.

As established, you are also asked to download the react-icons package, ready to use.

Resources

• As you can see, you will be using the Segoe UI and the Roboto fonts.
• You need to create CSS classes for these titles and texts so that they can be properly styled when they need to be used in the development process, as well as the button backgrounds and signifiers.

feat: create main page

About the Ticket

This ticket focuses on developing the user interface (UI) for the main page in both light and dark modes, following the design solutions provided in Figma. The UI development prioritizes delivering an exceptional user experience (UX) by providing clear user guidance, proper error handling, and responsiveness. The main page's design is aligned with the project's visual identity.

Details

Objective

The primary objective of this ticket is to design and develop the main page's UI in both light and dark modes, adhering to the Figma design solutions. The UI should offer a user-friendly and visually appealing main page experience.

Proposed Changes

To achieve this objective, the following changes will be implemented:

1. Light Mode Interface Development:

   • Develop the user interface for the main page in light mode, ensuring it matches the Figma design and maintains visual consistency.

2. Dark Mode Interface Development:

   • Adapt the main page interface to the dark mode, ensuring the design remains visually appealing and functional.

3. User Guidance and Feedback:

   • Implement user guidance and feedback elements within the UI to assist users in performing actions correctly and provide error indications when needed.

4. Responsiveness:

   • Ensure the main page's UI is responsive, making it look great on various screen sizes, thus enhancing the user experience on different devices.

Design Solution

To ensure that the main page aligns with our design expectations, we followed the Figma design solutions provided. Please review the designs below:

• Desktop Design Solution: Figma Desktop Design

• Responsive Design Solution: Figma Responsive Design

These design solutions serve as our reference for creating a seamless and visually appealing main page that enhances the user experience.

Test

Action Required: Please send a video demonstrating how the UI on the main page works. Ensure the video includes the following aspects:

1. Responsiveness: Show how the UI adapts to various screen sizes and orientations.

2. Proper Error Handling: Test the UI to ensure it provides correct error messages and user guidance for actions.

3. User Guidance: Highlight how the UI guides users to perform actions correctly.

4. Overall Functionality: Demonstrate the main page's overall functionality and user interactions.

The video will be used for the final approval of the UI implementation.

Impact

Creating an exceptional User Interface (UI) for our main page is pivotal in enhancing the user experience. It encourages efficient user engagement, user retention, and provides a professional and visually appealing brand image. A well-crafted UI significantly impacts user engagement and overall application success.

fix: UserImage component doesn't render correct profile image

About the Ticket

This ticket addresses an issue with the UserImage component, which currently fails to render the correct profile image for users. The problem arises when attempting to display the profile image of a user who is not the authenticated user. The UserImage component should dynamically fetch the correct profile image URL from the redux state or the database based on whether the username matches the authenticated user's username.

Changes Recommended

1. UserImage Component Fix:
   • Modify the UserImage component to check if the username matches the authenticated user's username.
   • If there's a match, retrieve the profile image URL from the redux state.
   • If there's no match, use the user ID to fetch the user from the database and retrieve the profile image URL.
   • If no match is found in both cases, default to rendering the first letter of the username.

Screenshots

This user has this profile image

The person commented other user's post but the profile image is an M and not the profile image the user setted.

Impact

Implementing these changes will ensure that the UserImage component accurately displays the profile image corresponding to each user, enhancing the overall visual representation of user profiles. Users will experience a more personalized and visually appealing interface, contributing to an improved user experience.

feat: create login page

About the Ticket

This ticket is dedicated to creating the user interface (UI) for the login page in both light and dark modes. The UI development follows the design solutions provided in Figma, ensuring a seamless and visually appealing user experience. The login page design maintains consistency with the project's visual identity and is optimized for responsiveness. The login page should be displayed on the /auth/login route of the application.

Note: This ticket needs to wait until the merge of the #17 pull request because it requires the code of the ModeToggleButton to assess how the page looks in both light and dark modes.

Details

Objective

The primary objective of this ticket is to design and develop the login page's UI in both light and dark modes, adhering to the Figma design solutions. The UI should provide users with a clear, intuitive, and visually appealing login experience.

Proposed Changes

To achieve this objective, the following changes will be implemented:

1. Light Mode Interface Development:

   • Develop the user interface for the login page in light mode, ensuring it matches the Figma design and maintains visual consistency.

2. Dark Mode Interface Development:

   • Adapt the login page interface to the dark mode, ensuring the design remains visually appealing and functional.

3. User Guidance and Feedback:

   • Implement user guidance and feedback elements within the UI to assist users in performing actions correctly and provide error indications when needed.

4. Responsiveness:

   • Ensure the login page's UI is responsive, making it look great on various screen sizes, thus enhancing the user experience on different devices.

Route: /auth/login

Overview

This route serves as the authentication login page.

Functionality

The primary purpose of this route is to handle user authentication and login functionality.

Display

The page displayed on this route must present a user-friendly login interface, adhering to the design solutions provided in Figma. Additionally, it should reflect the removal of the counter state, aligning with the streamlined Redux configuration.

Design Solution

To ensure that the login page aligns with our design expectations, you need to follow the Figma design solutions provided. Please review the designs below:

• Desktop Design Solution: Figma Desktop Design

• Responsive Design Solution: Figma Responsive Design

These design solutions serve as our reference for creating a seamless and visually appealing login page that enhances the user experience.

Test

Action Required: Please send a video demonstrating how the UI on the login page works. Ensure the video includes the following aspects:

1. Responsiveness: Show how the UI adapts to various screen sizes and orientations.

2. Proper Error Handling: Test the UI to ensure it provides correct error messages and user guidance for actions.

3. User Guidance: Highlight how the UI guides users to perform actions correctly.

4. Overall Functionality: Demonstrate the login page's overall functionality and user interactions.

The video will be used for the final approval of the UI implementation.

Impact

Creating an exceptional User Interface (UI) for our login page is pivotal in enhancing the user experience. It not only encourages increased user engagement, efficient onboarding, and user retention but also reduces errors during login and registration. A well-crafted UI reflects a professional brand image, instills user confidence, and significantly impacts user engagement and overall application success.