docs: update samples and presentation

Author: HayesGordon

README.md

@@ -1,18 +1,66 @@
-# Flutter samples
+# Stream Flutter Samples
 
 ![](https://raw.githubusercontent.com/GetStream/flutter-samples/master/images/sdk_hero_v4.png)
 
-**Quick Links**
+## 😎 Repo Overview
 
-- [Register](https://getstream.io/chat/trial/) to get an API key for Stream Chat
+This repo contains official Stream projects, guides, links to helpful resources, and excellent tutorials and samples developed by the Flutter community. 
+
+#### Quick Links
+
+- [Register For a Free Account](https://getstream.io/try-for-free/)
+- [Stream Flutter YouTube Playlist](https://www.youtube.com/playlist?list=PLNBhvhkAJG6t-BxkRAnSqa67lm5C1mpKk)
+
+**Chat:**
 - [Flutter Chat Tutorial](https://getstream.io/chat/flutter/tutorial/)
+- [Flutter Chat SDK Repo](https://github.com/GetStream/stream-chat-flutter)
+- [Flutter Chat Client Documentation](https://getstream.io/chat/docs/flutter-dart/?language=dart)
+- [Flutter Chat UI Documentation and Helpful Guides](https://getstream.io/chat/docs/sdk/flutter/)
 - [Chat UI Kit](https://getstream.io/chat/ui-kit/)
-- [Flutter SDK Repo](https://github.com/GetStream/stream-chat-flutter)
 
+**Feeds:**
+- [Flutter Feed Tutorial](https://getstream.io/activity-feeds/sdk/flutter/tutorial/)
+- [Flutter Feed SDK Repo](https://github.com/GetStream/stream-feed-flutter)
+- [Flutter Feed Client Documentation](https://getstream.io/activity-feeds/docs/flutter-dart/?language=dart)
+
+
+
+🔎  Official Samples and Tutorials
+------------
+
+| 🔮 Official Samples | |
+|:-----|---------|
+|  <br><h3>Stream Chat Sample Application</h3>A fully fledged messaging application, demoing everything you can do with Stream Chat Flutter, using our <a href="https://pub.dev/packages/stream_chat_flutter">UI package</a>.<br><br>• Maintained to support the latest version of the SDK<br>• Combination of pre-made widgets and custom widgets<br>• Light & dark themes<br>• Localization<br>• Multiple users accounts<br>• Message search and filtering <br>• Create private and group chats <br>• View @mentions <br>• View pinned messages, files, photos and videos <br>• Base Stream Chat functionality <br><br> **[> Source Code](packages/stream_chat_v1)**<br><br> | <img src="https://user-images.githubusercontent.com/13705472/160582030-20a8c13e-a802-40c8-b744-e11f8d6df0b9.gif" width="320" alt="Stream Chat Flutter Sample App"> |
+| ⚙️ Tutorials | |
+|  <br><h3>Stream Chat Flutter Core Application</h3>**[> YouTube Tutorial Playlist](https://www.youtube.com/playlist?list=PLNBhvhkAJG6sH7dkmwt4BiCclFkMoXq4r)**<br><br>An ongoing, beginner friendly, series, demoing how to use the <a href ="https://pub.dev/packages/stream_chat_flutter_core">Stream Chat Flutter Core package</a> for lower level control and customization options.<br><br>•  Custom UI components <br>• Lower level client integration<br>• Light & dark themes<br>• Multiple users accounts <br>• Firebase Authentication <br>• Firebase Cloud Functions to generate user tokens<br>• Create private chats <br><br> **[> Source Code](https://github.com/HayesGordon/chatter)**<br><br> | <img src="https://user-images.githubusercontent.com/13705472/160588541-6dc3186c-848f-47d6-a8f2-a9d2f2f5da4a.gif" width="320" alt="Chatter Application Preview"> |
+|  <br><h3>Instagram Clone</h3>**[> YouTube Tutorial](https://youtu.be/fHRB6KGoaV0)**<br>**[> Written Tutorial](https://getstream.io/blog/instagram-clone-flutter/)**<br><br>A tutorial showing how to use <a href="https://github.com/GetStream/stream-feed-flutter">Stream Feed Flutter</a> to create an Instagram clone using activity feeds.<br><br>•  Instagram-like animations and transitions <br>• Light & dark themes<br>• Add and change profile pictures<br>• Multiple users accounts <br>• State management with Provider<br>• Application architecture <br>• Add photo posts to your own user feed (activities)<br>• Follow/Unfollow other users' feeds <br>• Add comments and likes (reactions)<br><br> **[> Source Code](https://github.com/GetStream/flutter-instagram-clone)**<br><br> | <img src="https://camo.githubusercontent.com/f6125cca0164288544682eff5ccab8c100c22e0054ead2401a232d81c8be3f8e/68747470733a2f2f6d656469612e67697068792e636f6d2f6d656469612f4a6d5259656c53495a7a49306d696546774f2f67697068792e676966" width="320" alt="Chatter Application Preview"> |
+|  <br><h3>iMessage Clone</h3>**[> Written Tutorial](https://getstream.io/blog/build-an-imessage-clone-with-streams-flutter-chat-sdk/)**<br><br>This tutorial shows how to use <a href="https://pub.dev/packages/stream_chat_flutter_core">Stream Chat Flutter Core</a> to create a basic chat application, styled similar to iMessage.<br><br>• Custom chat bubbles with a custom painter <br>• Core chat components<br>• Sending attachments <br>• Chat functionality<br>• List all channels<br> **[> Source Code](https://github.com/GetStream/flutter-samples/tree/main/packages/imessage)**<br><br> | <img src="https://user-images.githubusercontent.com/13705472/160639870-37fcccc5-b5ae-4260-aad6-9d87cd2c0f9c.gif" width="320" alt="Chatter Application Preview"> |
+| ⚙️ Codelabs | |
+|  <br><h3>Animated Stickers And Reactions With Rive</h3>**[> Codelab](https://getstream.io/codelabs/flutter/flutter-chat-and-rive-animations/)**<br><br>Add animated reactions and stickers to your chat application using <a href ="https://rive.app/">Rive</a>.<br><br>•  Rive animations <br>• Custom attachments<br>• Custom reactions <br><br> **[> Source Code](https://github.com/HayesGordon/stream-chat-flutter-animated-stickers)**<br><br> | <img src="https://user-images.githubusercontent.com/13705472/164188802-a8cce134-7441-4daf-9d1d-c3fadeeb03ea.gif" width="320" alt="Animated Reactions/Stickers with Rive"> |
+|  |  |
+
+## Chat Guides
+See [here](https://getstream.io/chat/docs/sdk/flutter/) for all our chat guides.
+
+These guides explore our UI components in greater detail and demonstrate how to easily perform a variety of common actions using the Stream Chat Flutter SDK, such as:
+- [Adding Push Notifications](https://getstream.io/chat/docs/sdk/flutter/guides/adding_push_notifications_v2/)
+- [Adding Localization](https://getstream.io/chat/docs/sdk/flutter/guides/adding_localization/)
+- [Adding Custom Attachments - Location Sharing](https://getstream.io/chat/docs/sdk/flutter/guides/adding_custom_attachments/)
+- [Token Generation With Firebase Auth and Cloud Functions](https://getstream.io/chat/docs/sdk/flutter/guides/token_generation_with_firebase/)
+- [Adding Chat To Video Livestreams](https://getstream.io/chat/docs/sdk/flutter/guides/adding_chat_to_video_livestreams/)
+- [Adding Local Data Persistence](https://getstream.io/chat/docs/sdk/flutter/guides/adding_local_data_persistence/)
+- [Understanding Filters](https://getstream.io/chat/docs/sdk/flutter/guides/understanding_filters/)
+- [End To End Chat Encryption](https://getstream.io/chat/docs/sdk/flutter/guides/end_to_end_chat_encryption/)
+
+## Chat Tutorials
+Chat tutorials that go into greater detail on certain topics:
+- [Add Peer-to-Peer Payment Integration With Stream and Rapyd](https://getstream.io/blog/p2p-integration-with-flutter/)
+- [Send Voice Messages](https://getstream.io/blog/instantly-send-audio-messages-with-stream-chat-and-flutter/)
+- [Location Sharing](https://getstream.io/blog/add-location-sharing-to-a-messaging-app-using-flutter/)
 
 ## What is Stream?
 
-Stream allows developers to rapidly deploy scalable feeds and chat messaging with an industry leading 99.999% uptime SLA guarantee.
+Stream allows developers to rapidly deploy scalable feeds and chat messaging with an industry-leading 99.999% uptime SLA guarantee.
 
 With Stream's chat components, developers quickly add chat to their app for a variety of use-cases:
 
@@ -22,28 +70,17 @@ With Stream's chat components, developers quickly add chat to their app for a va
 - Messaging style chat like Whatsapp or Facebook's messenger
 - Commerce chat like Drift or Intercom
 
-## Repo Overview 😎
-
-This repo contains projects and samples developed by the team and Stream community. Projects are broke up into directories under the `packages` folder.
-
-Each project contains a README with build and execution instructions. 
-
-## **Maintained Projects 🚀**
-- [Stream Chat v1](https://github.com/GetStream/flutter-samples/tree/main/packages/stream_chat_v1): a sample app implemented using Stream Chat and Flutter. It is a fully fledged messaging app built using a combination of our pre-made widgets and custom Flutter widgets.
-- [Chatter YouTube Series](https://github.com/HayesGordon/chatter): an ongoing, beginner friendly, YouTube video series showing how to use Stream's Flutter packages.
-- [iMessage clone](https://github.com/GetStream/flutter-samples/tree/main/packages/imessage): an iMessage clone implemented using Flutter and the `stream_chat_flutter_core` package.
-
-## **Historic Projects 📕**
+## 📕 Historic Projects
 *These projects are not actively maintained. They were developed using older versions of our packages and Flutter.*
 - [Stream Chatty](https://github.com/GetStream/flutter-samples/tree/main/packages/chatty) Stream Chatty is a sample chat app made in Flutter using Stream Chat, Firebase, and flutter_bloc. It has full light and dark mode support, real-time chat, and full authentication using Firebase auth.
 
-## Requirements 🛠
+## 🛠 Requirements
 
-Before running this project please ensure Flutter is installed and configured on your machine. If you're new to Flutter, please checkout the [official guide](https://flutter.dev/docs/get-started/install) with installation instructions for your OS. 
+Before running this project, please ensure Flutter is installed and configured on your machine. If you're new to Flutter, please check out the [official guide](https://flutter.dev/docs/get-started/install) with installation instructions for your OS. 
 
-## Contributing
+## 📈 Contributing
 
 - How can I submit a sample app?
-    - Apps submissions are always welcomed! 🥳 Open a pr with a proper description and we'll review it as soon as possible
-- Spot a bug 🕷 ?
-    - We welcome code changes that improve the apps or fix a problem. Please make sure to follow all best practices and add tests if applicable before submitting a Pull Request on Github.
+    - Apps submissions are always welcomed! 🥳 Open a pr with a proper description, and we'll review it as soon as possible
+- Spot a bug 🕷?
+    - We welcome code changes that improve the apps or fix a problem. Please follow all best practices and add tests if applicable before submitting a Pull Request on Github.