dun-sin / whisper

A fun Application to have a random chat with people safely

Wonderful Intro

Hello👋🏾 👀  I love to build projects, make life easier and fun with code. 🚀  I love contributing to Opensource Projects 🙂  I'm a content creator on Instagram. 🧑🏽‍💻  Reach out to me through twitter or the contact form in my portfolio 💞️  Follow me on github to stay tuned on my amazing projects. Twitter & Discord Community

Checkout My Projects

don't hesitate to give them a star if you like the idea, thank you👇🏽

My Github Stats && Technologies I use:

JavaScript	TypeScript	HTML5	NextJS	Redux	CSS	Tailwind	NodeJS	ExpressJS	MongoDB
React	Adobe XD	Firebase	Figma	SASS

Connect with me:

whisper's Issues

[FEATURE] chat menu

Description

The menu icon should be clickable and have the option to close a chat when a chat starts

Screenshots

[DOCS] Remove Redux from Readme

Description

Redux is no longer a dependency of the project hence it needs to be removed from the readme's Built With section.

Screenshots

No response

[DOCS] better folder structure

Description

Problem: The structure of the project is bad, it goes in the format of component ⇾ Page + Logical solution + CSS styles

Solution: pages, components and styles with its own folder.

If you know a better folder structure for react applications, you can send a YouTube video link (most preferred) or an article on how the structure works/looks like

Screenshots

No response

[FEATURE] Gitpodify Project

Description

• Add the gitpod button in the README
• Add gitpod.yml file

Screenshots

No response

[DOCS] change discord link

Description

Change the community discord link to this 👉🏾 https://discord.gg/ufcysW9q23

find it here

Before contributing, read 👉🏾 this 👈🏾

Screenshots

No response

UI Improvements on Search page

Description

A few UI improvements could go a long way on this page.

• When friends or profile tab is selected, search friends tab should deselect
• Consistent font style + color across text
• Consistent spacing between lines of text
• Eliminate drop down and just have a "Close Chat" button

Screenshots

No response

[OTHER] remove alert

What would you like to share?

There's an alert when the logout button is clicked, it should be removed.

Remove this line👇🏾

Whisper/client/src/context/reducers/authReducer.js

Line 21 in 774dcd3

alert('logout called!');

Before contributing, read 👉🏾 this 👈🏾

[FEATURE] Add docker support

Description

Docker compose will make it simple to start the projects and mongo db.

Screenshots

No response

[BUG] visit messaging need user id

Description

Visiting Messaing caused error: userID required.

i used google sign in.

Console errors:
Cookie "__stripe_mid" mit dem "SameSite"-Attributwert "Lax" oder "Strict" wurde wegen einer seitenübergreifenden Weiterleitung weggelassen. messaging
Cookie "__stripe_sid" mit dem "SameSite"-Attributwert "Lax" oder "Strict" wurde wegen einer seitenübergreifenden Weiterleitung weggelassen. messaging
We are running on production App.js:55:10
Quellübergreifende (Cross-Origin) Anfrage blockiert: Die Gleiche-Quelle-Regel verbietet das Lesen der externen Ressource auf https://whisper-chat-app.herokuapp.com/socket.io/?userId=undefined&EIO=4&transport=polling&t=OE3--5S. (Grund: CORS-Kopfzeile 'Access-Control-Allow-Origin' stimmt nicht mit 'http://localhost:3000' überein).
XHRGEThttps://whisper-app-api.herokuapp.com/api/v1/app/getFriends/undefined
[HTTP/1.1 400 Bad Request 115ms]

Content Security Policy: Die Einstellungen der Seite haben das Laden einer Ressource auf inline blockiert ("script-src"). moz-extension:136:52
Content Security Policy: Die Einstellungen der Seite haben das Laden einer Ressource auf inline festgestellt ("script-src"). Ein CSP-Bericht wird gesendet. moz-extension:136:52
Für "https://js.stripe.com/v3/m-outer-e8599ce48e3ee1681f9c49cea9065a1b.html#url=https%3A%2F%2Fwhisper.vercel.app%2Fmessaging&title=Whisper&referrer=&muid=6784cfb2-0655-4cb7-8f3c-b798a3afe98fd05337&sid=2ebdc0e2-8d30-44e1-ae0c-88328aba9c4761f242&version=6&preview=false" wurde partitionierter Cookie- oder Speicherzugriff verwendet, da es im Kontext eines Drittanbieters geladen wurde und dynamische Zustandspartitionierung aktiv ist.
Content Security Policy: Die Einstellungen der Seite haben das Laden einer Ressource auf inline blockiert ("script-src"). moz-extension:136:52
Für "https://m.stripe.network/inner.html#url=https%3A%2F%2Fwhisper.vercel.app%2Fmessaging&title=Whisper&referrer=&muid=6784cfb2-0655-4cb7-8f3c-b798a3afe98fd05337&sid=2ebdc0e2-8d30-44e1-ae0c-88328aba9c4761f242&version=6&preview=false" wurde partitionierter Cookie- oder Speicherzugriff verwendet, da es im Kontext eines Drittanbieters geladen wurde und dynamische Zustandspartitionierung aktiv ist.
Content Security Policy: Die Einstellungen der Seite haben das Laden einer Ressource auf inline blockiert ("style-src"). moz-extension:88:56
Content Security Policy: Die Einstellungen der Seite haben das Laden einer Ressource auf inline festgestellt ("style-src"). Ein CSP-Bericht wird gesendet. moz-extension:88:56
Quellübergreifende (Cross-Origin) Anfrage blockiert: Die Gleiche-Quelle-Regel verbietet das Lesen der externen Ressource auf https://whisper-chat-app.herokuapp.com/socket.io/?userId=undefined&EIO=4&transport=polling&t=OE3--Qh. (Grund: CORS-Kopfzeile 'Access-Control-Allow-Origin' stimmt nicht mit 'http://localhost:3000' überein).
Quellübergreifende (Cross-Origin) Anfrage blockiert: Die Gleiche-Quelle-Regel verbietet das Lesen der externen Ressource auf https://whisper-chat-app.herokuapp.com/socket.io/?userId=undefined&EIO=4&transport=polling&t=OE3--mf. (Grund: CORS-Kopfzeile 'Access-Control-Allow-Origin' stimmt nicht mit 'http://localhost:3000' überein).
Uncaught TypeError: s.connect is not a function
    fc Chat.page.js:73
    setTimeout handler*456/fc</</< Chat.page.js:73
    emit index.js:143
    value socket.js:192
    emit index.js:143
    a manager.js:122
    emit index.js:143
    value socket.js:498
    emit index.js:143
    value transport.js:33
    value polling-xhr.js:81
    emit index.js:143
    value polling-xhr.js:197
    onreadystatechange polling-xhr.js:153
    onreadystatechange polling-xhr.js:152
    value polling-xhr.js:143
    n polling-xhr.js:101
    value polling-xhr.js:53
    value polling-xhr.js:78
    value polling.js:63
    value polling.js:23
    value transport.js:44
    value socket.js:159
    n socket.js:100
    value manager.js:108
    n manager.js:39
    re index.js:29
    fc Chat.page.js:40
    Lu React
    unstable_runWithPriority scheduler.production.min.js:18
    React 3
    D scheduler.production.min.js:16
    onmessage scheduler.production.min.js:12
    EventHandlerNonNull* scheduler.production.min.js:12
    i messaging:1
    <anonymous> index.js:4
    i messaging:1
    <anonymous> React
    i messaging:1
    <anonymous> React
    i messaging:1
    456 main.7691afe7.chunk.js:1
    i messaging:1
    t messaging:1
    r messaging:1
    <anonymous> main.7691afe7.chunk.js:1
Chat.page.js:73:30
Uncaught TypeError: s.connect is not a function
    fc Chat.page.js:73
    setTimeout handler*456/fc</</< Chat.page.js:73
    emit index.js:143
    value socket.js:192
    emit index.js:143
    a manager.js:122
    emit index.js:143
    value socket.js:498
    emit index.js:143
    value transport.js:33
    value polling-xhr.js:81
    emit index.js:143
    value polling-xhr.js:197
    onreadystatechange polling-xhr.js:153
    onreadystatechange polling-xhr.js:152
    value polling-xhr.js:143
    n polling-xhr.js:101
    value polling-xhr.js:53
    value polling-xhr.js:78
    value polling.js:63
    value polling.js:23
    value transport.js:44
    value socket.js:159
    n socket.js:100
    value manager.js:108
    r manager.js:320
    value manager.js:313
    value manager.js:95
    a manager.js:128
    emit index.js:143
    value socket.js:498
    emit index.js:143
    value transport.js:33
    value polling-xhr.js:81
    emit index.js:143
    value polling-xhr.js:197
    onreadystatechange polling-xhr.js:153
    onreadystatechange polling-xhr.js:152
    value polling-xhr.js:143
    n polling-xhr.js:101
Chat.page.js:73:30
Quellübergreifende (Cross-Origin) Anfrage blockiert: Die Gleiche-Quelle-Regel verbietet das Lesen der externen Ressource auf https://whisper-chat-app.herokuapp.com/socket.io/?userId=undefined&EIO=4&transport=polling&t=OE3-_qZ. (Grund: CORS-Kopfzeile 'Access-Control-Allow-Origin' stimmt nicht mit 'http://localhost:3000' überein).
Uncaught TypeError: s.connect is not a function
    fc Chat.page.js:73
    setTimeout handler*456/fc</</< Chat.page.js:73
    emit index.js:143
    value socket.js:192
    emit index.js:143
    a manager.js:122
    emit index.js:143
    value socket.js:498
    emit index.js:143
    value transport.js:33
    value polling-xhr.js:81
    emit index.js:143
    value polling-xhr.js:197
    onreadystatechange polling-xhr.js:153
    onreadystatechange polling-xhr.js:152
    value polling-xhr.js:143
    n polling-xhr.js:101
    value polling-xhr.js:53
    value polling-xhr.js:78
    value polling.js:63
    value polling.js:23
    value transport.js:44
    value socket.js:159
    n socket.js:100
    value manager.js:108
    r manager.js:320
    value manager.js:313
    r manager.js:323
    a manager.js:124
    emit index.js:143
    value socket.js:498
    emit index.js:143
    value transport.js:33
    value polling-xhr.js:81
    emit index.js:143
    value polling-xhr.js:197
    onreadystatechange polling-xhr.js:153
    onreadystatechange polling-xhr.js:152
    value polling-xhr.js:143
    n polling-xhr.js:101
    value polling-xhr.js:53
    value polling-xhr.js:78
    value polling.js:63
    value polling.js:23
    value transport.js:44
    value socket.js:159
    n socket.js:100
    value manager.js:108
    r manager.js:320
    value manager.js:313
    value manager.js:95
    a manager.js:128
    emit index.js:143
    value socket.js:498
    emit index.js:143
    value transport.js:33
    value polling-xhr.js:81
    emit index.js:143
    value polling-xhr.js:197
    onreadystatechange polling-xhr.js:153
    onreadystatechange polling-xhr.js:152
    value polling-xhr.js:143
    n polling-xhr.js:101
Chat.page.js:73:30
Uncaught TypeError: s.connect is not a function
    fc Chat.page.js:73
    setTimeout handler*456/fc</</< Chat.page.js:73
    emit index.js:143
    value socket.js:192
    emit index.js:143
    a manager.js:122
    emit index.js:143
    value socket.js:498
    emit index.js:143
    value transport.js:33
    value polling-xhr.js:81
    emit index.js:143
    value polling-xhr.js:197
    onreadystatechange polling-xhr.js:153
    onreadystatechange polling-xhr.js:152
    value polling-xhr.js:143
    n polling-xhr.js:101
    value polling-xhr.js:53
    value polling-xhr.js:78
    value polling.js:63
    value polling.js:23
    value transport.js:44
    value socket.js:159
    n socket.js:100
    value manager.js:108
    r manager.js:320
    value manager.js:313
    r manager.js:323
    a manager.js:124
    emit index.js:143
    value socket.js:498
    emit index.js:143
    value transport.js:33
    value polling-xhr.js:81
    emit index.js:143
    value polling-xhr.js:197
    onreadystatechange polling-xhr.js:153
    onreadystatechange polling-xhr.js:152
    value polling-xhr.js:143
    n polling-xhr.js:101
    value polling-xhr.js:53
    value polling-xhr.js:78
    value polling.js:63
    value polling.js:23
    value transport.js:44
    value socket.js:159
    n socket.js:100
    value manager.js:108
    r manager.js:320
    value manager.js:313
    r manager.js:323
    a manager.js:124
Chat.page.js:73:30
Quellübergreifende (Cross-Origin) Anfrage blockiert: Die Gleiche-Quelle-Regel verbietet das Lesen der externen Ressource auf https://whisper-chat-app.herokuapp.com/socket.io/?userId=undefined&EIO=4&transport=polling&t=OE3_13X. (Grund: CORS-Kopfzeile 'Access-Control-Allow-Origin' stimmt nicht mit 'http://localhost:3000' überein).
Uncaught TypeError: s.connect is not a function
    fc Chat.page.js:73
    setTimeout handler*456/fc</</< Chat.page.js:73
    emit index.js:143
    value socket.js:192
    emit index.js:143
    a manager.js:122
    emit index.js:143
    value socket.js:498
    emit index.js:143
    value transport.js:33
    value polling-xhr.js:81
    emit index.js:143
    value polling-xhr.js:197
    onreadystatechange polling-xhr.js:153
    onreadystatechange polling-xhr.js:152
    value polling-xhr.js:143
    n polling-xhr.js:101
    value polling-xhr.js:53
    value polling-xhr.js:78
    value polling.js:63
    value polling.js:23
    value transport.js:44
    value socket.js:159
    n socket.js:100
    value manager.js:108
    r manager.js:320
    value manager.js:313
    r manager.js:323
    a manager.js:124
    emit index.js:143
    value socket.js:498
    emit index.js:143
    value transport.js:33
    value polling-xhr.js:81
    emit index.js:143
    value polling-xhr.js:197
    onreadystatechange polling-xhr.js:153
    onreadystatechange polling-xhr.js:152
    value polling-xhr.js:143
    n polling-xhr.js:101
    value polling-xhr.js:53
    value polling-xhr.js:78
Chat.page.js:73:30
Quellübergreifende (Cross-Origin) Anfrage blockiert: Die Gleiche-Quelle-Regel verbietet das Lesen der externen Ressource auf https://whisper-chat-app.herokuapp.com/socket.io/?userId=undefined&EIO=4&transport=polling&t=OE3_2Ia. (Grund: CORS-Kopfzeile 'Access-Control-Allow-Origin' stimmt nicht mit 'http://localhost:3000' überein).

Screenshots

[DOCS] Better instructions for making changes in the code.

Description

As a beginner, it was quit easy and understandable for me to follow till step 6. Later from step 7, I'd no clue to make changes in the source code and on how to stage those changes. I'm sharing my perspective so that even beginners with potential can contribute and grow this project. I'm really interested in this project, looking forward for further better instructions.

Screenshots

No response

[BUG] Make the `Login Anonymously` button work

Description

The button has no functionality yet, make the button authenitcate the user but not store anything in the mongodb database

Screenshots

[BUG] so much rendering

Description

When a user chats with another user, it renders the message many times

the real problem here is the message sent is dispatched a lot of times to Redux and Redux shows the messages

Screenshots

No response

[FEATURE] add background colour to search

Description

Change the background colour to the primary colour (already declared in tailwind) for search component.

Your tasks:

• Change the background colour by adding bg-primary to the div below👇🏾
  

  Whisper/client/src/pages/Searching.jsx

  Line 71 in ef002eb

  <div className="flex w-full justify-center items-center h-screen flex-col">

• change the colour for the loading animation (the element below 👇🏾) to rgb(255 159 28)
  

  Whisper/client/src/pages/Searching.jsx

  Line 72 in ef002eb

  <ThreeDots fill="rgb(1, 22, 39)" />

Screenshots

Before contributing, read 👉🏾 this 👈🏾

[BUG] Fix GH Actions

Description

Currently, GH action checks fail after PRs, it'd be nice to have all checks pass unless the pr has a bug

TODO

Screenshots

No response

[BUG] Env variables are undefined in client

Description

Due to migration to the recent migration to vite (#54 ), all env variables are undefined. This is because:

To prevent accidentally leaking env variables to the client, only variables prefixed with VITE_ are exposed to your Vite-processed code

So to resolve the issue, all env variables with the prefix REACT_APP_ needs to be changed to VITE_

Screenshots

No response

[OTHER] Use npm ci

What would you like to share?

In Github actions, npm install is used to install dependencies, but using npm ciis much better

Change Github actions to use npm ci instead of npm install

Additional information

No response

[BUG] Blank Page on first ever load

Description

On first ever load the app is only showing a blank page.
You'd have to refresh again to get the actual app. I think it's a problem with initialization?

To get what I'm talking about, visit The App Url, open console and clear all local data i.e localStorage.clear(), then refresh the page.

Screenshots

No response

[FEATURE] host backend to heroku

Description

Previously the backend is hosted on the local server: localhost:4000, but it needs to be hosted on heroku.
Login won't work because it sends a request to the backend before login in a user

Screenshots

No response

[FEATURE] Improve on random user pairing

Description

Currently, it's unclear if users are being properly paired. We need to get the pairing feature fully working

Screenshots

No response

[BUG] dev server for /server not starting due to filename mismatch

Description

@Dun-sin your last commit has a bug
The dev server is not starting because the directory referenced in index.js const User = require('./Schemas/UserSchema'); does not exist

Screenshots

Migrate to Vite

The initial build and load times in create-react-app are very long. The app takes a long time to start up.

On the other hand, using vite, the times are reduced by a significant amount! So, I think migrating to vite can really enhance developer's experience.

[BUG] wrong casting of receiverId to number

Description

wrong casting of userID to type number can lead to undefined behavior inside the chat component.

Whisper/client/src/components/Chat.jsx

Lines 39 to 42 in fc60520

	const userIDs = Object.keys(state).map((item) => Number(item));
	const available = userIDs.length === 0;
	const sendID = userIDs.find((item) => item === senderId);
	const receiverID = userIDs.find((item) => item !== senderId);

for example, if a userID is 061253335021, casting to number removes additional zeros at the start which leads to the value 61253335021. in this case, state[receiverId] returns undefined

Screenshots

[FEATURE] Open graph

Description

An open graph is a preview image that shows when a link is shared on social media

for more info about open graphs read the blog below
https://ahrefs.com/blog/open-graph-meta-tags/

Screenshots

[OTHER] remove signin text

What would you like to share?

Remove the sign-in text in the sign-in page

Additional information

Here's the element to remove

Whisper/client/src/pages/Login.jsx

Line 122 in 3e3a255

<h1 className="text-[2em] font-semibold">Sign-in</h1>

Before contributing, read 👉🏾 this 👈🏾

[FEATURE] Add Typescript Support

Description

As the project grows, we're gonna need typescript to at least help with typing support.
Currently, we're writing types using jsdoc, which is a bit verbose

NOTE: This is not a priority atm, but to serve as a todo

Screenshots

No response

[FEATURE] Add confirmation modal

Description

When a user clicks to log out, there should be a modal asking if they truly want to log out.
This is so that if they accidentally click the logout button, it asks if they are sure they want to log out.

Your Tasks

• Create a modal pop-up, that's triggered when a user clicks on the logout button, Should have two options (yes, no)
• The background for no should be rgb(255 159 28)

Screenshots

Logout button

Before contributing, read 👉🏾 this 👈🏾

[FEATURE] Write better code

If you find a bad code, write a cleaner and better code

[BUG] Login not working

Description

Login isn't working because of the sawo library which is used for passwordless authentication is having some server issues

change the login method, using another library for passwordless or implementing it yourself

Screenshots

No response

[FEATURE] Random Pairing

Description

A user clicking on the start button should see searching until a room becomes available, and then the chatting interface should appear with only two users.

Screenshots

No response

[BUG] Misplacement of semicolon in the sign-in page

Description

When I opened the website from readme, First the sign in page has appeared. After scrolling down, there is a white space and semi-colon at the bottom left of the page.

I would like to work on this issue. Can you please assign this issue to me.

Screenshots

[FEATURE] receive chat

Description

Pairing of users now works, but messages can't be seen on the screen, but they can be seen in the console

Screenshots

No response

[FEATURE] Improve on login system

Description

Currently, login status is only stored in localStorage i.e {isLogged: (true||false)} which means that I can basically login by changing isLogged property to true on localStorage.
This could lead to issues in tracking users and their messages, or even chatting on multiple devices as the same user

Screenshots

No response

[FEATURE] Discussion on How The System Works

Description

@Dun-sin @Dharmik48 I guess now we need to have a discussion on how the system would work from pairing to chatting, etc.
What features would the system be having? would there be:

• video calls?
• group chats?

Pls let's discuss...

Screenshots

No response

[FEATURE] Remove change of colour hover effect

Description

When you hover the start button the colour changes, and it has a text underline(the default style for a link), remove that

Element that the change should apply to

Whisper/client/src/pages/Start.jsx

Lines 21 to 29 in 774dcd3

	<Link
	to="/founduser"
	className={
	'font-medium text-black text-[1.5em] bg-[#FF9F1C] w-[8em] h-[2.3em] mt-5 rounded-[30px]' +
	centerElement
	}
	>
	Start
	</Link>

Screenshots

Before contributing, read 👉🏾 this 👈🏾

[FEATURE] Add Logout button

Description

Currently after logging, there's no way to logout from the app beside manually changing localStorage.isLogged = false.
This is would be a follow up on #36 and #14
With this, I think the we'd have a complete auth system for the app

Screenshots

No response

[BUG] SSO using Google caused in errors

Description

Never logged in before.
Used Google as sign in

Got instant errors at homescreen:

GET https://whisper-app-api.herokuapp.com/api/v1/provider/getProviderServiceRequests/undefined
GET https://whisper-app-api.herokuapp.com/api/v1/app/getUserActiveSubscriptions/undefined
GET https://whisper-app-api.herokuapp.com/api/v1/app/getFriends/undefined

Screenshots

[BUG] errors visiting wallet

Description

Visiting Wallet caused errors
See Screenshot

Screenshots

[DOCS] Add documentation for configuring dev environment for /server and /client directories

Description

Currently, there's no documentation on how to configure your dev environment for /server directory, which would make it difficult for future contributions.

Screenshots

No response

Responsiveness Issue

Description

In small devices, everything in the start (or search) screen appears quite big. Even in other tabs, text appears quite big.

Screenshots

[FEATURE] Use a UI library

Description

@Dun-sin what are your plans on styling/ui of the app?
I think it'd be cool to use a UI library, so we can get a MVP within the shortest possible time instead of using pure tailwind css. Since using a UI library = already made components then we can change it later to match the style we want.

How do we go about this?

Screenshots

No response

[DX] use npm workspaces

What would you like to share?

I noticed that npm install and npm start have to be run separately for the server and client. npm workspaces can be used to make this workflow easier. for reference npm workspaces.

if it is okay I can work on this.

Additional information

No response

[DOCS] Improve directory structure for the app

Description

I think it's better and a good practice to organize directories in a self-describing manner.
Currently, we can't distinguish between Components, Pages and Routes cos of the directory structure (i.e Everything is placed in the components directory).
I'm suggesting we re-structure it to something like this:

src
 +- app // Contains pure js files (i.e services, helpers)
 +- components // Self explanatory
 +- redux // Self explanatory
 +- pages // Self explanatory
 +- routes
     -- index.jsx // Default routes would be located here. This gives us the chance to split routes i guess-ish?
 -- App.css
 -- App.js
 -- index.js
 -- index.(css|scss)
// Other config/important files goes here

I think this is somehow related to #15 , but this is more of like the directory structuring

[DOCS] <Spelling mistake>

Description

I think there is a spelling mistake in the bottom of README. Its cheers and not beers ig.
And also full-stop at the end of the sentence.

Screenshots

[BUG] Search for someone didn't work

Description

I'm actually on the live demo website and whenever click on the start button it displays a page with searching... without displaying anything else

Screenshots

[DOCS] Add Coding Standards

Description

As the project grows, so would contributors hence we'd be needing a consistent coding style/naming conventions. This would bring so many advantages in terms of code readability, maintenance and more importantly, scaling.

This issue covers other issues mentioned previously: #15 , #20 and #40

The goal is to provide a style guide + other tools that would help ensure that the above requirements are met

Screenshots

No response

[BUG] Delay in random pairing on initial load

Description

When searching for a random user, you have to refresh the page before the system actually pairs you.

Screenshots

No response

[DOCS] wrong link in README

Description

View Demo has a wrong link, replace it with the proper link to the site, which can be found in about section of this repo

Screenshots

[DOCS] Improve the README

Description

• Add the screenshot of live/hosted project
• Add the tech stack logo

Screenshots

No response

[FEATURE] Use context api in place of redux

Description

Redux is just too complicated, and overkill for this project (https://twitter.com/reactive_dude/status/1565366045879275522)
And since it's delaying us in creating the MVP, it's just better to use context API for now.

Screenshots

No response

[DOCS] Write comments

Description

Try to understand what the code does and write a comment on how it works using JSDoc syntax

Screenshots

No response