- Project: Public web app for users to browse projects under certain organizations and its commits.
- Language/Frameworks: JavaScript(with React) + SCSS
Hey there, this is Maulik Suchak.
- Listing of all the repositories sorted by number of forks. "Elastic Search" has the heighest no. of forks in Yelp.
- Smooth or infinite scroll to load more repositories in home page or Projects page.
- By default it loads all repos from "Yelp" org but user can type in after '/' inside address bar to load any other org. e.g. '/Yelp'.
- Clicking on title of repo will take you to the list of commits page and show most recent commits.
- User can also load previous/older commits by clicking on the buttons in the bottom.
- [UX] More unit and integration tests.
- [UX / Tech] Graceful degradation to support non-modern browser.
- [UX] Instead of having user to type in the browser address bar to load perticular org, add a search box in the header.
- [Tech] Better SCSS organziation by using mixins, variable, etc.
- Make sure you have
nodeinstalled -- recommended6.4.1. - Once you have a
nodeinstalled, runnpm installin this repo to get your dependencies. - (optional)
npm run buildto create build folder.
In the project directory, you can run:
Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.
The page will reload if you make edits.
You will also see any lint errors in the console.
Launches the test runner in the interactive watch mode.
See the section about running tests for more information.
Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.
The build is minified and the filenames include the hashes.
Your app is ready to be deployed!
See the section about deployment for more information.
src
├── index.js
├── App.css
├── App.js
├── Components
| └── Commits
| ├── Commits.scss
| ├── CommitGroup.jsx
| ├── CommitRow.jsx
| ├── CommitHead.jsx
| ├── index.jsx
| └── Error
| ├── Error.scss
| ├── index.jsx
| └── Footer
| ├── Footer.scss
| ├── index.jsx
| └── Header
| ├── Header.scss
| ├── index.jsx
| └── Loading
| ├── Loading.scss
| ├── index.jsx
| └── NoMatch
| ├── index.jsx
| ├── NoMatch.scss
| └── Projects
| ├── index.jsx
| ├── ProjectRow.jsx
| ├── Projects.scss
| ├── ProjectTop.jsx
public
├── index.html
- Overall, this app has 2 pages. a. Lists all repos sorted by forks. b. List all commits under a repo.
- This project was bootstrapped with Create React App. Reason: wanted to move quickly since this structure will give me minimum things I'd need to create a MVP.
- It makes an API call to fetch all the projects in the beginning (defaults to "Yelp" if it address bar has "/").
- Then, it does fetches organization details to display all the meta data by making another GET HTTP request. If user types in '/Yelp', it'll fetch all repo under Yelp account instead of loading default Yelp.
- Tried to use minimal CSS to move quickly. Used SCSS to create better org structure.
Couldn't write due to time constraints
Projects / Homepage
- Requesting '/' (homepage) -> Should show all the projects under Yelp
- Requesting '/Yelp' (homepage) -> Should show all the projects under Yelp
- Click on the link of a project -> Should open all the commits of the project
- Scroll -> Scrolling in the homepage should load more projects
Commits Page
- Click on Older & Newer should work -> Click on the buttons below should fetch more commits
- /search/repositories: Search all repo under an org. You could request already sorted result from this end point which is pretty powerful. For example, sorted by forks or stars, etc.
- /orgs/:org: This fetches particular org details used to display on the top of the page.
- /repos/:owner/:repo/commits: Fetches all the commits under particular repo. Used to display result inside Commits page.
Thank you!