Issue Description:

In the recent addition of the functionality called 7-Feature-Post-Page, a new route called "post" has been introduced to allow users to view the reels that have been published. This page currently has a comments section that enriches the user experience by allowing interactions and debates on shared reels.

Aim:

The objective of this issue is to implement a comment system on the posts page within the 7-Feature-Post-Page functionality. This comment system provides the ability for users to see who posted the reel, the number of likes the post has received, the list of associated comments, and the option to delete comments.

Tasks:

Comment section implementation:

Develop the user interface to display the comments associated with each reel post.

Display of relevant information:

Shows the username who made the publication, the number of likes received and the existing comments.

Comment removal functionality:

Implement the ability for users to delete comments they have added to posts.

Criteria of acceptance:

• The comments section is displayed correctly on the posts page.
• Users can see who made the post, the number of likes and associated comments.
• Users can delete comments they have added.
• The comment system integrates seamlessly with existing functionality and does not generate errors.

Photo:

Description:

For the new feature called “4 Feature Upload Page”, I have introduced the functionality to upload videos to our platform, similar to TikTok upload section. This feature will allow users to seamlessly upload MP4 videos from their device galleries.

Additionally, video editing capabilities were included, allowing users to personalize their content. Additionally, users could provide concise descriptions of up to 150 characters for uploaded videos.

Goals:

Loading functionality:

• Implemented the ability for users to upload MP4 videos from their device galleries.

Video editing features:

• Integrated basic video editing functionalities, allowing users to refine uploaded content.

Description Entry:

I've allowed users to add descriptions of their videos, limited to 150 characters for concise context.

Photo:

Description:

For the development of our new feature named 3-Feature-MainPage-Home, I have implemented the home page layout inspired by TikTok. The objective is to replicate the key components and functionalities of TikTok's main page for a seamless user experience.

Feature Components:

User Profile Section:

• This component have user's profile picture.
• User's name.
• A follow button to follow the user.

Reel Description:

• I have provided a description of the reel.
• Hashtags used by the user.
• Music or sound used in the reel.

Reel Video:

• Showcase the video of the reel.
• Videos includes the TikTok watermark.
• Interactions Section (Right Sidebar):
• Include buttons for likes, comments, and sharing functionalities.

Implementation Details:

• Utilized HTML/CSS/JavaScript for front-end development to create the layout.
• Integrated APIs for fetching user data, reel information, and interactions functionalities.
• Ensured responsiveness across various devices for optimal user experience.
• Conducted testing to validate proper functionality and appearance across different browsers and screen sizes.

Photo:

Description:

To improve the user experience on the platform, I propose the implementation of a new feature called "5-Feature-Profile-Page". This feature allows users to have a more interactive and complete profile page, inspired by the profile structure of the TikTok platform.

Functionality Details:

Profile Section:

• Display of the user with their profile photo, first and last name.
• If the profile is your own, it will show an "Edit Profile" button; if it is from another user, it will show a "Follow" button to follow the user.
• Display of the number of "Followed" and "Followers".
• Field for a personal description of the user.

User Content:

• Viewing the videos uploaded by the user.
• Display of the reels that the user has "liked".

Reasons for Implementation:

• Improve user experience: The inclusion of a more complete profile page similar to that of other popular platforms will improve the user experience on our platform.
• Increase interactivity: Allow users to edit their profile, follow other users and view the content they like, we will increase interaction within the platform.
• Stay competitive: By incorporating features familiar to TikTok users, I stayed relevant and competitive in the social media and user-generated content market.

Proposed Tasks:

• Design the user interface for the profile page, taking into account the elements mentioned above.
• Develop the necessary functions to allow editing of the profile, following other users and viewing content related to the profile.
• Integrate profile page functionality with the existing structure of our platform.

Photo:

Description:

To improve the user experience on the site, I have implemented a new feature called 2-Feature-SideNav-Component, which involves a navigation bar on the left side of the site.

Characteristics:

Main sections:

• For you
• Following
• LIVE

Suggested accounts:

• Shows suggested accounts with the user's photo, name and verification.
• "See all" button to see all suggested accounts.

following accounts:

• Shows the accounts followed by the user with profile photo, name and verification.

• "See more" button to see more followed accounts.

Terms and Conditions:

• Section containing the terms and conditions of the site.

Benefits:

• Improves user navigation by providing quick access to relevant sections.
• Facilitates interaction with suggested and followed accounts.
• Complies with transparency standards by including the site's terms and conditions.

Photo:

Description:

In this new development iteration, we added a critical feature to improve the user experience on our platform. The 6-Feature-Edit-Profile-Page feature focuses on the ability for users to edit their profile easily and conveniently, taking inspiration from the profile editing functionality present on the TikTok platform.

Functionality Details:

Profile Photo Editing:

Users now have the ability to change their profile photo with an image of their choice. This functionality allows for greater customization and expression for our users.

Username Edit:

Added the ability for users to edit their username based on their preferences. This provides flexibility for users who want to change their identity on the platform.

Biography Description Edit:

The feature includes the ability to edit the profile biography. This allows users to update and modify their personal information to reflect changes in their lives or interests.

Benefits for Users:

Greater Customization:

Users can express themselves in a more complete and personalized way by editing their profile.

Easy to use:

The intuitive interface makes it easy for users to edit their profile without difficulties.

Instant Update:

Changes made to the profile are reflected immediately, allowing for a seamless experience for users.

Photo:

Description:

_Within the framework of the development of the project, my responsibility has been the comprehensive configuration of the new functionality called 1-Feature-Set-Up. I have done a complete implementation, leveraging key technologies such as Typescript, React, Next.js, Eslint, NextAuth, Tailwind.css, Zustand and AppWrite.

During this process, I have ensured an effective installation of Next.js, setting the necessary configurations to ensure optimal performance and a smooth user experience.

The integration of Zustand has been essential to manage the state of the application centrally, facilitating the flow of data and interaction between components. Additionally, I configured and optimized the Stripe integration to enable payment functionality securely and efficiently.

My proactive and competent approach in configuring and implementing Feature 1-Feature-Set-Up has enabled significant progress in project development, ensuring a robust and highly functional final product.

The new feature, 1-Feature-Set-Up, has been successfully implemented. I have meticulously configured the entire site, leveraging key technologies such as Typescript, React, Next.js, Eslint, NextAuth, Tailwind.css, Zustand and AppWrite. This crucial step lays the foundation for exceptional performance and an enhanced user experience. I am excited about the progress made and confident that this new functionality will contribute significantly to the overall success of the project. Let's continue moving forward together towards achieving our goals!

Navigation bar:

In addition to the mentioned, I added a new navigation bar at the top of the Tiktok site, with the logo, search accounts entry, a new button to load the reels and finally the Login logo on the page. If the user is logged in, you will see her profile picture.

Photo:

Description:

_As part of the latest update, I have implemented a new feature called 8-Feature-Auth-Overlay, designed to improve security and user experience on our site. Below I detail the changes made:

Added environment variables:

I have introduced new environment variables to make it easier to configure and customize the authentication function. These variables are essential for the correct functioning of authentication in the overlay.

Update .gitignore:

I have updated the .gitignore file to make sure that new environment variables and any other sensitive information are not accidentally included in our repository.

Creating the AppWriteClient.tsx file:

I have created the file AppWriteClient.tsx, which acts as the main site container for this new feature. This file contains the main logic to interact with the AppWrite API and manage authentication.

Also, I am pleased to report that the initial database configuration using AppWrite technology has been successfully completed. This lays a solid foundation for the future development and expansion of our platform.

Description:

As part of the development of the 8-Feature-Auth-Overlay feature, I have implemented a new authorization path that allows users to register and log in to the website. This addition is crucial to improve the user experience and ensure secure access to the functionalities offered by the platform.

Implementation Details:

User Registration Path:

I have created a new route '/register' that allows potential users to register by providing the required information such as username, email address and password. This path includes the logic necessary to securely validate and store user information in the database.

User Login Path:

I have added a '/login' path that makes it easier for existing users to log in. This route verifies the credentials provided by the user and grants access to the system if the information is valid. Additionally, security measures have been implemented to protect against possible unauthorized access attempts.

Integration with Existing Features:

The new authorization path has been coherently integrated with the platform's existing functionalities, ensuring a smooth and consistent experience for users.

Photo: