pr-explore
Due to time constraints, I’ll focus on delivering the MVP first and adding the nice to haves if there’s any time left over. All tasks required for this project will be broken down into issues and given a numbered priority below:
Must haves
- Research the Github API https://github.com/GregDevProjects/pr-explore/issues/1
- Setup empty project template https://github.com/GregDevProjects/pr-explore/issues/2
- Establish design patterns https://github.com/GregDevProjects/pr-explore/issues/3
- Accounts component https://github.com/GregDevProjects/pr-explore/issues/4
- Repos component https://github.com/GregDevProjects/pr-explore/issues/5
- PRs component https://github.com/GregDevProjects/pr-explore/issues/6
- App component https://github.com/GregDevProjects/pr-explore/issues/7
Nice to haves
- Add four evenly sized elements to the bottom of the app https://github.com/GregDevProjects/pr-explore/issues/8
- Unit tests https://github.com/GregDevProjects/pr-explore/issues/9
- Pagination for the repositories/prs/accounts
- Use authenticated requests for the Github API
- Update the URL when a Repo is selected, so that application state can be bookmarked/shared by users
- A way to filter/search for repositories/prs/accounts
- Show an error message to the user on a failed call to the Github API (MUI's snackbar could be used for this)
- Show a loading indicator while fetching from the Github API (MUI's progress could be used for this)
- Setup a CI server to test if the project still builds, if it passes the linter, and if it passes the unit tests. Github actions could be used for this.
Known issues
- The PR list items have a hover effect and the cursor changes to a pointer. This gives the impression that they are clickable, which they are not, so they should be removed.
- There's a lack of in-code documentation on the functions/components. The types are documented through typescript, but it would even better to provide a brief description on how the component and the parameters provided to each component should be used. Something like JSDoc could be used as a standard for this.
Running the project
This is a Next.js project bootstrapped with create-next-app
.
development server:
npm run dev
# or
yarn dev
production server
npm run build
npm start
linter
npm run lint
Open http://localhost:3000 with your browser to see the result.