Skip to content

Latest commit

 

History

History
56 lines (46 loc) · 2.93 KB

README.md

File metadata and controls

56 lines (46 loc) · 2.93 KB

NETGIT

Netlify Status

UI That Renders Netflix's Github Repositories and Information, Built With ReactJS and Typescript

Local Development

  1. In the root directory, run yarn install to install/update dependencies
  2. Run yarn start, the UI will be hosted on localhost:3000

Structure

./src
└── components
    ├── Header.tsx           // Renders header, darkmode toggle UI
    ├── Footer.tsx           // Static, renders bottom div and info
    ├── RepoCard.tsx         // Renders repository information at a glance. Toggles CommitDrawer
    ├── SearchOrgs.tsx       // Dialog component that contains search input form
    └── OrgNotFound.tsx      // Renders notfound message based on type (e.g. isEmpty)
└── containers
    ├── CommitDrawer.tsx     // Container component that renders a given repo's recent commit history
    └── Home.tsx             // Main view component, contains org/repo fetch logic, renders cards, high-level state
└── shared
    └── types.d.ts           // Contains types for all entities in netgit (due to small size, only one file atm)
└── utils
    ├── config.ts            // Contants for API routes, params, darkmode
    └── netgitapi.ts         // Library functions for API calls and caching
├── index.tsx                // Root component that renders the "App", high-level state
├── react-app-env.d.ts       // Module types
└── theme.tsx                // Contains custom MUI theme definitions for light/dark modes

Objectives

  • Create a web application that allows users to view GitHub data from Netflix OSS
    • Allow users to query for other organizations of their choosing
  • Have the app be able to consume data from an API/external source
  • Integrate Material UI style framework with the application
  • Ensure application is both desktop and mobile optimized
  • Allow for state changes and persistence through the use of session and local storage
    • Caching API response data
    • Storing darkmode preferences in browser local storage

Future Ideas

Unfortunately wasn't able to get to all due to time restrictions

  • Allow for the use of keyboard shortcuts for quick access (e.g. '/' to open search, arrow keys to highlight cards)
  • Further compartmentalized components (e.g. CommitItem and CommitList from CommitDrawer)
  • More nuanced typing directory (currently all under shared/types.d.ts)
  • Additional styling overrides to deviate further from Material standard
    • fewer style overrides (i.e. sx), more reliance on style HOC's or a more comprehensive palette
  • Unit testing with Jest (e.g. testing API wrapper functions, other library components)
  • Better caching system to prevent overfill of session storage (see netgitapi.ts)

Brian Hong, 2021