Tutorial

How to integrate Projects Hub with your Portfolio.

Account Creation

To utilize the Projects Hub API, begin by setting up an account. If you haven't already, click here to create an account.

You need to add projects before you start to fetch them.

Obtaining Your API Key

Once registered, navigate to your settings page to retrieve your API key. It should resemble the following format.

Accessing Projects

With your account set up, you can now retrieve your public projects from Projects Hub via the API. Let's embark on this journey by initializing a new project. You can either follow along on your local machine or use platforms like StackBlitz.

HTML Template Creation

Start by crafting the necessary HTML structure:

index.html

<main>
  <div class="container">
    <h1>Fetching Projects using Projects Hub API</h1>
    <!-- https://api.projecshub.dev/api/v1/projects -->
    
    <div class="projects">
      <!-- Your projects will go here -->
    </div>
            
    <!-- acknowledgement -->
    <h4 class="acknowledgement">Powered by Projects Hub</h4>
  </div>
</main>

Next, let's design the project cards and display them within the projects div:

app.js

// create a project card template.
function createProjectsCard(project) {
  // destructure the project object
  const { title, description, image, codeUrl, demoUrl, tags } = project;

  // return the project card template
return `
  <div class="card">
	<img src="${image}" alt="" />
	<div class="card-body">
	     <h4 class="card-title">${title}</h4>
	     <p class="card-text">${description}</p>
	     <div class="links">
	     	<a href="${codeUrl}" class="btn">Code</a>
		<a href="${demoUrl}" class="btn">Live</a>
	      </div>
	</div>
	<div class="card-footer">
	      <ul class="badges">
        	${tags.map(tag => `<li class="badge">${tag}</li>`).join('')}
	      </ul>
	</div>
  </div>`;
};

In the function above, createProjectsCard constructs a card for each project, extracting its details and embedding them into the card template.

Note: The following is a sample code to retrieve projects from the Projects Hub API. So use this code to fetch projects and display them on your site.

app.js

const PROJECTS_HUB_API_KEY = 'USE YOUR OWN API KEY'; // get your API key from https://projectshub.dev/settings
const PROJECTS_HUB_API_URL = 'https://api.projectshub.dev/api/v1/projects'; // the projects hub API URL

// get projects from the API
async function fetchProjects(){
	// send a GET request to the projects hub API
	const response = await fetch(PROJECTS_HUB_API_URL, {
		method: 'GET',
		headers: {
			'Content-Type': 'application/json',
			'Authorization': `Bearer ${PROJECTS_HUB_API_KEY}`, // set the API key here
		},
	});

	// parse the response to JSON
	const data = await response.json();

	// throw an error if the request was not successful
	if (!data.success) {
		throw new Error(data.error.messageDetail || 'Something went wrong!');
	}

	// return the projects
	return data.results.data.projects;
};

The fetchProjects function above retrieves public projects from Projects Hub.

Displaying Projects

Now, let's render these projects on the user interface:

app.js

// render projects to the DOM
const renderProjects = async () => {
	// get the projects calling the getProjects function
	const projects = await fetchProjects();

	// get the projects container element with the class of `.projects`
	const projectsEl = document.querySelector('.projects');

	// render the projects to the DOM
	projects.forEach(project => {
		projectsEl.innerHTML += createProjectsCard(project);
	});
};

// call the renderProjects function to render the projects to the DOM
renderProjects();

The renderProjects function calls fetchProjects to fetch projects and displays the projects on the UI.

Congratulations on reaching this point! If you have questions or need further clarification, don't hesitate to join our Discord Community.