Telegram Clone Assignment

Introduction

Congratulations! Your profile has been shortlisted for the assignment round for the position of Frontend React Developer at BeyondChats! This is a full-time position, and this assignment will help us get a better understanding of your expertise.

This is a 48-hour assignment through which we will evaluate your UI/UX skills and React expertise.

Assignment Details

Objective

Your task is to create a pixel-perfect replica of the Telegram messaging application - both in desktop view and mobile view using ReactJS.

Requirements

• Watch the provided UI Mockup Video.
• Explore the Telegram app yourself to understand its UI/UX.
• Replicate as much of the Telegram UI/UX as possible.
• Use the provided API endpoints to display the chats and their messages.
• Deploy the project publicly for evaluation.

API Endpoints

1. Get All Chats

   • Description: Returns list of chats (paginated API)
   • URL: https://devapi.beyondchats.com/api/get_all_chats?page=1
   • Type: GET Request

2. Get Chat Messages

   • Description: Returns list of messages given a chat_id
   • URL: https://devapi.beyondchats.com/api/get_chat_messages?chat_id=3888
   • Type: GET Request

UI Mockup Video

Please refer to the provided video React Telegram Assignment.mp4 for the UI mockup.

Technologies to Use

• ReactJS
• Node libraries as needed
• MUI (Material-UI) is encouraged

Notes

• You have 48 hours to complete this assignment.
• Your final submission should be a GitHub project URL which contains a ReadMe file describing your submission. The ReadMe should also contain the link to the live website.
• Please make sure your GitHub project is not private so that we can evaluate your submission with ease.
• We understand that two days is not enough to clone the entire Telegram UI for both desktop and mobile. Please complete the assignment to the best of your abilities. We will evaluate you based on the work you submit.
• You own complete rights to your code, and we promise to not use it for our purposes unless we select you for the position.

Submission

Please submit your assignment by providing the following:

• GitHub Project URL: [https://github.com/bhanupm07/telegram-ui-mockup]
• Live Website URL: [https://telegram-ui-mockup.vercel.app/]

Thank you for your time and effort. Good luck!

Getting Started

Prerequisites

Make sure you have the following installed:

• Node.js
• npm

Installation

1. Clone the repository:

   git clone https://github.com/bhanupm07/telegram-ui-mockup
   

2. Navigate to the project directory:

cd telegram-clone

3. Install the dependencies:

   npm install

Running the application

1. Start the development server

npm run dev

2. Open your browser and navigate to http://localhost:5173.

Project Structure

• src/: Contains the source code of the application
• public/: Contains the public assets and the HTML file
• README.md: This file

Thank you for considering me for the position of Frontend React Developer at BeyondChats. I look forward to your feedback.

Best regards, Bhanu Prakash Mahant