How to Build Lasting Change

Cije-Sanchez — Sun, 19 Jan 2025 20:08:17 +0000

This is a submission for the GitHub Copilot Challenge : Transitions and Transformations

What I Built

"How to Build Lasting Change" is an interactive Three.js visualizer inspired by the widely popular Kurzgesagt video, "Change Your Life – One Tiny Step at a Time" on YouTube. The video delves into the science behind habits, explaining how routines form and how small, consistent changes can lead to lasting personal growth. It offers practical tips for creating and sustaining new habits while addressing the challenges of change.

The visualizer complements the video’s audio by showcasing a mesmerizing morphing sphere that evolves in real-time as the narration progresses.

Why I Built It

The purpose of this visualizer is to create a more immersive experience by combining visual and auditory stimuli. Visual elements add an additional layer of engagement, helping to maintain focus and reducing the chances of the mind wandering.

I aim to mirror Kurzgesagt’s mission of empowering individuals to understand and embrace the psychology of habit formation. This project aspires to motivate users to take small, actionable steps toward sustainable self-improvement while demystifying the process of change.

Demo

Check out the How to Build Lasting Change demo here.

This current deployment plays the Kurzgesagt video, but you can easily modify it to integrate your own content by following the provided guide in the repository.

Repo

Cije-Sanchez / how-to-change

"How to Build Lasting Change" is a dynamic Three.js visualizer inspired by the highly acclaimed Kurzgesagt video, "Change Your Life – One Tiny Step at a Time" on YouTube.

Clone the repository to your local machine.
Open the project folder in Visual Studio Code.
Launch the terminal and run: npm install.
Start the app by executing: npx parcel ./src/index.html.
Ctrl + click the server link (e.g., "http://localhost:1234") to view the app in your browser.
Enjoy exploring and experimenting!

View on GitHub

Copilot Experience

GitHub’s AI tools were instrumental in developing this project:

Autocomplete: Assisted with Three.js syntax for creating and animating the sphere.
Copilot Chat: Helped brainstorm creative approaches to morph the sphere in meaningful and visually appealing ways.
Inline Chat: Generated much of the markup, styling, and Three.js code, streamlining the development process.

Screenshots

Conclusion

By leveraging GitHub’s AI tools, I was able to fast-track development and focus on the core concept. My visualizer aims to motivate users to take actionable steps towards self-improvement 😊.

Gigs AI: A Conversational Chatbot Powered by Aggregated Data from Freelancer and Upwork

Cije-Sanchez — Mon, 30 Dec 2024 06:01:40 +0000

This is a submission for the Bright Data Web Scraping Challenge: Most Creative Use of Web Data for AI Models

What I Built

Gigs AI is an innovative tool designed to aggregate software freelance job listings from popular platforms like Freelancer.com and Upwork. By leveraging Bright Data's scraping capabilities, Gigs AI collects, structures, and presents relevant job opportunities in real time, fine-tuning AI-powered recommendations for freelancers looking to streamline their job search.

Demo

Live Project: Gigs AI Demo Link
Source Code: GitHub Repository

Here are a few screenshots of the application in action:

How I Used Bright Data

Bright Data’s Scraping Browser is central to Gigs AI’s ability to fetch up-to-date software freelance job postings. The scraping process runs every 24 hours, collecting data points such as job titles, descriptions, sources, experience levels, and compensation.

The collected data is stored in a Postgres vector database with embeddings generated using OpenAI’s text-embedding-small. This allows freelancers to search and filter job postings efficiently based on relevance and preferences.

The code for scraping Upwork is located at Upwork Scraper

The code for scraping Freelancer is located at Freelancer Scraper

Architecture

Data Indexing

Data Retrieval

Additional Features:

Job Insights Generation: The application uses OpenAI’s gpt-4o-mini to generate insights about the job based on the posting details.
Structured Schema:

model Job {
  id Int @id @default(autoincrement())
  title String
  description String
  source String
  location String
  link String
  timePosted String
  experienceLevel String
  compensation String
  type String
  jobId String
  Job_embedding_store Job_embedding_store[]
  public_Job_embedding_v2_store public_Job_embedding_v2_store[]
  public_Job_embedding_v3_store public_Job_embedding_v3_store[]
}

Tools Used

Frontend: React + Vite
Backend: Express + Prisma
Database: Postgres with PgVector for efficient vector search
Bright Data: Web Scraper API & Scraping Browser for automated job data collection
AI Models:
- OpenAI’s text-embedding-small for embedding
- OpenAI’s gpt-4o-mini for text generation
Hosting: Amazon EC2 Instance

Key Features

Daily Job Updates: Fetches the latest software freelance jobs from upwork and freelancer.
Advanced Search: Vectorized search allows freelancers to find relevant jobs quickly.
Job Insights: AI-powered summaries help users assess job suitability.

Future Plans

Multi-platform Aggregation: Expand job collection to more freelancing sites.
Improved Performance: Optimize Postgres vector queries for faster search results.
Enhanced User Interface: Add support for saved searches and previous job views.
Dynamic Recommendations: Refine AI suggestions based on user interaction and preferences.

Final Thoughts

Building Gigs AI was an exciting journey into the intersection of web scraping, AI, and freelancing. Bright Data’s tools made it effortless to collect structured web data, while Postgres and OpenAI models provided the backbone for intelligent job matching.

With future improvements, Gigs AI aims to become the ultimate assistant for freelancers seeking software gigs.

Thank you for reviewing my submission!

Forem: Cije-Sanchez

How to Build Lasting Change

What I Built

Why I Built It

Demo

Repo

Cije-Sanchez / how-to-change

Copilot Experience

Screenshots

Conclusion

Gigs AI: A Conversational Chatbot Powered by Aggregated Data from Freelancer and Upwork

What I Built

Demo

How I Used Bright Data

Architecture

Data Indexing

Data Retrieval

Additional Features:

Tools Used

Key Features

Future Plans