DEV Community: chimichimi123

Building HiddenGems: A Music Discovery Platform

chimichimi123 — Tue, 06 Aug 2024 00:31:49 +0000

Creating HiddenGems was a rewarding journey, aiming to connect music enthusiasts with lesser-known tracks using the power of Spotify's vast library. Here's an overview of how I developed this lil project.

Project Overview
HiddenGems is a full-stack web application where users can discover and share obscure songs, link their Spotify accounts, and interact with a community of music lovers. The app features:

User Authentication: Secure login and account management using Flask-Login and Flask-Bcrypt.
Spotify Integration: Users can link their Spotify accounts to fetch playlists, liked songs, and other personal data.
Music Discovery: Displaying lesser-known songs and albums, allowing users to explore new music.
Community Interaction: Users can view each other's profiles, share recommendations.
Backend Development
The backend was built using Flask, with SQLAlchemy for database management. Key components include:

User Management: Models for User, SpotifyAccount, Song, and LikedSong, with relationships defined to manage user data and Spotify information.
API Integration: Routes to handle Spotify authentication, fetching user data, and saving relevant music information in the database.
CRUD Operations: Full CRUD actions for managing user profiles, liked songs, and reviews.
Frontend Development
The frontend, developed with React, focuses on a user-friendly interface for seamless interaction. Major elements include:

Authentication Forms: Using Formik for form handling and validation.
Profile Pages: Displaying user information, favorite songs, and artists with intuitive navigation.
Music Discovery Pages: Featuring lists of obscure songs and detailed views for each song and artist.
Search Functionality: Allowing users to search for songs and artists within the platform.
Challenges and Solutions
One of the significant challenges was handling the OAuth flow with Spotify. I ensured secure token management and seamless data retrieval by storing access and refresh tokens securely in the database. Another challenge was optimizing the loading time when fetching and displaying large amounts of data, which I mitigated by implementing efficient querying and caching strategies.

Future Enhancements
To further enhance HiddenGems, I plan to introduce more social features, such as user comments and collaborative playlists. I'm also integrate machine learning algorithms to provide personalized music recommendations.

Creating HiddenGems was a fulfilling experience that helped me learn many new things, combining the excitement of music discovery with the technical challenges of web development. It was definitely one of the most technoligically rewarding projects I've done.

How to work with an external API to seed your database

chimichimi123 — Wed, 10 Jul 2024 21:43:35 +0000

Seeding a database with data from an external API can be a super great way to populate your application with real world data. whether it be product information, user data or something else entirely like geographical details, using an external API can save you a lot of time and effort in the long run. In this blog I'm gonna kinda go over how to work with an external API specifically for seeding your DB (if that wasn't obvious from the title).

1, Choose the right API

First step might seem a bit obvious but you need to choose the right API for your application. A few key things to consider are the data accuracy, the limit rate, update frequency and the routes provided, not all API's are equal, some may be for the same thing, but one may provide much much more information than the other. In this example I'll just use a hypothetical API that provides information about books.

2, Setting up your project

Make sure that you alreadt have a database and project set up, I'll be going off of Flask with SQLAlchemy for this example so for that your project structure should look something like this

/myapp
    /models.py
    /app.py
    /seed.py
    /requirements.txt

3, Create your models

You need to define the database models that are going to store the API data, so like if you're working with the book data your model would look something like this

class Book(db.Model):
    id = db.Column(db.Integer, primary_key=True)
    title = db.Column(db.String(150), nullable=False)
    author = db.Column(db.String(100), nullable=False)
    published_date = db.Column(db.String(10))
    isbn = db.Column(db.String(13))
    pages = db.Column(db.Integer)
    cover = db.Column(db.String(150))
    language = db.Column(db.String(50))

4, Fetch data from the API

To do this you need to write a script to fetch data from the external API. this script will basically just parse the API response and insert the data into your database, below is an example I wrote.

def fetch_books():
    response = requests.get('https://api.example.com/books')
    if response.status_code == 200:
        return response.json()
    else:
        raise Exception('Failed to fetch data from API')

def seed_books():
    books = fetch_books()
    for book in books:
        new_book = Book(
            title=book['title'],
            author=book['author'],
            published_date=book['published_date'],
            isbn=book['isbn'],
            pages=book['pages'],
            cover=book['cover'],
            language=book['language']
        )
        db.session.add(new_book)
    db.session.commit()

if __name__ == '__main__':
    seed_books()

5, Run the script

Now you just run the script using python seed.py in the terminal.

6, Verify everything is correct

Just check your database in vscode to make sure that the data you wanted was correctly inserted.

Conclusion

Seeding your database with the help of an external API can greatly enhance the functionality of your application as well as save you a lot of time tediously seeding your database manually. By following these steps you should be able to seamlessly integrate real world external data into your application.

experience in phase 4

chimichimi123 — Fri, 31 May 2024 15:46:56 +0000

SO phase 4 has kinda been more than a little rough, lots of personal stuff going on in my life and I've been very distracted not to mention the literal tornadoes and loss of power for like a week, but I do actually like the material we're going over in phase 4, I used a little bit of it in phase 3 on accident when I was making my final project, I didnt have a very good understanding of it then, but I think I learned a lot more about it now and am much more comfortable with it.

all that being said I have been stuck on this final project for a while now, I've been working non stop on it but I have this terrible habit of overcomplicating my code and doing things that aren't required, in this case its kinda gone too far I kept looking for complicated fixes to problems that I cause by using complicated code and it just became too much of a web, I've completely restarted it a few hours ago trying to start from the beginning and keep it simple, but I cant get the frontend requests to work, like my login feature is just supposed to make a post request to /login on the backend but /login on the backend just doesnt work and I dont know how to fix it I have tried so many different things now, but I just cant get it, I probably messed up something small and accidentally covered it up or just never noticed it.

I'm hoping its something simple atleast then when I talk to you I can quickly finish up everything after you help, but if not I'm making sure all of my other assignments are completed and ready to go

I kinda wanna restart again and just do everything as basic as possible and what I know but I think I'm a little too short on time for that, I wasted so many hours stuck on something and was just way too stubborn to move on without fixing it, actually now that im thinking about it I need to quickly get rid of the token based authorization I got set up, I really cant explain it well at all, I just followed a guide online, only used it because I thought maybe it was my password hash that was causing an issue and wanted to try an alternative

thats everything though I just wanted a short break from coding to ramble a bit, I really like the content in phase 4 though

my experience learning python so far in phase 3

chimichimi123 — Mon, 06 May 2024 22:59:54 +0000

Well, phase 3 started off okay and I took a look at everything we were going to do and the basics of Python feeling pretty optimistic. The last 2 phases before this one were pretty engaging and although slightly difficult they were still enjoyable to learn so I assumed this one would be too and for the most part it was, unfortunately, my grandmother got very sick and I had to take care of her so I ended up falling behind a lot and even when I did have the time I found it difficult to work up the motivation to actually get started and make progress on my overdue assignments.

As the deadline got closer and closer and I felt like my back was up against the wall what ended up motivating me to actually get my work done instead of just staring at it for hours was the fear of failing this class and having all of that money wasted or having my grandfather disappointed that I failed a phase so after weeks I finally got to work and got almost completely caught up with all of my assignments so after this blog post I only have the final project which admittedly does seem difficult, but I think I'll manage somehow now that I'm finally focused on my work and am not getting distracted easily.

That being said, I think the subject I'll talk about in this post is object-oriented programming that we went over this phase. OOP(Object-Oriented programming) is a wonderful way of organizing your code into neat little packages called objects. It's similar to organizing a closet, you group similar stuff together to make it easier to find.

the first thing to go over in OOP is

Classes and Objects

Classes are like templates for creating objects or like an architects plans, they tell Python how to make stuff
Objects are instances of classes, they're like the actual things you make using those templates.

class Car:
    def __init__(self, make, model):
        self.make = make
        self.model = model

    def display_info(self):
        print(f"Car: {self.make} {self.model}")

2 Encapsulation

Encapsulation just means to keep everything together, related things get put in the same place so its easier to manage
its like putting all of your car parts in one box instead of scattering them all over your garage

3 Inheritance

Inheritance is like passing down traits from your parents, you get some stuff from them but you can also add your own twist.
so if for example you have a class for regular cars, you can make a new class for electric cars that inherits some stuff from the regular cars class.

class ElectricCar(Car):
    def __init__(self, make, model, battery_capacity):
        super().__init__(make, model)
        self.battery_capacity = battery_capacity

    def display_info(self):
        super().display_info()
        print(f"Battery Capacity: {self.battery_capacity} kWh")

4 Polymorphism

Polymorphism is like being able to use the same tool for different jobs, you don't need a separate screwdriver for every type of screw.
So, whether you're dealing with a regular car or an electric car, you can use the same display_info method without any issues

So that's the basic rundown on objects in Python, it's not the most exciting thing in the world but it is extremely helpful for keeping your code organized, using OOP can help make your code much more manageable

My struggle learning props in phase 2

chimichimi123 — Thu, 11 Apr 2024 21:26:31 +0000

When I first started this second phase I thought it'd be much easier since I got the basics of Javascript down pretty well and in the beginning, I was looking at React and thinking to myself "Oh this isn't so bad actually, I think I could do this fairly easily" and I began down the road of learning React.

After the first few labs, I was still feeling pretty good about learning React and it felt slightly simple so I wasn't worried about it too much, I was doing pretty good with components and props and was very confident until I was asked to pass a prop to a child component, I thought it was going to be pretty simple since I did it already (albeit I lacked a lot of understanding of it).

It was a humble Article component tasked with rendering blog posts on a webpage. Here's a snippet of my initial attempt:

import React from "react";

const Article = ({ title, date = "January 1, 1970", preview }) => {
  return (
    <article>
      <h3>{title}</h3>
      <small>{date}</small>
      <p>{preview}</p>
    </article>
  );
};

export default Article;

Simple and pretty straightforward and I believed I had finished and would pass all of the tests with this since I passed all of the props down from ArticleList.js using code written like this:

function ArticleList({ posts }) {
  return (
    <main>
      {posts.map((post, index) => (
        <Article key={index} post={post} />

I was stumped for hours as to why this wasn't working because I thought it was returning an easily usable array with all of the data needed. After hours of staring at my screen not understanding what was wrong I finally realized that I needed to use destructuring instead of just sending the array down to the child component as is and the code I ended up writing was this:

import React from "react";
import Article from "./Article";

function ArticleList({ posts }) {
  return (
    <main>
      {posts.map((post) => (
        <Article
          key={post.id}
          title={post.title}
          date={post.date}
          preview={post.preview}
        />
      ))}
    </main>
  );
}

export default ArticleList;

when it finally passed the test using this code I was so relieved yet annoyed at myself for taking so long with such a simple problem, I often overthink and overcomplicate my issues with coding instead of trying to fix starting from basic problems.

After this mini project, though I feel like my understanding of props in general has gone up tremendously, though there is still more to learn with them, I'm pretty confident that I can use them without much trouble now.

In the end, my experience learning props was not as smooth as I had hoped due to me needlessly overcomplicating it, but because I spent so much time on it I think I developed a deeper understanding of it that you could only get through trial and error and experience. Though I know in the future there will still be new problems I get stuck on and code that I overcomplicate, but I'm excited to learn it nonetheless.

notes for phase 1 project review 1-1

chimichimi123 — Wed, 27 Mar 2024 18:32:00 +0000

1
API (Application Programming Interface):

An API is a set of rules and protocols that allows different software applications to communicate with each other. It defines the methods and data formats that applications can use to request and exchange information.

2
ES (ECMAScript):

ES stands for ECMAScript, which is the standardized specification for the scripting language JavaScript. When we refer to ES5, ES6, etc., we are referring to different versions of the ECMAScript specification.

3
Current ES version:

The current ECMAScript version is ES14, which was finalized in June 2023.

4
Major features introduced in ES6:

Arrow functions
Classes
Template literals
Let and const declarations
Enhanced object literals
Destructuring assignment
Default parameters
Spread and rest operators
Promises
Modules

5
Differences between let, const, and var:

var has function scope or global scope, while let and const have block scope.
Variables declared with var can be redeclared and reassigned, while variables declared with let can be reassigned but not redeclared, and variables declared with const cannot be reassigned or redeclared.
const must be initialized during declaration, while let and var can be declared without initialization.
let and const are hoisted to the top of their block scope, but they are not initialized until their declaration is evaluated. This is known as the "temporal dead zone."

6
Differences between arrow functions and regular functions:

Arrow functions do not have their own this, arguments, super, or new.target bindings, whereas regular functions do.
Arrow functions cannot be used as constructors with the new keyword.
Arrow functions have a more concise syntax compared to regular functions.

7
Function expressions:

Function expressions are functions that are assigned to variables or passed as arguments to other functions.
They can be named or anonymous.

8
Converting arrow function to function declaration:

Arrow function:

const add = (a, b) => a + b;

Function declaration:

function add(a, b) {
  return a + b;
}

9
Converting function declaration to arrow function:

Function declaration:

function add(a, b) {
  return a + b;
}

Arrow function:

const add = (a, b) => a + b;

10
Callback function:

A callback function is a function that is passed as an argument to another function and is executed after some operation has been completed.

Example in project:

fetchData(url, (data) => {
  console.log(data);
});

11
Hoisting:

Hoisting is a JavaScript mechanism where variables and function declarations are moved to the top of their containing scope during the compile phase, before the code execution.

Example:

console.log(x); // Output: undefined
var x = 5;

12
Closure:

A closure is the combination of a function and the lexical environment within which that function was declared. It allows a function to access and manipulate variables from its parent scope even after the parent function has finished executing.

13
Object.assign():

Object.assign() is used to copy the values of all enumerable own properties from one or more source objects to a target object. It returns the target object.

14
Array methods:

.map(): Creates a new array populated with the results of calling a provided function on every element in the calling array.
.sort(): Sorts the elements of an array in place and returns the sorted array.
.filter(): Creates a new array with all elements that pass the test implemented by the provided function.
.forEach(): Executes a provided function once for each array element.
.reduce(): Executes a reducer function on each element of the array, resulting in a single output value.

15
Keyword this and context:

The this keyword refers to the object it belongs to. In the global context, this refers to the global object (e.g., window in browsers).
In JavaScript, the value of this is determined by how a function is called (the execution context).

Example:

const obj = {
  name: "John",
  greet: function() {
    console.log(`Hello, ${this.name}!`);
  }
};
obj.greet(); // Output: Hello, John!

16
Destructuring:

Destructuring is a JavaScript expression that allows extracting data from arrays, objects, and nested structures into distinct variables.

Example:

const { name, age } = person;

17
Rest/spread operator:

The rest parameter (...) allows a function to accept an indefinite number of arguments as an array.
The spread operator (...) allows an array expression or string to be expanded in places where zero or more arguments or elements are expected.

Example:

const arr = [1, 2, 3];
const newArr = [...arr, 4, 5, 6]; // Spread operator

18
Event listeners

Event listeners are functions that wait for a specific event to occur and then execute a predefined action. In JavaScript, event listeners are attached to DOM elements, and they listen for events such as clicks, keypresses, mouse movements, etc. When the specified event occurs on the element, the listener executes the associated callback function.

19
preventDefault()

preventDefault() is a method used to prevent the default action of an event from occurring. It is typically called within event handlers to stop the browser's default behavior associated with a particular event. For example, calling preventDefault() on a click event prevents the default action of following a link or submitting a form.
preventDefault() can be used with various types of events, including click events, submit events, keypress events, etc.

20
stopPropogation()

stopPropagation() is a method used to stop the propagation of an event through the DOM tree. When an event occurs on a DOM element, it typically "bubbles" up through its ancestors, triggering event handlers on each ancestor element. Calling stopPropagation() prevents this bubbling process, so the event will not trigger any further event handlers.
stopPropagation() can be used with events that bubble, such as click events, mouse events, key events, etc.

21
Asynchronous code

Asynchronous code in JavaScript allows certain operations to be executed independently of the main program flow. This means that while an asynchronous operation is being performed, other code can continue to execute without waiting for the asynchronous operation to complete. Asynchronous operations are commonly used for tasks such as fetching data from a server, reading files, or waiting for user input.

Some examples of functions/methods that behave asynchronously include:

setTimeout(): Executes a function after a specified delay.
fetch(): Initiates a network request and returns a promise that resolves with the response.
XMLHttpRequest: Performs asynchronous HTTP requests.
addEventListener(): Listens for events asynchronously.

22
Fetch

The fetch() function is used to make HTTP requests to servers. It returns a promise that resolves to the Response object representing the response to the request. This Response object contains information such as the status of the response, headers, and the response body.

23
Promise

A promise is an object that represents the eventual completion or failure of an asynchronous operation and its resulting value. Promises are used to handle asynchronous operations in JavaScript, allowing you to write cleaner and more maintainable code.

24
.then() after fetch

We use the .then() method after a fetch request to handle the response from the server once it becomes available. .then() is a method of promises, and it is used to specify what should happen after a promise is resolved (i.e., when the asynchronous operation completes successfully). Inside the .then() method, you provide a callback function that receives the resolved value of the promise as its argument.

25
What other methods does a promise object respond to?

Besides .then() and .catch(), promise objects also respond to methods such as:

.finally(): Executes a callback function after the promise is settled (either resolved or rejected).
.all(): Combines multiple promises into a single promise that resolves when all of the input promises have resolved.
.race(): Returns a promise that resolves or rejects as soon as one of the input promises resolves or rejects.

26
.JSON() function

The .json() function is a method used with the fetch() API to parse the JSON-encoded response body. When a request is made using fetch(), the response object contains a method called .json(), which returns a promise. This promise resolves with the JSON representation of the response body after it has been parsed.

EXAMPLE

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => {
    // Process the parsed JSON data
    console.log(data);
  })
  .catch(error => {
    // Handle errors
    console.error('Error fetching data:', error);
  });

27
JSON.stringify() purpose

The purpose of JSON.stringify() is to convert a JavaScript object or value to a JSON string. It serializes the object into a JSON-formatted string representation that can be transmitted over a network or stored in a file. Some use cases include sending data to a server, saving data locally, or transferring data between different parts of an application.

EXAMPLE

const obj = { name: 'John', age: 30 };
const jsonString = JSON.stringify(obj);
console.log(jsonString); // Output: '{"name":"John","age":30}'

Some of the unsupported data types in JSON.stringify() include:

Functions: Functions cannot be represented in JSON format because JSON is a data format, and functions are executable code.
Undefined: undefined values are not allowed in JSON. If a property in an object has the value undefined, it will be omitted during serialization.
Symbols: Symbols are also not supported in JSON, as they are JavaScript-specific constructs that don't have a representation in JSON.
Circular references: Objects with circular references (where one property refers back to the same object) cannot be serialized to JSON, as JSON does not support cyclical data structures. Attempting to stringify an object with circular references will result in an error or an incomplete serialization.

28
does JS have classes

Yes, JavaScript has classes since the introduction of ES6 (ECMAScript 2015). Here's how you can create a class in JavaScript.

EXAMPLE

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  greet() {
    console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
  }
}

const john = new Person('John', 30);
john.greet(); // Output: Hello, my name is John and I am 30 years old.

29
purpose of constructor function

The purpose of the constructor function in JavaScript classes is to initialize object instances with specific values. It is automatically called when a new object is created from the class.

30
How to make an object method in JS

To create an object method in JavaScript, you can simply define a function within the class:

EXAMPLE

class MyClass {
  myMethod() {
    // Method implementation
  }
}

31
how to make a class method/function in JS

To create a class method or function in JavaScript, you use the static keyword:

EXAMPLE

class MyClass {
  static myMethod() {
    // Method implementation
  }
}

MyClass.myMethod(); // Calling the class method

32
How to make a property/method private in ES6

To make a property or method private in ES6, you can use closures and the concept of encapsulation. By defining variables or functions within the constructor using let or const, they become accessible only within the scope of the constructor and are effectively private:

EXAMPLE

class MyClass {
  constructor() {
    let privateVariable = 'This is private';

    this.getPrivateVariable = function() {
      return privateVariable;
    };
  }
}

33
How to transform your OOJS code into functional code

To transform object-oriented JavaScript code into functional code, you would typically use functions and closures to encapsulate data and behavior. Instead of defining classes and methods, you would define functions that operate on data. Functional programming emphasizes immutability and pure functions, which can lead to more predictable and maintainable code. However, the approach may vary depending on the specific requirements and design preferences.

My experience in phase one

chimichimi123 — Fri, 22 Mar 2024 05:49:13 +0000

Ever since I was in high school I have always wanted to become a software engineer and now it's finally happening! I spent so much time working odd jobs trying to save enough money to be able to attend Flatiron School and kept constantly getting set back. I was beginning to lose hope in being able to attend Flatiron School, but thankfully my grandparents offered to help me finance the tuition through a loan and I'd only have to pay half so I was able to attend!!

When I was applying to Flatiron School I had already known that it was going to be very fast-paced and difficult and it has definitely lived up to my expectation in that regard, but I'm also amazed by how much I've learned in such a short time. Coming from a background of manual labor and just blue-collar work this has been a drastic change for me but I am so glad I made it, I love that feeling I get when all the tests finally pass or I finally figure out what the bug in my code was that had me stuck for hours, feeling myself getting more efficient and comfortable with things I once struggled with is such an accomplishing feeling.

A good example of something I once struggled with and am now so much more comfortable with would be understanding the DOM, the DOM (Document Object Model) is a programming interface for web documents and the backbone of web development. The DOM represents the hierarchical structure of an HTML document as a sort of tree of objects where each element in the document can be manipulated with Javascript

// Select the heading element using its id
const heading = document.getElementById('main-heading');

// Update the text content of the heading
heading.textContent = 'Welcome to my Website!';

this little snippet of code is a great example of how we can edit the DOM using Javascript to change something, in this example we changed the text of the heading element to now say "Welcome to my website!"

The DOM can also be used for other things such as responding to user actions by using .addEventListener(). A good example of this would be the following code in which we add an event listener that changes the color of the heading when the user clicks.

// Add an event listener to the heading element
heading.addEventListener('click', () => {
    // Change the color of the heading
    heading.style.color = 'blue';
});

This is something that I used to struggle a lot with, but now find it to be extremely easy and wonder how I ever did struggle with it, it's so much fun learning this and looking back at how much I now understand. Before attending this school honestly I didn't even know how to really read code, I'd occasionally open the dev tools in Google Chrome and just click stuff and maybe rewrite the name of something if I was really bored but it all looked indecipherable to me and being able to now more than just read the code actually be able to write my own and create my own webpages feels like such an accomplishment to me