red-gold / react-social-network Goto Github PK
View Code? Open in Web Editor NEWSimple React Social Network
Home Page: https://medium.com/@qolzam/create-social-network-by-react-js-fe60010a32e6
License: MIT License
Simple React Social Network
Home Page: https://medium.com/@qolzam/create-social-network-by-react-js-fe60010a32e6
License: MIT License
Would TypeScript or Create react app be of interest? With TypeScript you don't need to worry about proptypes.
Mention a user in a comment using @
for example @Qolzam.
If user1 Add user2 in a circle notification should be appeared only at the first time.
Every time user1 add user2 in a circle, user2 will receive notification. If we add user2 in 3 circles, user2 will receive 3 notifications.
v0.1
react-social-network-next/src/api/FileAPI.ts
(39,5): Type '(this: FileReader, readerEvent: FileReaderEvent) => void' is not assignable to type '((this: FileReader, ev: ProgressEvent) => any) | null'.
Type '(this: FileReader, readerEvent: FileReaderEvent) => void' is not assignable to type '(this: FileReader, ev: ProgressEvent) => any'.
Types of parameters 'readerEvent' and 'ev' are incompatible.
Type 'ProgressEvent' is not assignable to type 'FileReaderEvent'.
Property 'getMessage' is missing in type 'ProgressEvent'.
on npm start exception thrown:
Failed to compile
/react-social-network-next/src/containers/login/LoginComponent.tsx
(261,88): Argument of type '(theme: any) => { textField: { minWidth: number; marginTop: number; }; contain: { margin: string;...' is not assignable to parameter of type 'Record<"link" | "contain" | "paper" | "textField" | "bottomPaper", CSSProperties> | StyleRulesCal...'.
Type '(theme: any) => { textField: { minWidth: number; marginTop: number; }; contain: { margin: string;...' is not assignable to type 'StyleRulesCallback<"link" | "contain" | "paper" | "textField" | "bottomPaper">'.
Type '{ textField: { minWidth: number; marginTop: number; }; contain: { margin: string; }; paper: { min...' is not assignable to type 'Record<"link" | "contain" | "paper" | "textField" | "bottomPaper", CSSProperties>'.
Types of property 'paper' are incompatible.
Type '{ minHeight: number; maxWidth: number; minWidth: number; textAlign: string; display: string; marg...' is not assignable to type 'CSSProperties'.
Types of property 'textAlign' are incompatible.
Type 'string' is not assignable to type '"left" | "right" | "center" | "start" | "end" | "inherit" | "initial" | "unset" | "justify" | "ma...'.
This might help:
https://github.com/blakeembrey/tslint-config-standard
I tried uploading a profile image after running the app locally
Image should be uploaded
Image did not upload . Please teach me what I am missing. Does this app need to be connected to a Google cloud storage object for image upload to be implemented or it needs another server-less backend like AWS S3 bucket? Please guide me on how to go about it.
x.y.z
I have POC app I want to build am considering options. I was wondering why you choose Firebase vs other cloud providers, I myself am tempted to try to modify my own version this to work with AWS over with graphQL. What do you think of that approach?
Try to close notification from notification popup
The clicked notification must closed
Nothing happened
getting error in console (Uncaught TypeError: notifyActions.dbDeleteNotify is not a function)
x.y.z
When sidebar is open an over layer should be on the main contain so when user click on over layer sidebar will be closed.
I git cloned the master in order to see the effects of your last commit relating to picture upload
Then proceeded to install and setup app through firebase
I ran web server
I expected to see the create account / login page
I did not see the create account / login page. I only saw a blank page. Please find attached printed screen below
x.y.z
My team mate, Ayomide and I created accounts to demo the app
Ayomide then
1 Followed me
2 Commented on my post
3 Voted on my post
There shouldn't have been any expected result because those are normal interactions by a user.
Ayomide surprisingly received three notifications that read:
1 Ayomide Otunba follow you
2 Ayomide Otunba add comment on your post
3 Ayomide Otunba Vote on your post
What this means is that, Ayomide Otunba received three notifications that were supposed to have been mine. She was not supposed to have received any of the notifications above for actions that she carried out herself. I was supposed to have been the one receiving the notifications.
x.y.z
I was testing the demo app on my iphone
I decided to view my notifications through my iphone
I expected to
be able to view all my notifications through the popover
I could only see one notification out of the 8 notifications I had as you can see evidenced in the screenshot attached. The popover isn't showing my other 7 notifications. Please help, thank you as always for your wonderful work.
x.y.z
Try to debug the application with Debugger for Chrome plugin in vs code
Break points ignored
x.y.z
How do you protect users from writing to other users data, once they are authenticated?
I just finished installing and setting up the app through Firebase
I tried posting something
I expected to be able to upload a picture from my computer to my newsfeed and avatar.
I was able to post words to the newsfeed, however I was not able to upload any picture to neither my newsfeed nor my avatar. Please help.
x.y.z
Maybe you know what the difference between this two examples:
export let firebaseAuth = firebase.auth
// and
export let firebaseAuth = firebase.auth() // instead every time call firebaseAuth() just firebaseAuth.someMethod/Property
For better performance, resizing window should use debounce to reduce calling times.
redux-thunk is sweet simple and easy to work. However since project grow it's more difficult to manage side effects and we need more complicated solutions but reliable.
There are two remarkable options redux-observable and redux-saga. Each has it's own advantage but redux-saga seems more clear to manage stuff and it's more handy (my personal idea :) ). In some cases in current project redux-saga solving problems with less complex code. May in other situations redux-observable is better!
I plan to create branch name v0.5
to keep only redux-thunk
version of React Social Network. Therefore v0.6
would be React Social Network with redux-saga
.
I appreciate any contribution ๐
It would be great for users to reset their password. I think it would be great to have this feature.
If you want I can do this for you for the client. Maybe you could do the firebase part?
Add send feedback page.
Growing project and data handling immutable objects is more complicated. We also ca have Other benefits by using immutable JS .
Given that only google has this concept of circles, I'm wondering if circles is the best approach.
Instead of organising contacts under circles, perhaps it would be better to store a users contacts/followings in a flat structure. If further organisation would be needed later the user could tag the contact via a new table, for example usertags > user > Tag1 > [userID1,userID2]
Mind you this might make it harder to query to find all users under the same tag for all users.
Forget password page.
One of the difficulties with building apps on top of Document DB's is querying. I'm torn between using AWS dynamoDB and RDS postgres on AWS.
Regarding this app Firebase have a new database called Cloud Firestore, which you might be interested in.
One thing that I would like to be able to do in this Social network would be to tag users. This tag would be a many to many relationships. Ie imagine there is an attribute of type skill or endorsements (like in LinkedIn). Would this be easy to do with Firebase? I guess I could have 2 more tables, one to hold the skills and another to map the skills to the various users.
Hello , I am getting below error... Please help
ts-loader: Using [email protected] and C:\Users\handm\Dropbox\MundelProjects\React\GitProjects\react-social-network\tsconfig.json
Could not find implementations for the following rules specified in the configuration:
ter-indent
no-extra-boolean-cast
Try upgrading TSLint and/or ensuring that you have all necessary custom rules installed.
If TSLint was recently upgraded, you may have old rules configured which need to be cleaned up.
Failed to compile.
C:/Users/handm/Dropbox/MundelProjects/React/GitProjects/react-social-network/src/config/environment.dev.ts
(5,13): " should be '
Drop a name and a link!
1 While running a demo of the app on http://greensocial.herokuapp.com
2 I clicked on the edit profile button
3 I added a few lines about me to the Tagline
I expected that my tagline will show up on my profile upon updating it.
Can you educate me on the purpose of the tagline as I thought it was meant to be like the bio feature on Instagram
Nothing showed up on my profile.
x.y.z
Add pagination ability for loading post on a page with 5 posts per page.
โ 28 tests completed
โ 26 tests completed
โ 2 tests failed
ERROR in ./app/components/Master/Master.jsx
ERROR in ./app/tests/reducers/authorizeReducer.test.jsx
x.y.z
Check if circle name exist before adding new circle.
Would be great to have some info on where and how you deployed a production build of this project.
I suppose various people would want to host it in various places.
https://firebase.google.com/docs/hosting/
http://docs.aws.amazon.com/AmazonS3/latest/dev/WebsiteHosting.html
@Qolzam I know you wrote implementing search under your todo list, that said, search is something that I am thinking of implementing at this time and I was wondering if you could direct me on how to go about it. In addition, could you kindly direct me to a tutorial or something I can read to gain a better understanding.
I have looked into AWS Mobile Hub and Appsync. I have been thinking about the possibility of using an AWS serverless architecture, but my inexperience has been impending my efforts. Any help or explanation will be appreciated.
I have no idea how to implement these solutions, but have you seen them? Any thoughts?
https://github.com/toyeebgodo/aws-mobile-appsync-events-starter-react
https://github.com/aws/aws-amplify
https://firebase.google.com/docs/firestore/solutions/search
https://github.com/deltaepsilon/firebase-search
https://github.com/firebase/flashlight
Thank you so much as always.
Add my account page.
Move localization support from redux-thunk to redux-saga.
Reply to comment with mentioning the person and focusing on comment text field.
1 Running the app on my local machine
2 Opening two different browsers ,
3 Log in with a differed user account on each browser
If a user votes a post the account in that posted must get a notification in the broswer.
I have to refresh the page to get notification from other folowers
x.y.z
Loading login page with Firefox
To see icons for Google + , Github, Facebook, etc
icons not appear
x.y.z
All the domain should have same structure and optimized for every kind of database.
@Qolzam, you mentioned here (#15) that "The next version of this project migrate to typescript with many new awesome stuff, cleaner code, high performance, with AWS and Firebase back-end, easy deploying and CLI to modify project easily," and you also said here (#36) that , ". . . In the new version I have added both reset password and User confirmation #23. I'm trying to make time to release this update."
Given that releasing this projects as open source is big-time charity on your part and your other charitable project contributions (such as this: https://github.com/Qolzam/react-mobile-social ) to the developer community has been nothing less than magnanimous, my humble question is, how's the work on the new release coming along? Any estimation as to when you will be releasing it? Any other information you care to share? Thank you as always for your immense contribution to my life as a developer.
Via email if possible.
I noticed that you use jsx instead.
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.