This is a progressive web application (PWA) developed using ReactJS that simulates a chat screen for both Android and iOS devices. The application fetches data from an API to display chat messages and implements lazy loading for new chats as the user scrolls.
- Real-time chat interface
- Lazy loading of new chats with Intersection Obsever(custom skeleton loader)
- Responsive design for Android and iOS devices
- Single-page application (SPA) architecture
- Built with ReactJS and Tailwind CSS
- Custom offline fallback page for cross platform
Clone the project
git clone https://github.com/Atanu-Kumar-Dey/PWA-Chat-Application
Go to the project directory
cd PWA-Chat-Application
Install dependencies
npm install
Start the server
npm run start
This application is also deployed to Vercel Live Demo
If it does not work then use this Link
The application fetches chat data from the following API:
http://3.111.128.67/assignment/chat?page=0
The page
parameter indicates the page number for lazy loading. Subsequent hits to the API should increment the page number.
Client: React,Interesction Observer,TailwindCSS
Design: Figma
![Screenshot 2023-05-25 223030](https://private-user-images.githubusercontent.com/83961023/240984795-5e906691-663f-4976-828e-3af445774d47.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjExMDQwOTcsIm5iZiI6MTcyMTEwMzc5NywicGF0aCI6Ii84Mzk2MTAyMy8yNDA5ODQ3OTUtNWU5MDY2OTEtNjYzZi00OTc2LTgyOGUtM2FmNDQ1Nzc0ZDQ3LnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA3MTYlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwNzE2VDA0MjMxN1omWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTk0YTZmYzc4MWU5OWQ1MmU0MWMxZjJiNTFiOWY1ZWYwOTkyOGQ4ZTA0YTYyZGRlMmRjMjc3MTBmYzBiZmE3ZDQmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.siUzOkdW3EKwWm_uMDSD9tQ80P2SS2YoHu068eHpBGg)
![Screenshot 2023-05-25 223015](https://private-user-images.githubusercontent.com/83961023/240984805-05fbe415-baaf-4a4a-a754-1be9f7ecd2e5.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjExMDQwOTcsIm5iZiI6MTcyMTEwMzc5NywicGF0aCI6Ii84Mzk2MTAyMy8yNDA5ODQ4MDUtMDVmYmU0MTUtYmFhZi00YTRhLWE3NTQtMWJlOWY3ZWNkMmU1LnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA3MTYlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwNzE2VDA0MjMxN1omWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTdmM2RiNTU4NTFjMTJhOGYzN2NhZmJmYmYzZjFmNzE5ZmNhODY5ZGNhNzMxMDAxYzI3N2IyOTgwY2I1N2Q5YzAmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.gapKk8Z_8ePQhgFlpFvcJSIzYt4Xp60DZrdQwAjqe0U)
![Screenshot 2023-05-25 223231](https://private-user-images.githubusercontent.com/83961023/240985191-4ef2bbc5-5f6c-46f4-9394-71330d5a95d8.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjExMDQwOTcsIm5iZiI6MTcyMTEwMzc5NywicGF0aCI6Ii84Mzk2MTAyMy8yNDA5ODUxOTEtNGVmMmJiYzUtNWY2Yy00NmY0LTkzOTQtNzEzMzBkNWE5NWQ4LnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA3MTYlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwNzE2VDA0MjMxN1omWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPWQxODJiZWM0NmEzZDY5MGE0MmYwZjQxNGUyMmFjNWI0ZmNhNDdhMDkxZTBiMjBjY2E5NWYwMWJiZTRjNDQ5ZTkmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.RyFhSr2D5cxmBMUOrhp8G5KcuTKwvbyI5uFt951ZYZA)
![Screenshot 2023-05-25 223249](https://private-user-images.githubusercontent.com/83961023/240985183-1056d87f-6c62-4438-ad36-4dfb47354a8b.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjExMDQwOTcsIm5iZiI6MTcyMTEwMzc5NywicGF0aCI6Ii84Mzk2MTAyMy8yNDA5ODUxODMtMTA1NmQ4N2YtNmM2Mi00NDM4LWFkMzYtNGRmYjQ3MzU0YThiLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA3MTYlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwNzE2VDA0MjMxN1omWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTE2YmJkNDUyOTA3OTMzMzJkZDY2MjYzZjI2MTRiMWEzMGVjMTFkNjgyYzY3NzVlM2IwZDkxNjFlZGNmYTE5NzkmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.GJXPpolHp1nSpJUYJz9rF2_C7l5oBupbI9id_07sV8k)
![Screenshot 2023-05-25 223601](https://private-user-images.githubusercontent.com/83961023/240985844-5d0bc514-372c-41e4-a848-481fae6cd523.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjExMDQwOTcsIm5iZiI6MTcyMTEwMzc5NywicGF0aCI6Ii84Mzk2MTAyMy8yNDA5ODU4NDQtNWQwYmM1MTQtMzcyYy00MWU0LWE4NDgtNDgxZmFlNmNkNTIzLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA3MTYlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwNzE2VDA0MjMxN1omWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTA3NGZkMjQyY2ExZDU3YjlmOThmNTJhYTQyYzMyYmNmMmJhZGE5MTViYWU3YTBlOGE3ZTY1ZTI2NGE4ZmIyNDMmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.L6jupBiH_xXmMI2jy8qduzVhhM2R9nZVdHGjes4ya00)
![Screenshot 2023-05-25 222927](https://private-user-images.githubusercontent.com/83961023/240984809-adebdc36-3371-4d29-ac8f-3e408ef2abee.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjExMDQwOTcsIm5iZiI6MTcyMTEwMzc5NywicGF0aCI6Ii84Mzk2MTAyMy8yNDA5ODQ4MDktYWRlYmRjMzYtMzM3MS00ZDI5LWFjOGYtM2U0MDhlZjJhYmVlLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA3MTYlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwNzE2VDA0MjMxN1omWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPWZkNTI0Yjk0NzNmMTg0YjFmMGFkYmFkMTM1NGRmYzE1NGM2MGE4ZTI0MTkwZGMwZGE2NThhYmU3MmEwOTUxMzEmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.7jxzmZUzA3dw3JmI7jFFWgTNwZCgIrydX3yjvAXA6Rs)
The provided API uses HTTP, which is not secure. When the app is deployed on a website using HTTPS, a mixed content error occurs because the browser blocks insecure requests. Although the assignment suggests opening the API link in a new tab and allowing access, it doesn't resolve the mixed content issue. In the deployed link, the API request fails due to the same error.