FRONTEND INTERNSHIP PROJECT

Project: Building a Live Chat Application with ReactJS and WebSockets

Dear Interns,

I hope this message finds you well. We are excited to introduce your next project, which will
give you hands-on experience with ReactJS, WebSockets and Material UI. You will be working
on building a Live Chat Application, a real-time communication platform that will allow users
to interact seamlessly.

Project Requirements:
A. Technology Stack:
1. ReactJS: Use React for building the user interface.
2. WebSockets: Implement real-time communication using WebSockets to enable
instant message delivery.
3. Material UI: Design the user interface with Material UI components for a polished and
responsive look.

B. Functionalities:
1. User Authentication: Implement a simple user authentication system.
2. Real-time Chat: Users should be able to send and receive messages in real-time.
3. User List: Display a list of online users.
4. Message History: Store and display chat history.
5. User Presence: Show the online/offline status of users.

C. Project Structure:
1. Set up a well-organized project structure.
2. Use functional components and hooks in React.

D. Styling:
1. Apply Material UI components for a consistent and visually appealing design.

Steps and Guidance:

A. Project Setup:
1. Set up a new React project using Create React App or your preferred method.
2. Install Material UI and configure the basic layout.
 B. User Authentication:
1. Implement a simple authentication system. This could be as basic as
username/password or integrating with a third-party authentication service.

C. WebSocket Integration:
1. Choose a WebSocket library for React (e.g., socket.io-client) and integrate it into your
project.
2. Implement WebSocket connections for real-time communication.

D. Chat Interface:
1. Design the chat interface using Material UI components.
2. Implement the functionality to send and receive messages.

E. User List and Presence:

1. Display a list of online users.
2. Implement a feature to show the online/offline status of users.

F. Message History:
1. Store and retrieve chat history, displaying it in the chat interface.

G. Testing and Debugging

H. Documentation:
1. Document your code and the overall project structure.
2. Provide a simple README with instructions on how to run the project locally.

I. Submission and Evaluation

Submission Deadline: 15th December 2023

Feel free to reach out if you have any questions or need clarification on any aspect of the
project. We encourage collaboration, so don't hesitate to seek assistance from your peers or
mentors. You can use WhatsApp group to discuss with other peers. If you have any doubt or
face any issues, please mail us on jatin.sinfolix@gmail.com

Best of luck, and enjoy the learning journey!

Sincerely,

Sinfolix Technologies