What I built

A platform for React developers to create and share their components.

Category Submission:

Search no more, choose your own adventure

App Link

https://atoms-backend-us-east-1-amlbf.mongodbstitch.com/

Screenshots

Code Playground

Profile page

Description

Atoms is a platform for React developers to create and share their custom components, the platform includes a code playground, search form, and user profiles to showcase the components. The app also features GitHub auth integration and the use of the MongoDB Atlas platform including App Services.

Link to Source Code

Permissive License

The code is under MIT license

Background

I tought this app could fit into MongoDB's platform, it uses the Atlas service not only as a database, but for hosting, serverless functions, authentication, and it could be great for other features such as NPM publishing the components through a function Trigger.

The original idea is based on bit.dev, but for now I had to keep it simple and make the app work. I could be working in the complete idea in the coming days.

What's still planned:

• Fork a user's component.
• Publish components to a NPM package.
• Enable more features for code editor.
• Collaboration features using MongoDB Realtime features.

How I built it

The app utilizes a MongoDB Cluster to store custom user data in a collection, as well as user's components. It also utilizes a custom authentication function to signup users using GitHub, it was very easy to integrate this, and when I saw this feature it's pretty good to have so many choises to integrate your own auth methods into the platform.

In the other side, the app was built using App Services for serverless functions and http endpoints, it also uses some auth triggers to collect and update custom user data from GitHub such as the avatar_url, bio, and username.

Finally, the app is hosted in the App Services platform, as of now I haven't had success connecting a custom domain. 🙁

Some quick learnings:

• If you utilize a custom auth function, return an ID the user cannot change later, for GitHub something we could think of is the username, but no, since this function trigger every time the user logs in the returned ID must be the same, GitHub's username can be changed by the user, so it's best to return the user unique ID from GitHub.
• Something I struggled a lot was creating new functions and configuring them for the App Services platform, It's not an easy task and wish we could have some kind of extension or autocomplete for each configuration without having to browse the docs. I think the easies way for now is to use the MongoDB UI, then you can pull the changes to your source code through CLI.