joseph-fantuzzi/github-organization-explorer

GoLinks Frontend Software Engineer Take Home Test

GitHub Organization Explorer

GoLinks Take Home Test

An application to query GitHub Organizations and view a list of their repositories and commits.

Important Links:

1. Deployed URL
2. Notion Kanban Board
3. Figma Design

All Pull Requests:

Link	Branch
1. Search and Display Organization's Repo Data	search-and-display-data
2. Sort Repo List By Start Count In Descending Order	sort-repo-list
3. View a Specific Repo's Commit List For a Given Organization	commit-list
4. Organization Route with Nested Repo Route	routes
5. Implement UI/UX Design	design
6. Implement Loading State	loading-state
7. Error Handling	error-handling
8. Animations	animations
9. Theme Toggle	theme
10. Unit Tests	unit-tests

Technologies:

Type	Technology
Programming Language	JavaScript
Frontend Framework	React
CSS Framework	TailwindCSS
Build Tool	Vite
Client Routing Framework	React Router
Unit Testing	Vitest, React Testing Library
API	GitHub API
HTTP Client	Axios
Animations	CSS
Font	Poppins
Icon Library	React Icons
Loading Animation Package	React Loading
Deployment	Vercel

User Stories:

• Basic Requirement: As a user, I would like to be able to see a list of Netflix's repositories, and when I click on a repository, I want to be able to see the list of commits.
• Bonus Requirement: As a user, I want to be able to type into an input an organization name other than Netflix and see a list of that organization's repositories and commits instead.

Basic Features:

• View a scrollable list of netflix's repositories at https://github-organization-explorer.vercel.app/netflix
• Each item in the repository list contains repo name, language, description, start count, fork count, and date created
• Repository list is sorted by star count in descending order
• Clicking on a specific repository in the list will direct the user to another page showing a list of that repository's recent commits
• Each item in the commit list contains commit title, committer username, commit hash, and date created

Bonus Features:

• UI/UX responsive design beautifully crafted for every device type and size
• Search for any GitHub organization name in the home page input and view any organization's repositories and commits
• Theme toggle - choose between light and dark mode throughout the application
• Route navigation - making the application more structured by allowing users to quickly route to the organization name for the list of that organization's repositories and a nested repository name route for that repository's list of commits
• Error handling - when clicking the search button without typing anything into the input will display an error message, also when routing to a 404 page or an organization or repo that does not exist will display an error component
• Each commit includes the committer's avatar image
• Ability to copy each commit's hash to the user's clipboard
• Within the repository list for the organization page and commit list for the repository page, users can query for a certain repository name or commit name
• View the number of repositories or commits found for a certain organization
• Animations
• Loading animations when the response from the server has not come back yet
• Unit tests for all components
• Favicon

Client Routing:

Page	Route
Home	/
Organization	/:organization_name
Repository	/:organization_name/:repository_name

Planning, Design, and Technical Decisions:

Type	Description
Planning	During the planning phase of developing this application, I decided to create a simple whiteboard to gather all my thoughts. I wanted to lay out the specific requirements for the app, a basic wireframe to get me started on the design, jot down a list of technologies I have in mind using for the development, and some general planning steps to effectively plan every step I should take. I included screenshots of the whiteboard below under pre-development notes to get a better idea on my planning process.
Design	During the design phase of developing this application, I decided to use Figma to create a beautiful UI/UX design. I wanted the deisgn to be minimal, but still eye-catching to enhance the overall user experience. I chose to go with basic colors like black and white to maintain the minimal aesthetic. I decided to design three separate pages: home page, organization page, and repository page. On the home page, I created a central section with the app name, an input for the user to query for organizations, and a search button. When designing the organization page, I decided to include a navbar at the top of the screen where the user can easily head back home or search for a specific repository within that organization. I added a user-friendly scrollable repository list where users can view data on each repository. I wanted to keep the organization and repository page design similar. I included the navbar design and the scrollable commit list for users to view commit data for that repository. Within each commit card, I decided to add the committer's avatar image as well. After creating a base design, I designed mobile views to get a feel for how I want this application to be viewed on mobile devices. I kept the figma design the same throughout the development of this app. I ended up changing and adding a few things while developing, but I wanted to showcase the raw design for the stage of the process I was in at the time.
Technical	During the technical development phase of creating this application, I first created the project within GitHub and then initialized the codebase with vite. I created a frontend react app with standard javascript. Since I knew this app would not be too large with not that many components, I decided to stick with react prop drilling for accessing react state instead of using a state management system like redux. I added tailwindcss for ease of styling the app, reset my css with eric meyer's css reset, and downloaded any packages I would need. After initializing the project with all the needed tools, I started branching off and creating feature branches for specifc features I would implement. I kept the development close to the figma design, aiming for pixel-perfection. After finishing all the features I wanted to implement, I deployed the app to vercel. After deploying, I noticed a few issues with the app on safari so I addressed those issues. The basic and bonus requirements are complete and I have even more future features in mind if I had more time to spend on this app.

Installation and Set Up:

1. Install dependencies

npm install

2. Start the development server

npm run dev

Building for Production:

1. Build the application for production usage

npm run build

Local Application Testing:

1. Build the application and start a web server for testing purposes

npm run preview

Unit Testing on React Components:

1. Run the command below and vitest will run all the unit testing files

npm run test

Pre-Development Notes

Name	Image
Requirements
Wireframe
Technologies
Planning

Future Development Notes

If I had more time to work on this application and add more features, here is a list of some things I would like to implement:

• Integrate cypress end-to-end testing
• Implement language percentages for each repository in the repo list to show all languages that were used in the making of that application
• Add an interface for more data from the github api
• Possibly create a backend so users can login and create a favorites list of their favorite repositories, and track organizations or repositories with notifications

Known Issues

When navigating to "/netflix" or some other routes in the URL directly, this screen will sometimes appear when using Chrome. It only happens sometimes but needs to be addressed as soon as possible because it could affect the user experience if users decide to change the URL directly to query for organizations and repositories. Typing "Netflix" into the input and clicking search navigates smoothly to the /netflix route. This way is intended for the user experience but this issue still needs to be addressed.