Forem: Freddy González

Latio Team: A community for tech hackers building together

Freddy González — Mon, 28 Oct 2024 06:54:14 +0000

This is a submission for the Wix Studio Challenge: Community Edition.

My Community Platform

Latio Team is a community built for tech builders based in LATAM, it's a place to interact, learn, grow, and connect together while participating at hackathons. The community page includes the next features:

A talent pool: members get their profile listed on a public page which aims to be seen by recruiters or other entrepreneurs.
Job opportunities: a job board that showcases the latest remote jobs for our members (API provided by RemoteOK), members can see and apply to job posts within the community page.
Hackathon Listings: the place to share and post new hackathon opportunities for our members.
Connect: a space to talk with other members, post work updates, and also find new collaborators.
Work Inquiries: each member profile features a contact button where recruiters can send them a message or ask for a work inquiry. Members then can see the received messages inside a custom listing page without having to expose their private details.

Demo

Project link: https://fredoist.wixstudio.io/latio-team

Homepage:

Talent Pool:

Job Board and Post

Hackathon Listings:

Connect:

Member Profile:

Work Inquiry form and listings:

Development Journey

Building with Wix's Studio and Velo API's was quite easy if you already know JavaScript.

All the documentation for Velo APIs is clear and very complete, also, the editor inside Wix Studio has some great autocomplete features which made very easy to use. Once you start building and testing the editor you understand how it works and you can implement new APIs quickly.

As an additional point, Wix's templates let you build a stunning website very fast, the design adapts to each new App for element you add which it's pretty cool since you don't need to touch anything else.

This is the code blocks for some of the features so you can replicate them:

Job postings

import { Permissions, webMethod } from "wix-web-module";
import { getJSON } from "wix-fetch";

const formatPrice = (p) =>
    new Intl.NumberFormat('en-US', {
        notation: 'compact',
        maximumFractionDigits: p < 1 ? 3 : 1,
    }).format(Number(p));

// GET call using getJSON
export const getJobs = webMethod(Permissions.Anyone, async () => {
    const response = await getJSON(
        "https://remoteok.com/api",
    );
    const jobs = response.slice(1).map(job => {
        job._id = job.id;
        job.salary_range = `\$ ${formatPrice(job.salary_min)}-${formatPrice(job.salary_max)}`
        job.company_logo = job.company_logo ? `https://remoteok.com/cdn-cgi/image/format=auto,fit=contain,width=100,height=100,quality=50/${job.company_logo}` : null;
        job.logo = job.logo ? `https://remoteok.com/cdn-cgi/image/format=auto,fit=contain,width=100,height=100,quality=50/${job.logo}` : null;
        job.image = job.company_logo ?? job.logo ?? `https://ui-avatars.com/api/?name=${job.company}`
        return job;
    })
    return jobs;
});

Job page

import { ok, notFound, WixRouterSitemapEntry } from "wix-router";
import { getJobs } from "backend/fetch-jobs.web"

export async function job_Router(request) {

    // Get item name from URL request
    const slug = request.path[0];

    // Get the item data by name
    const jobs = await getJobs();
    const data = jobs.filter(job => job.slug === slug)

    if (data.length) {
        const job = data[0];

        // Define SEO tags 
        const seoData = {
            title: job.position,
            description: "This is a description of " + job.position + " page",
            noIndex: false,
            metaTags: [{
                "property": "og:title",
                "content": job.position
            }, ]
        };

        // Render item page 
        return ok("job-page", job, seoData);
    }

    // Return 404 if item is not found 
    return notFound();
}

export async function job_SiteMap(sitemapRequest) {
    const jobs = await getJobs()

    // Convert the data to site map entries
    const siteMapEntries = jobs.map((job) => {
        const data = job;
        const entry = new WixRouterSitemapEntry(job.slug);
        entry.pageName = "job-page"; // The name of the page in the Wix editor to render
        entry.url = "/job/" + job.slug; // Relative URL of the page
        entry.title = data.position; // For better SEO - Help Google
        return entry;
    });

    // Return the site map entries
    return siteMapEntries;
}

Sending inquiries for any member

import { Permissions, webMethod } from "wix-web-module";
import wixData from "wix-data";

export const sendInquiry = webMethod(
    Permissions.Anyone,
    async (username, email, details, budget) => {
        const results = await wixData.query("Members/PrivateMembersData").eq('slug', username).find()
        const member = results.items.length > 0 ? results.items[0] : null;
        if(member) {
          const memberId = member._id;
          const result = await wixData.save("WorkInquiries", {
            recipientId: memberId,
            contactEmail: email,
            details,
            budget
          })
          if(result) {
            return true
          }
        }
        return false;
    }
);

Fetching member inquiries

import { Permissions, webMethod } from "wix-web-module";
import { query } from "wix-data";
import { currentMember } from "wix-members-backend"

export const getInquiries = webMethod(
  Permissions.SiteMember, 
  async () => { 
    const member = await currentMember.getMember();
    const data = await query("WorkInquiries").eq('recipientId', member._id).find();

    return data.items;
  }
);

Velo APIs

wix-data: it is used to store, fetch, and render custom collections data and also member's data in public/private features.
wix-fetch: job posts are provided by RemoteOK's API and these are fetched using Wix's fetching methods, then jobs are rendered into repeaters blocks.
wix-router: job posts also are rendered into its own page for which Wix's router is used.
wix-members-backend: it is used to link the inquiries form to a custom collection, once data is sent the memberId is retrieved using this API by matching the profile slug, it then is passed to the collection with the form data.
wix-location-frontend and wix-window-frontend: these are simply used to get URL data such as the path or member slug.

Wix Apps

Wix Members Area: used for user profiles and authentication.
Wix Groups: used for the connect feature.
Wix FAQ: to include a FAQ into the homepage.
CMS: I used some CMS connections to display data inside pages.

VidSnap: Effortless Screen Recording powered by Pinata

Freddy González — Mon, 14 Oct 2024 03:34:32 +0000

This is a submission for the The Pinata Challenge

What I Built

VidSnap is a screen recording app to easy capture and share your screen. All you need to do is click "Start Recording" and share the preview URL with anyone. It is private and your recordings are stored securely on Pinata Cloud.

Demo

You can see VidSnap in action here: https://vidsnap-app.vercel.app/

Or in this quick screen recording 😉: https://vidsnap-app.vercel.app/v/019288f7-d95f-7eef-bcd4-7c2f00693508

You can start capturing anonymous recordings or feel free to sign up with a username and password. Signing Up will also store the videos under your account so you can access all of your recordings within the homepage.

Recording Feature:

This is the preview of your video recordings; you can share the URL with anyone so they can view the recording too.

My Code

fredoist / vidsnap

VidSnap: Effortless Screen Recording App

Get Started

Clone the project into your local machine.
Link it to a Vercel project for API function testing (use npm i -g vercel).
Sign up at Pinata Cloud and create a new API key.
Grab the JWT key and add it as an environment variable in Vercel vercel env add PINATA_JWT
Replace your Gateway domain at /api/video.js
Run the dev server vercel dev

Screenshots

Home page

Recording preview

View on GitHub

More Details

Pinata was used for all of file and metadata storage.

I have created four API endpoints which interact with the Pinata API.

/api/file.js handles all of the file upload and metadata manipulations as well as file deletion. Here we use different HTTP Methods for each action. I'd like to note an advantage of Pinata is that we can send different types of file data such as blobs, so in this use case we can convert the recording stream to a blob and send it directly to the API.
/api/files.js retrieves all of the files within a group_id. This is an interesting and useful feature from Pinata which allowed to store each user files separately without the need to implement a database.
/api/group.js creates a new group for each user, the group_id is then used to identify user's files in the files endpoint.
/api/video.js gets a signed URL for a video recording and redirects the request to it, this endpoint is used for embedding the videos in the app.

The web app was made using AlpineJS for interactivity, TailwindCSS for styling, Clerk for user authentication, and Vercel for deployments. This stack allowed me to quickly build and deploy an MVP within 24 hours.

atoms: create and share your react components

Freddy González — Fri, 09 Dec 2022 04:43:31 +0000

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

fredoist / atoms

Create and share your React components

atoms

Create and share your react components with an integrated code playground powered by MongoDB

View on GitHub

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.