Dcard 2022 Web Frontend Intern Homework

A React app designed like Dcard with Bootstrap that could：

• search users/organizations on GitHub
• list user's/organization's all repositories with Infinite Scroll from GitHub REST API
• read repository's detail from GitHub REST API
• follow or unfollow a user/organization which data store in localStorage

Doc：Dcard 2022 Web Frontend Intern Homework.pdf
Blog：Dcard 面試｜應徵 Web Frontend Intern 實習經驗分享！

Comments from Dcard Web Frontend Team 技術夥伴：

作業看的出來很用心，特別去研究了 Dcard 的 UI，體驗上也大致不錯，多做追蹤等功能也相當有特色，README 文件的詳細程度也很加分。

Overview

1. How To Use
   • On GitHub Page
   • On Your Computer
2. Architecture Design & Explanation
   • index.js：for direct route
   • Home.js：for search a GitHub username ＆ list all following users
   • UserPage.js：for display GitHub user ＆ his/her all repositories
   • RepoDetail.js：for display repository details
   • Components：used not only on one page
3. Learn More
   • Rate Limit
   • Responsive Web Design
   • Better User Experience on small Devices
4. LICENSE：MIT

How To Use

On GitHub Page

🎊 This React app had deployed on GitHub page, you could try it on 5j54d93.github.io/Dcard-2022-Web-Frontend-Intern-Homework！

On Your Computer

0. Your computer should have downloaded Node.js before（Node >= 14.0.0 and npm >= 5.6）

1. Download this repository via git clone or from Releases

git clone https://github.com/5j54d93/Dcard-2022-Web-Frontend-Intern-Homework

2. Change directories to this repository via cd or drag this folder and drop in terminal

cd Dcard-2022-Web-Frontend-Intern-Homework

3. Run this React app

npm install
npm start

npm start will automatically open http://localhost:3000 on your computer.

Architecture Design & Explanation

index.js：for direct route

• every page will have Navbar and Footer
• Home：route at /
• UserPage：route at /users/{username}/repos
• RepoDetail：route at /users/{username}/repos/{repo}

ReactDOM.render(
  <React.StrictMode>
    <div className='d-flex flex-column min-vh-100'>
      <Navbar />
      <BrowserRouter>
        <Routes>
          <Route path='/' element={<Home />} />
          <Route path='/users/:owner/repos' element={<UserPage />} />
          <Route path='/users/:owner/repos/:repo' element={<RepoDetail />} />
        </Routes>
      </BrowserRouter>
      <Footer />
    </div>
  </React.StrictMode>,
  document.getElementById('root')
);

Home.js：for search a GitHub username ＆ list all following users

1. SearchBar()
   • a search bar for user to input GitHub username
   • can't submit if there's no input
   • use useRef() to prevent re-render while user is typing
   • prepare data onSubmit before navigate to UserPage to ensure that UserPage will already have data to show on first render（won't render twice）
   • store data that fetch from API in sessionStorage to prevent API recall if we need the same data later
2. FollowingUsers()
   • list all following users stored in localStorage
   • prepare data onClick before navigate to UserPage to ensure that UserPage will already have data to show on first render（won't render twice）
   • store data that fetch from API in sessionStorage to prevent API recall if we need the same data later

UserPage.js：for display GitHub user ＆ his/her all repositories

• first check data we need had already saved in sessionStorage
  • if yes（get this page from Home or RepoDetail）：get data from sessionStorage
  • else（get this page via link directly）：fetch data from API call and save it in sessionStorage
    • GitHub User：GET /users/{username}
    • Repos：GET /users/{username}/repos
    • render Loading while API call
• check data in sessionStorage
  • if username isn't exit：show「No Such User」
  • else if number of user's public repo＝0：show「Haven't created any repository yet」
    • else：show RepoList

{userData.message === 'Not Found'
  ? <div className={`fs-3 text-center ${styles.textMiddleBlue}`}>No Such User.</div>
  : userData.public_repos === 0
    ? <div className={`fs-3 text-center ${styles.textMiddleBlue}`}>Haven't created any repository yet.</div>
    : <RepoList />
}

1. GitHubUser()

Differences between user and organization：

	User	Organization
info	num of repos、num of followers	location、blog link
tag above RepoList	"All Public Repositories"	".public_repos Public Repositories"

2. RepoList()
   • use useRef() & IntersectionObserver on ProgressView to achieve infinite scroll without always listening to window.innerHeight、document.documentElement.scrollTop、document.documentElement.offsetHeight
   • store repos data in sessionStorage, so when user go to RepoDetail and back, we won't re-fetch data from API
   • use window.scrollTo() to ensure that when user go to RepoDetail and back, the position of UserPage will be the same of previous position（won't go back to top）
     • because window.scrollTo() default with animation in Chrome, we use behavior: 'instant' to prevent that for better user experience

window.scrollTo({
  top: sessionStorage.getItem('offsetY'),
  left: 0,
  behavior: 'instant'
});

3. RepoRow()
   • use React.memo to prevent re-render every RepoRow() in RepoList(), only render the next 10 new repos or less in infinite scroll！
   • prepare data onClick before navigate to RepoDetail to ensure that RepoDetail will already have data to show on first render（won't render twice）
   • store data that fetch from API in sessionStorage to prevent API recall if we need the same data later
     • we also save document.documentElement.scrollTop in sessionStorage onClick

RepoDetail.js：for display repository details

• first check data we need had already saved in sessionStorage
  • if yes（get this page from UserPage）：get data from sessionStorage
  • else（get this page via link directly）：fetch data from API call and save it in sessionStorage
    • GitHub User：GET /users/{username}
    • Repo Data：GET /repos/{owner}/{repo}
    • render Loading while API call
• Click right-bottom GitHub icon could go to repository page on GitHub

Components：used not only on one page

• CreateTime.js
  • use memo to prevent re-render
  • reusable：use props.displayTime to display
    • day month year on RepoRow
    • day month year time on RepoDetail
• IconGroup.js
  • use memo to prevent re-render
• FollowButton.js
  • return Following or Follow depends on wether the username is saved in localStorage
  • save or delete user data in localStorage while the button onClick

Learn More

Rate Limit

With access tokens, GitHub Rest API Rate Limit could up to 5000 requests per hour. But because this is a public repo and our React app is depolied on Github page, we couldn't use token（GitHub will delete token if it detect that we commit it）. Rate Limit will only up to 60 requests per hour！For more information, view this official doc.

I've used token like below when this repo is private, and the token won't remove itself！

const response = await fetch(URL, {
  headers: {
    Authorization: 'token TOKEN'
  }
});

Responsive Web Design

Thanks to Bootstrap, our React app could response well on every different devices！

Better User Experience on small Devices

1. Truncate Navbar title into「...」
2. smaller padding with @media (max-width: 760px)
3. somewhere flex-wrap, like：FollowButton、GitHub Icon、Topics

License：MIT

This package is MIT licensed.