connect's Issues
The ability to create an account
Our users cannot be users unless we enable that functionality.
With this issues we aim to have a method of account creation from both the mobile and web view.
This will capture user data that we seem to be necessary to operate flawless on the community chats.
Back button on desktop to get back to account screen
Until we have a formal group switcher, a back button which takes you back to the account screen would be nice.
Creating private or public channels inside a larger group. Which members can subscribe to
For example,
Joe streams video games. Joe plays 5 different games.
Joe wants to separate his games underneath his Joe
Community.
So it would be /joeCommunity/apexlegends
or /joeCommunity/fortnite
as sub communities
Similarly what if Joe has a team and his team is there to help him with his business. Well we don't want to mix /joeCommunity/apexlegends
with /joeCommunity/marketinteam
so we need to privatize channels.
Ability to respond to a post as a comment
We call this a Message. So once a user is inside of a post they have the option to respond to the post.
By writing a message this enables the user to engage in a conversation in a thread.
CSRF protection
Look into adding CSRF protection.
Use document scrolling on mobile
Using nested <ScrollView>
s on mobile leads to a kind of broken experience.
Fix bug where one newline becomes two in post input
API client secrets
Currently anyone can use the API when un-authenticated. We should have API client secrets to make sure only approved clients can use our API.
- On web, we should store our client secret in the API proxy. That way it can’t be seen in client side code.
- I’m not entirely sure where to put it for native code.
QA Plan
We need to put together an initial plan for Quality Assurance (QA) testing. We don’t need to hire anyone just yet, but we do need to run the app through various tests on our primary platforms.
- Web Desktop Chrome MacOS
- Web Desktop Chrome Windows
- Web Desktop Firefox MacOS
- Web Desktop Firefox Windows
- Web Mobile Android
- Web Mobile iOS
- Android
- iOS
- iOS (iPhone X)
Browser snapshot testing
I believe browser snapshot testing is one of the most effective ways to prevent UI regressions. I want to add browser snapshot testing to the Connect test suite. These can also act as integration tests, but could we make them unit tests as well?
Roughly what’s involved:
- Spin up all parts of Connect.
- Launch headless Chrome with https://github.com/GoogleChrome/puppeteer
- Navigate the app and take screenshots!
API server production build
A big missing part of #17 that I haven’t done yet is building the API server code for production. I have a development script with babel-watch
but that’s not close to viable for production.
connect/api/server/package.json
Line 7 in 7e7c02d
The tricky part here is api/server
needs to import the built code from api/client
. Which is where I gave up when I tried 😛
Let’s use Babel to compile TypeScript since that’s what we do everywhere else. (Including development mode.) I also want to make sure that async/await is not compiled so we can take advantage of V8’s performance work on async/await.
Analytics
We need some basic form of analytics in the app. If not for MVP then soon after MVP.
Setup React Native mobile app
I’m pretty convinced that for this product to be successful we will need a React Native mobile app. Currently, the web app is Next.js with react-native-web
because I want to maximize code sharing between native mobile and web.
We need to set up the React Native mobile app. Currently, I have some basic UI code in workspaces/web
. Let’s try to get that into a React Native app. As we build more of the UI it should seamlessly work cross-platform. (Ideally)
I’d like to use Expo, but I want React Hooks more then I want Expo 😛
Deploy iOS app
Baruch’s suggestions
From Slack:
Nice to have features:
Drag to refresh
View summary of latest post or some indicator of how many new posts exist next to a convo
Show members of group somewhere?
Header navigation
There needs to be a header or hamburger menu for mobile that allows the user to perform a few actions:
Log in: A navigation action that takes a user to the login page.,
Log out: This clears a users session and navigates them away from any Protected resource,
create account: A navigation action that takes a user to the create-account page,
forgot password: navigates a user to the forgot password page.
Deployment
We gotta deploy this thing. I’d like to use Digital Ocean for that: https://www.digitalocean.com
I’m hoping @mdgozza would be interested in doing this.
Things to deploy:
- Postgres Database
- API Server
- Web Server (the web server runs a small API proxy, mostly it just serves static files tho)
The ability to login
After a user has successfully created an account we need a form to allow the user to login.
This will need to be both implemented on the web view and the mobile app.
Whether this be by username or email address we need a form that will log the user into the product.
Realtime comments
@calebmer
Postgres has listen/notify functionality. Maybe we can just use that? https://www.postgresql.org/docs/current/sql-notify.html
Does it scale though, is the question.
If we can use Postgres for realtime, that would be awesome.
All of the privacy logic is in Postgres already so that means we wouldn’t have to replicate privacy rules.
Some resources:
• Ruby Postgres job queue: https://github.com/chanks/que
• Rust Postgres job queue: https://github.com/sgrif/swirl
The current plan is to use Digital Ocean for infrastructure. With this infra in place the question now becomes are we able to leverage any services to help handle Realtime comments/notifications. Could we tap into https://aws.amazon.com/sns/ for our needs of push notifications and for realtime notifications?
This really depends on how we want to build our system. We could go the Postgres route and build a completely custom notification handler but this might take some time and derail our MVP date. If this is okay this may be the route.
Using AWS from the beginning doesn't intrinsically tie us to them forever. Their pricing model is advantageous for our beginning, it's pay as you go, for our immediate short term goals of an MVP by the 15th of May this looks really good. Another note is that AWS SNS (Simple Notification Service) is proven and used in production in many places. It's well documented and relatively easy to work with.
Pin scroll view to bottom when scrolling down
This will fix the issue people observed where sometimes comments appear underneath the comment input bar. This will also improve the experience as people scroll up and new posts. are added.
Doing this well will require making native changes.
Sign cookies with a secret key only known by the server
This is a takeaway from the thoughtbot Application Security guide.
Cookies are user-controlled input and, therefore, should be treated with suspicion. If possible, don't rely on a cookie.
Cookies can be copied between browsers. Just because a request sends a cookie does not mean that the cookie was sent by the user's original browser. It might come from curl.
One way to retain control over the cookie data is to sign it using a secret key only known by the server. Rails does this for you.
We use cookies to hold user authentication tokens. Think about the lifecycle of a cookie and how to secure them.
Website landing page
This is a simple website that allows people to view a short description about connect and a way to contact the company
Error handling
If a page does not exist, we need something to show the user that is not “TODO”. Preferably we would have different 404s for:
- Group not found
- Post not found
Also, a 404 page could mean you don’t have access. It might still exist.
Group member list
Create community database table
Communities need a table in the database. I don’t know precisely everything a community will need yet, but we should definitely start with a database table.
Android
While the app is a React Native app, I haven’t even opened it on Android. I’ve also only been installing native modules on iOS. So we need to do work to get Android running.
I’m not putting this on the Alpha milestone, but since many of our Alpha testers will have Android phones may this should be a part of Alpha?
Create some test data
We need some test data to make development easier. I was thinking about lifting some test data from our Slack group.
If you look here you’ll see I already lifted a conversation between @baruchadi and @Domthegrom 😛
connect/workspaces/web/pages/index.tsx
Lines 11 to 103 in 0e7143a
This test data should be a SQL script in workspaces/database
somewhere.
Push notifications
This is for the implementation of push notifications using firebase https://firebase.google.com/docs/cloud-messaging/ios/client
Destroy the API proxy
It adds way more complexity than it’s worth.
The ability to join a community
Once a user has created an account and logged in they should now have the ability to see what communities they have been invited to.
If the user has been invited to a community they should have an area to view invites and to choose if they want to join or not.
Or will the user automatically join a community once they have been invited?
I've thought of a few different scenarios as to how a user could be invited to a community.
- By a link that could potentially expire
- By being invited from the app. This would be a member in a community is part of a group and searches to add a new community member by username/email.
Ultimately here we need to decide which methods of invitations we will support.
Warn if the user tries to close an editor with unpublished content in it
Navigating away from an editor with content will destroy the contents. We should make sure to warn a user about this with a popup. As is standard.
Cache persistence and eviction
The client-side data cache should:
- Persist across page loads. We should use IndexedDB for this.
- Evict entries using an LRU algorithm if we end up caching too much.
- Purge all entries if the user signs out.
Accessibility
Make sure Connect is accessible.
- Keyboard accessibility
- Color accessibility
- Screen reader accessibility
Continuous Integration
We should be running:
- TypeScript
- ESLint
- Jest
On every commit to master
. Once more people start contributing and we get more organized, let’s also move to a PR model where you can only merge to master after tests pass.
Ability to view a post
A user in a community should be able to view a post by clicking on the post body once inside of the post the user will be able to read the entire post body contents
Markup
Some kind of markup format for posts and comments to support basic formatting like italics bold and…
- lists
- yay
Get rid of patch-package and use forks
I don’t entirely trust patch-package
. I trust forks more. Like "react-native": "npm:@calebmer/[email protected]"
.
Entity Framework
This is a wish of mine. I would like our backend to have an entity framework. An entity framework would allow us to elegantly express business relationships without having to write complex SQL queries all the time. Right now, I’m not worrying too much about an entity framework since at least a typed API layer abstracts the backend away from the client, but it’s something I’d like eventually.
Windows design pass
@mdgozza showed me Connect on Windows. It has really ugly search bars 😅
We should do a design pass to make sure Connect on a Windows web browser looks good.
Mobile web design pass
The experience of Connect on the mobile web could be a lot better. There a lot of details which are slightly off.
I’ve been focusing on the native iOS and Android apps as the primary mobile experience but at some point we should do a mobile web design pass.
Action required: Greenkeeper could not be activated 🚨
🚨 You need to enable Continuous Integration on Greenkeeper branches of this repository. 🚨
To enable Greenkeeper, you need to make sure that a commit status is reported on all branches. This is required by Greenkeeper because it uses your CI build statuses to figure out when to notify you about breaking changes.
Since we didn’t receive a CI status on the greenkeeper/initial
branch, it’s possible that you don’t have CI set up yet. We recommend using Travis CI, but Greenkeeper will work with every other CI service as well.
If you have already set up a CI for this repository, you might need to check how it’s configured. Make sure it is set to run on all new branches. If you don’t want it to run on absolutely every branch, you can whitelist branches starting with greenkeeper/
.
Once you have installed and configured CI on this repository correctly, you’ll need to re-trigger Greenkeeper’s initial pull request. To do this, please click the 'fix repo' button on account.greenkeeper.io.
Obfuscate IDs
Currently IDs are represented everywhere as integers. This is a fine representation for an ID except now we’ve got ourselves the German tank problem.
Investors, potential customers, and hedge funds can easily estimate how much activity there is on Connect. They can do this by:
- Creating a post.
- Waiting one day and creating another post.
- Take the post ID from 2 and subtract the post ID from 1.
- That’s the number of posts people made on Connect that day.
Analytics on app usage are a competitive advantage we don’t want to give away. Especially not to hedge funds. We can solve this by introducing some obfuscation function which takes an integer ID, scrambles up the bits based on some secret, and encodes the result in base 16 or something.
Such an obfuscation is crackable if you know the exact algorithm. That’s ok, I only care about making it hard. If making it impossible to crack would sacrifice performance then I prefer making it hard over making it impossible.
Add some method that needs authorization
Currently, all the API methods are unauthorized which means we haven’t yet needed to figure out how authorization should be implemented. That needs to be done…
Direct Messaging
Who wants to own the direct messaging backend? Here are my current thoughts on what the backend looks like:
- Postgres for persistent message storage.
- Messaging service like RabbitMQ or Kafka for push notifications and real-time updates.
Here’s another thought…do we even need Direct Messaging? I don’t think we need it for an MVP.
Group Switcher
Placeholder for now. Will add more details soon.
Use Expo’s SecureStore for handling mobile tokens
Currently we put our session tokens in AsyncStorage
which is not secure. Instead we should use Expo’s SecureStore
.
Mentions
In posts and comments users should be able to mention other users with @
. For example: @calebmer how ya doin?
. That should send a notification to calebmer
’s account and render as a link to calebmer
’s profile when the post or comment renders.
Uploading images and other media
We need to let our users add images to their posts!
HSTS
Add HSTS header to appropriate web servers.
Strict-Transport-Security: max-age=31536000; includeSubDomains; preload
Resources
The ability to post in a community
A user that is part of a group has the ability to post a message.
I'll need some more information in the comments as to what specific rules we may want to instill on the posting process or if no rules apply.
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.