AltSchool Africa - GitHub Repository

This is a solution to the GitHub Repository Exam from AltSchool Africa.

Table of contents

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
  • Useful resources
• Author
• Acknowledgments

Overview

The challenge

Users should be able to:

• View the optimal layout for the site depending on their device's screen size
• See hover states for all interactive elements on the page
• see the list of repositories from the GitHub API

Screenshot

Links

• Solution URL: GitHub Repository
• Live Site URL: Check Live Url

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• CSS Grid
• Mobile-first workflow
• React - JS library

What I learned

I learned how to use the GitHub API to fetch data from the API and display it on the page. I also learned how to use the React framework to build the application.

const [repos, setRepos] = useState([]);
const [loading, setLoading] = useState(false);
const [error, setError] = useState(null);

useEffect(() => {
  setLoading(true);
  fetch("https://api.github.com/users/muzardemoses/repos")
    .then((res) => res.json())
    .then((data) => {
      setRepos(data);
      setLoading(false);
    })
    .catch((err) => {
      setError(err);
      setLoading(false);
    });
}, []);

{
  searchResults.map((movie) => (
    <div key={movie.id} className="flex flex-col gap-4">
      <h4>
        {movie.title} ({movie.release_date?.slice(0, 4)})
      </h4>
      <img
        src={`https://image.tmdb.org/t/p/w200${movie.poster_path}`}
        alt={movie.title}
        className="rounded-md"
      />
    </div>
  ));
}

@media (prefers-color-scheme: dark) {
  body {
    background-color: hsl(235, 21%, 11%);
    color: hsl(234, 39%, 85%);
  }
}

Continued development

I would like to continue learning React and improve my skills in it. I would also like to learn more about the GitHub API and how to use it to fetch data from it.

Useful resources

• React Documentation - This helped me to learn how to use React. I really liked this pattern and will use it going forward.

Author

• GitHub - @MuzardeMoses
• Frontend Mentor - @muzardemoses
• Twitter - @Muzarde1
• LinkedIn - Moses Adebayo
• Instagram - @muzardemoses
• Facebook - Adebayo MuzardeMoses Olaoluwa
• YouTube - MuzardeMoses

Acknowledgments

I want to thank AltSchool Africa for giving me the opportunity to learn and improve my skills as a developer.