[BUG-60]: Create UI Empty State Components for Notifications/ Messages

README.md

@@ -9,15 +9,13 @@
 [![GitHub License](https://img.shields.io/badge/license-MIT-lightgrey.svg)](https://raw.githubusercontent.com/Emmanuel-Melon/planet-of-the-bugs/dev/LICENSE)
 
 
-Welcome to Planet of the Bugs, an innovative app that uses AI to generate unique bug scenarios for developers to practice and improve their debugging skills. The app also provides personalized training for teams, a built-in AI assistant for rubber-duck debugging, and many other exciting features.
+Welcome to "Planet of the Bugs," an extraordinary app that harnesses the power of AI to revolutionize your debugging skills. Imagine a realm where AI conjures unique bug scenarios, providing an unending source of challenges to hone your expertise. Navigate an intuitive online editor, merging theory and practice seamlessly. But that's not all – brace yourself for a journey beyond imagination.
 
-Planet of the Bugs uses AI to generate fake bug scenarios for developers to learn debugging skills and the fundamentals of writing secure and robust software. Some of the key features of the app include:
+Delve into real-world issues sourced from the GitHub galaxy, where you'll decipher intricate problems, unravel complexities, and emerge as a debugging virtuoso. Need a sidekick in your debugging quest? Look no further than our AI assistant, a trusty companion offering insights and it’s perfect for rubber-duck debugging.
 
-- Endless supply of unique scenarios for practicing and honing skills
-- Online editor for practicing theoretical knowledge
-- Application of knowledge in solving real-world issues from GitHub
-- Ability for experts to create courses for new developers
-- Creating teams and courses to train on the company's stack
+Whether you're a solo explorer or part of a dynamic team, "Planet of the Bugs" offers tailor-made training and team-building experiences. Visionaries can craft custom courses, guiding novices through the labyrinth of programming intricacies. Collaborate with your peers, unravel cryptic bugs together, and ascend the leaderboard ranks.
+
+Step into a universe where learning knows no bounds, where AI transforms novices into virtuosos, and where debugging challenges are gateways to mastery. Experience a new era in software education with "Planet of the Bugs." Your journey to becoming a debugging legend begins now.
 
 ## 🚀 Demo
 
@@ -44,9 +42,9 @@ Our app also features a job board for top contributors, so you can find exciting
 Our app offers a bounty hunting program to help companies crack bugs, so you can earn money while helping others.
 
 ## 🧑‍💻 How to Contribute
-We welcome contributions from developers of all skill levels! If you're interested in contributing to Planet of the Bugs, please fork our repository and submit a pull request with your changes. We're always looking for ways to improve our app, so your contributions are greatly appreciated.
+We welcome contributions from developers of all skill levels! If you're interested in contributing to Planet of the Bugs, please clone our repository and submit a pull request with your changes. We're always looking for ways to improve our app, so your contributions are greatly appreciated.
 
-If you're not sure where to start, check out our Contributing Guidelines for more information on how to get involved. We also have a Code of Conduct that we expect all contributors to follow, so please take a few minutes to review it before getting started.
+If you're not sure where to start, check out our [Contributing Guidelines](CONTRIBUTING.md) for more information on how to get involved. We also have a [Code of Conduct](CODE_OF_CONDUCT.md) that we expect all contributors to follow, so please take a few minutes to review it before getting started.
 
 Thank you for your interest in Planet of the Bugs! We look forward to working with you.
 
@@ -67,40 +65,26 @@ To get started with Planet of the Bugs, simply sign up for an account on our web
 
 To set up the Planet of the Bugs project locally, follow these steps:
 
-Clone the project from the GitHub repository.
-
-Clone the repository to your local machine by running the following command in your terminal:
-
-<pre>
-<code data-prompt="Copy this command:">$ git clone https://github.com/Emmanuel-Melon/planet-of-the-bugs/ && git checkout dev</code>
-</pre>
-
-Install the necessary dependencies by running the following command in your terminal:
-
-<pre>
-<code data-prompt="Copy this command:">$ yarn install && yarn dev</code>
-</pre>
-
-Start the development server by running the following command in your terminal:
-
-Navigate to [http://localhost:3000](http://localhost:3000) in your web browser to view the app.
-
-### Local Setup
-
-To get started, copy the .example.env file to .env by running the following command in your terminal:
-
-```bash
-cp .example.env .env
-```
+1. Clone the repository to your local machine: git clone https://github.com/Emmanuel-Melon/planet-of-the-bugs.git
+2. Navigate to the main branch: 
+   ```git checkout dev```
+3. Navigate to the client app: 
+   ```cd apps/client```
+4. To get started, copy the .example.env file to .env by running the following command in your terminal: 
+   ```cp .example.env .env```
+5. Install any necessary dependencies: 
+   ```yarn && yarn dev```
+6. Start the development server by running the following command in your terminal: Navigate to [http://localhost:3000](http://localhost:3000) in your web browser to view the app.
 
 ### 🦾 Contributors
 
 - **Emmanuel Gatwech (Eman)**: [LinkedIn Profile](https://www.linkedin.com/in/emmanuel-gatwech/), [Twitter](https://twitter.com/junubiman), [Hashnode](https://eman.hashnode.dev/), [Portfolio](https://e-man.vercel.app/).
 - **Magid Faiz**: [LinkedIn Profile](https://www.linkedin.com/in/maiz27/), [Hashnode Profile](https://hashnode.com/@Maiz), [Portfolio](https://maged-faiz.web.app/).
+- **Leona Magaya**: [LinkedIn Profile](https://www.linkedin.com/in/leonamagayachinyerere/)
 
 ### Thank You Note
 
-We would like to extend our gratitude to Hashnode and MindsDB for hosting this amazing Hackathon. It has been an incredible opportunity to learn and work on this project.
+We extend our heartfelt appreciation to the brilliant minds, tireless contributors, and visionary partners who have propelled this project's success. Thank you for reshaping how we learn and master debugging. Together, we're shaping the future of software education.
 
 ##
 License

apps/client/src/components/EmptyStates/ChatEmptyState.svelte

@@ -0,0 +1,39 @@
+<script>
+  import Image from "./Image.jpg"
+</script>
+
+<main>
+  <div class="container">
+    <img  class="resize" src={Image} alt="Man using magnet to collect mail" />
+    <h1>No new messages.</h1>
+    <p>There are no new messages. Start chatting with your fellow BUGSLAYERS!</p>
+    <button class="btn btn-wide">New Chat</button>
+  </div>
+</main>
+
+<style>
+  .container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    width: 750px;
+    height: 600px;
+    margin-top: 10px;
+  }
+
+  h1 {
+    font-weight: bolder;
+    font-size: large;
+  }
+
+  img {
+    width: 700px;
+    height: 450px;
+  }
+
+  .btn {
+    margin-top: 25px;
+    margin-bottom: 5px;
+  } 
+</style>

apps/client/src/routes/messages/+page.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import "iconify-icon";
+  import ChatEmptyState from "$components/EmptyStates/ChatEmptyState.svelte";
   import { setContext } from "svelte";
   import { onDestroy, onMount } from "svelte";
   import { selectedChat } from "./store";
@@ -21,7 +22,11 @@
 </script>
 
 <div class="full">
-  <ChatMenu />
+  <ChatEmptyState />
+
+
+  <!--<ChatMenu />
   <ChatDetails />
-  <ChatInput />
+  <ChatInput />-->
+
 </div>