dun-sin / whisper Goto Github PK
View Code? Open in Web Editor NEWA fun Application to have a random chat with people safely
Home Page: https://whisper.favour.dev/
License: MIT License
A fun Application to have a random chat with people safely
Home Page: https://whisper.favour.dev/
License: MIT License
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
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.
No response
There's an alert when the logout button is clicked, it should be removed.
Remove this line👇🏾
Before contributing, read 👉🏾 this 👈🏾
Change the background colour to the primary colour (already declared in tailwind) for search component.
bg-primary
to the div below👇🏾Whisper/client/src/pages/Searching.jsx
Line 71 in ef002eb
rgb(255 159 28)
Whisper/client/src/pages/Searching.jsx
Line 72 in ef002eb
Before contributing, read 👉🏾 this 👈🏾
Currently, there's no documentation on how to configure your dev environment for /server directory, which would make it difficult for future contributions.
No response
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.
@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?
No response
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
No response
If you find a bad code, write a cleaner and better code
@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
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
No response
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.
No response
Currently, GH action checks fail after PRs, it'd be nice to have all checks pass unless the pr has a bug
TODO
No response
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.
no
should be rgb(255 159 28)
Before contributing, read 👉🏾 this 👈🏾
@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:
Pls let's discuss...
No response
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
Currently, it's unclear if users are being properly paired. We need to get the pairing feature fully working
No response
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.
No response
Change the community discord link to this 👉🏾 https://discord.gg/ufcysW9q23
find it here
Before contributing, read 👉🏾 this 👈🏾
No response
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
No response
Redux is no longer a dependency of the project hence it needs to be removed from the readme's Built With section.
No response
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).
In Github actions, npm install
is used to install dependencies, but using npm ci
is much better
Change Github actions to use npm ci
instead of npm install
No response
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
No response
for more info about open graphs read the blog below
https://ahrefs.com/blog/open-graph-meta-tags/
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_
No response
Try to understand what the code does and write a comment on how it works using JSDoc syntax
No response
When searching for a random user, you have to refresh the page before the system actually pairs you.
No response
Docker compose will make it simple to start the projects and mongo db.
No response
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
No response
A few UI improvements could go a long way on this page.
No response
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.
No response
No response
README
gitpod.yml
fileNo response
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
No response
Remove the sign-in text in the sign-in page
Here's the element to remove
Whisper/client/src/pages/Login.jsx
Line 122 in 3e3a255
Before contributing, read 👉🏾 this 👈🏾
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
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
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.
No response
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
Before contributing, read 👉🏾 this 👈🏾
Pairing of users now works, but messages can't be seen on the screen, but they can be seen in the console
No response
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.