Welcome to the frontend repository of CatoApp, a dynamic MERN stack application designed to enable discussions on YouTube videos with disabled comments.
CatoApp aims to address the common frustration of "comments are turned off" on YouTube videos by providing a platform where users can share their thoughts and opinions seamlessly. This repository specifically focuses on the frontend implementation of the application.
- Commenting System: Users can comment on videos with their identity or anonymously.
- Voting System: Signed-in users can upvote or downvote comments, ensuring accountability and preventing multiple votes.
- Google Authentication: Users can sign in with Google for seamless authentication.
- Dynamic UI: The frontend replicates the layout and aesthetics of YouTube for a familiar user experience.
- Localization: Provides locale-based recommendations for an enhanced user experience.
The frontend files are structured within the src directory as follows:
assets: For static images and non-code assets used across the application.components: Contains reusable React functional components.context: Houses custom context, such as AuthContext, for authentication needs.hooks: Includes custom hooks for various functionalities.pages: Contains page-specific components, such as the home page and 404 page.reducers: Stores Redux reducers for centralized state management.utility: Houses utility functions and helper modules.
- React: The foundation of the frontend.
- Redux: Centralized state management for data and actions within the application.
- Axios: Robust HTTP client for making asynchronous requests to the backend.
- Emoji-Mart: Library offering an emoji keyboard for enhanced user interaction.
- Date-fns: Utilized to transform date formats for improved user experience.
- React-String-Replace: Used to convert plain text into clickable timestamps.
- Linkify: Converts plain text into hyperlinks for improved usability.
- React-Player: Implemented instead of iframes to support starting videos at specific seconds.
To set up the frontend locally, follow these steps:
- Clone this repository to your local machine.
- Navigate to the project directory.
- Install dependencies using
npm install. - Start the development server using
npm start.
Contributions are welcome! If you encounter any bugs or have suggestions for enhancements, feel free to open an issue or submit a pull request.
This project is licensed under the MIT License.