Projects

Overview

"Projects" is a web application designed to showcase the collective work of classmates in a coding HackYourFuture bootcamp. It serves as an API data indexer, displaying GitHub profiles and repositories of classmates on the Projects page. The application is built with modern web technologies and showcases various features and skills obtained during the coding bootcamp.

Features

• GitHub API Integration: Fetches and displays GitHub profile photos and usernames along with repository projects.
• HYF Tribute Page: A dedicated page ('More') to pay tribute to HackYourFuture (HYF) administrative/management family team.
• Home Page: Routes to other pages.
• Museum Page: Fetches and displays art from the Rijksmuseum, including links to initial assignment submissions.
• Chart Component: Compares data fetched from two different GitHub repositories using Chart.js.
• Interactive Elements: Features an interactive jellyfish logo that changes on click and a DarkModeToggle for UI theme switching.
• Responsive Design: Ensures a seamless experience across various devices and screen sizes.

Technologies Used

• React: For building the user interface.
• Vite: As the frontend build tool.
• Stylex: For styling components in a new and efficient way.
• GitHub Pages: Used for deploying the application.
• Framer Motion: For adding animations to one of the containers.
• Chart.js: To create and display interactive charts.
• React Router Dom: For handling routing within the application.

Installation and Setup

1. Clone the Repository:

   git clone https://github.com/29Kumait/projects

2. Navigate to the Project Directory:

   cd project-directory

3. Install Dependencies:

   npm install

4. Run the Application:

   npm run dev

Usage

• Navigate between different pages using the navbar.
• Interact with the jellyfish logo and toggle between light and dark modes for different UI experiences.
• Explore classmates' GitHub projects and compare repository data through charts.
• Learn about the HYF team on the 'More' page and view art collections on the Museum page.

Built With

(Dependencies)

React and React-DOM

• [email protected]
• [email protected]
  • These are the core React libraries for building the user interface and rendering it in the web browser.

Vite

• [email protected]
  • Vite is a build tool that aims to provide a faster and leaner development experience for modern web projects.

React Router Dom

• [email protected]
  • This package provides DOM bindings for React Router, which is used for handling routing in React applications.

Framer Motion

• [email protected]
  • A library to add animations and gestures in React applications.

Chart.js

• [email protected]
  • A popular JavaScript library for creating interactive charts.

ESLint

• [email protected]
  • A static code analysis tool for identifying problematic patterns in JavaScript code.

Other Notable Dependencies

• @iconscout/[email protected]: A library of customizable React SVG icons.
• @primer/[email protected]: GitHub's icon library.
• @react-buddy/[email protected]: Toolbox for React development.
• @stylexjs/[email protected], @stylexjs/[email protected], @stylexjs/[email protected], [email protected]: For Stylex styling.
• @vitejs/[email protected]: Official React plugin for Vite.
• [email protected]: Stylex plugin for Vite.
• [email protected]: End-to-end testing framework.
• [email protected]: For managing environment variables.
• [email protected]: For deploying to GitHub Pages.
• [email protected]: Google Analytics for React.
• [email protected]: A React implementation of Slick Carousel.
• @types/[email protected], @types/[email protected]: TypeScript types for React and ReactDOM.