← Go Back to Project List
Riples: Collaborative Social Media
#React#Typescript#Tailwind#Next.js#Vercel#Node.js#AWS#OpenAI APIs

Building a project hosting, sharing, and collaboration platform.

Riples: Collaborative Social Media

Check Riples out: www.riples.app and please give feedback 🙂. Thanks !

Context

Having taken a sabbatical from my job as a data engineer, in a solar manufacturing start-up, I was keen to try my own luck in entrepreneurship. I decided to build a product to solve the problem of wasted human capital on social media (we spend an average of 2hrs on social media, with developing countries spending even more time on these often counter-productive applications).

The idea for the product, Riples, was to have the same “hooks” and “habit building” features behind existing social media, merged with project management and collaboration software features to incentivise user collaboration on any kind of projects. The video below is a good explainer:

I knew the product I wanted to build, but had multiple options for moving forward (eg. test collaborating on problems to learn the problems, build a mobile app prototype ..). I ended up deciding to build a web-app Minimum Viable Product (MVP), and giving myself clear deadlines with targets, to mitigate the risks of spending all my time for nothing.

Therefore, after a month of learning web development technology and figuring out other stuff (BM, name and logo…), I applied an agile approach, for the next 3 months (Sept-Nov) with lot’s of user testing, releases to my network, prioritising features build, gathering and understanding usage data … After which (in Dec 23’), I decided to put this project on the back-burner due to lack of uptake and realising that I wasn’t passionate enough about social media to spend all my time on this project any more. Below you will find more details on this project: Challenges encountered, What I ended up building, and Lessons learned.

Interesting Challenges

There was a lot of fun and interesting challenges with building this web-app, from learning new languages and frameworks like React and Typescript, entrepeunarial challenges like finding the right thing to build or even finding a name and designing a logo. However, there is a lot of tutorials and ressource to help me solve those, so instead I want to highlight 2 AI related challenges I encoutered, as these were novel.

1 - Building an interface with OpenAI’s API for actions and actions approval:

Actions were a new feature introduced in OpenAI’s first developer day (6/11/23), where the LLM process user input and have the ability to call functions with parameters. So I wanted Riples’ users to be able to streamline a bunch of their project management task (eg. Move all tasks related to project X to backlog and update the description to explain it is deprioritised). This was really fun and challenging because it involved back and forth logic between the client / server and OpenAI APIs. Below is a diagram showcasing what I came up with in a first solution iteration

OpenAI API Interface

OpenAI API Client/Server/API Interface diagram to allow user approval on actions on Riples. You can left click on the image for better resolution.

2 - Building a Wizard, like “Clippy” in Excel

I build a “wizard”, which was an overlay button that would always be in the bottom left corner of the web-app that the user could interact with for AI interactions. depending on which page it was opened could:

  • Chat with the user (back and forth) with for example information about a project
  • Onboard the user, with helpers and checkers for certain tasks validations (eg. help the user create a project and display (left screenshot below)
  • Create content for the user based on other entries (eg. breakdown a project into tasks - middle screenshot below)
  • Transform raw text into custom HTML (with headings, fonts, pictures, text formatting …). The idea was to allow more creativity in posts by having an AI generate HTLM rich content based on text.
Riples’ Wizard Variations

Different variations of the Riples’ Wizard, depending on which page the user would click the overlay.

What I ended up building

After three months, I was very far from reaching my targets (20 registered users vs a goal of a 1000 - people could view without logging in but to create they had to log-in), so I decided to shift my focus to another project (also, I was less enthusiastic about building a social media). In the end, I had build a web-app, where any user could:

Social Features:

  • Sign-up and authenticate via email or third party service providers (Github, Google, Linkedin)
  • See a feed of project updates from other users (no machine learning recommendation)
  • Like & Comment on these updates
  • Receive notifications based on likes and comments on their posts

Project Management Feature:

  • Create and manage projects with different visibility (private/public) and collaboration (solo/collab) settings
  • Create and manage Tasks linked to projects
  • Create and manage SubTasks linked to Tasks
  • Manage task and project accessibility for collaborative projects
  • Upload photos to their project cover and project posts
  • Manage and post updates on goals attached to projects

And these were also complemented by quite a lot of AI features. Hopefully, Riples is still live on www.riples.app for you to check it out and give me feedback on it 🙂 !

Riples ERD

Riples Entity Relationship Diagram (ERD). You can left click on the image for better resolution.

Lessons Learned

The biggest lessons learned were entrepreneurial one’s, such as for example the concept of Founder / Product Fit (and that I was not the person for building social media), but here I list what I learned in regard to software development..

Software skills learned:

  • New frameworks: React, Tailwind, Next.js, and TRPc.
  • New languages: TypeScript, and CSS.
  • Authentification with NextAuth.
  • Images uploading and loading with AWS.
  • Complex API and Data Streaming with OpenAI’s API (Data Streaming & Actions).
  • CI/CD with full-stack app.
  • Product on-boarding using react-joyride and custom-made task helper & checker.
  • User testing (UX and UI).

I also learned:

  • Use your own product as soon as possible (in this case for me to manage my project)
  • Should have done more customer interviews before building (to define the problem better, using the “Mom test” principles)
  • I made the error to view the UI as the product, but similar to social media I think the real product was the machine learning algorithm
  • Define value and growth hypothesis early and use data monitoring to prove / disprove your hypotheses and pivot.