Git Product home page Git Product logo

github-web-app's Introduction

GitHub Repositories Web App

This Web App is created using GithubAPI. This application allows you to view all of my GitHub repositories, with pagination and search functionality. You can also view detailed information for each repository.

Technologies Used

  • ReactJs
  • Chakra UI
  • Tailwind CSS
  • GitHub API

Features

  • GitHub Repository List: View all of my GitHub repositories with pagination enabled.

  • Search and Filter: Easily search for repositories to find what you're looking for.

  • Detailed Repository View: Click on a repository to view detailed information.

  • Nested Routes: I utilized nested routes for navigation within the application.

  • Error Boundary: The error boundary component catches errors in the RepositoriesPage.

  • 404 Error Page: Display a custom 404 page for routes that do not exist. The navlink "Activities" in the navbar is used to implement this

  • Good Layout and UI: Ensured a visually appealing and user-friendly design.

  • Accessibility Techniques: Implement accessibility techniques for a more inclusive user experience.

  • Responsiveness: The web app is responsive on various devices.

Problem Encountered and Lessons Learnt

  • At first I struggled with using Tailwind CSS and Chakra UI, but after using a day to learn the basics and reading some documentations on I was able to style this web app.

  • I learnt that nothing is Impossible if I can set my mind on it.

  • I tried to add a filter icon, more like a dropdown button to filter each repository by it language (i.e HTML, Javascript) but it didn't work out as it was intended to.

  • I created a button to create a new repository but after the modal pop up and the new repo details is inputed the new repo is not appending on the repositories list. I tried to debug what was wrong what I still haven't figure it out.

Note

  • Repositories : The home page.
  • Test : Implements the error boundary.
  • Activities : This page does not exist.

Live Demo

Check out the Live Demo here

Screenshots

App Screenshot

github-web-app's People

Contributors

nimi77 avatar

Stargazers

Oluwasetemi Ojo avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.