ChatApp Front End (CAFE)

About ChatApp

ChatApp is a web-based application for multi-person real-time chatting with Google authentication and read by feature. Check out our ChatApp here!

Functional Programming Concepts on CAFE

CAFE serves as the frontend service of ChatApp, built based on functional programming with React library and Typescript language. Other than React's built-in declarative features (function components and hooks), CAFE also applied functional programming concepts, which include the following:

1. Pure Function (ex: ChatMessage components)
2. Partial Evaluation (ex: updateReadBy function)
3. Pattern Matching (ex: Phoenix socket channel's on function)
4. Functional Data Structure (ex: ProtectedRoute component)
5. Higher Order Function (ex: map function)
6. Abstraction and Functional Modularity (ex: useChatRoom hooks)

Installation

• Install npm (version 6 or later).
• Clone the repository.
• Enter the project directory with cd cafe.
• Build the dependencies with npm install or npm i.
• Create .env file based on .env.example and fill in the Google Client ID.
• Run the app in development node with npm start.
• Run ChatApp backend service from ChatApp repository.
• Open http://localhost:3000 to view it in the browser and see ChatApp in action!

For production purposes, see the section about deployment for more information.

Authors [Kelompok 18]:

• Doan Andreas Nathanael
• Glenda Emanuella Sutanto
• Kefas Satrio Bangkit S.
• Wulan Mantiri

Acknowledgements

• CS UI - Functional Programming 2020