MediaSharing Frontend

Welcome to the MediaSharing Frontend repository!

Overview

MediaSharing is a web application that allows users to watch videos and stream music in sync while chatting with each other in real-time. With MediaSharing, users can create rooms, join public or private rooms, and enjoy synchronized media playback with friends, no matter where they are.

Features

• Real-Time Media Sharing: Watch videos and stream music in sync with friends.
• Chat Functionality: Chat with other users in real-time while enjoying media content.
• Room Creation: Create public or private rooms and set limits on the number of participants.
• User Interaction: Follow other users, invite them to rooms, and enjoy media together.
• User Profiles: View user profiles, see their followers, and the rooms they've created.
• Queue System: Add media to the queue and play.
• Drawing Board: Draw on a shared canvas with other users in real-time.

Technologies Used

• Typescript: Typed superset of JavaScript for enhanced code quality and developer productivity.
• Next js: Frontend React framework for building user interfaces.
• Tailwind CSS: Utility-first CSS framework for quickly building custom designs without writing custom CSS.
• Redux: State management library for managing user and room state.
• Socket io: Real-time communication library for enabling chat and media synchronization.
• Shadecn: UI component library for building sleek and responsive user interfaces. ReactQuery: Data fetching and caching library for managing server state in React applications.
• Framer Motion: Animation library for creating smooth and interactive animations in React.

Installation

To run the frontend locally, follow these steps:

1. Clone this repository to your local machine.
2. Navigate to the project directory in your terminal.
3. Run npm install to install dependencies.
4. Create a .env file in the root directory and copy the environment variable data from .env.example into it.
5. Run npm run dev to start the development server.
6. Open your web browser and visit http://localhost:3000 to view the application.

Note: Please note that the backend API is not accessible in the local development environment due to CORS restrictions. You may need to configure a local backend server or use a different backend endpoint for testing purposes.

Contributing

Contributions are welcome! If you'd like to contribute to MediaSharing, please follow these steps:

1. Fork the repository.
2. Create a new branch for your feature or bug fix.
3. Make your changes and commit them.
4. Push your changes to your fork.
5. Submit a pull request to the main repository.

Feedback

We welcome any feedback or suggestions you may have! Feel free to open an issue in this repository to report bugs, request features, or provide feedback.

License

This project is licensed under the MIT License - see the LICENSE file for details.