thiagoafonso.com

The first version of thiagoafonso.com hosted with Firebase and built with React

Introduction

Hello!

The purpose of this project is to introduce myself into development and test some of the things I learned about React + html/css/js + programming in general.

This was my first fully commited attempt to create a website from start to finish.

This process took about 2-3 months with a lot of different conflicting design ideas but i'm happy with what I built!

There's a lot to do still but I'm satisfied enough to start a new project.

I intend to keep updating this project or make new versions with different frameworks and libraries.

Tools

this website uses a ton of cool open-source projects and other tools:

• React - front-end JavaScript library for building user interfaces based on UI components.
• Phosphor icons - flexible icon family, super easy to work with!
• Vite - hmr + easy build process, made everything easier
• Spotify for developers - easy to use and awesome to build creative tools with
• + a lot more

Info

Spotify's API

import { CLIENT_ID, REFRESH_TOKEN } from './API_KEYS';

const headers = {
	headers: {
		'Content-Type': 'application/x-www-form-urlencoded',
		Authorization: 'Basic ' + CLIENT_ID,
	},
};
const data = {
	grant_type: 'refresh_token',
	refresh_token: REFRESH_TOKEN,
};

let res = axios
	.post('https://accounts.spotify.com/api/token', qs.stringify(data), headers)
	.then((res) => res.data.access_token);

const NEW_ACCESS_TOKEN = 'Bearer ' + (await res);

const resSpotify = await axios.get(
	'https://api.spotify.com/v1/me/player/recently-played',
	{
		params: {
			limit: '1',
		},
		headers: {
			Accept: 'application/json',
			'Content-Type': 'application/json',
			Authorization: NEW_ACCESS_TOKEN,
		},
	}
);

---