Nogizaka Lib is deprecated and replaced by NOGILIB.
Please check the new project in https://github.com/shawnrivers/nogilib.
This is a React web application aiming at showing the information about Nogizaka46 in a user-friendly way.
App link: https://shawnrivers.github.io/nogizaka-lib/
Install necessary packages:
npm installStart the app:
npm start- SPA framework:
React - State management:
Redux - JavaScript:
TypeScript - CSS:
Sass,CSS modules - Bundler:
Webpack - Compiler:
Babel - Linter:
ESLint - Test:
jest,enzyme - Animation:
react-transition-group - Others:
react-lazyload
- CD List Page
- CD Page
- Song Page
- Member List Page
- Member Page
- Search Page (TBD)
CD List Page shows released a grid of CD cards (singles and albums). By tapping/clicking on any CD card, it will navigate to the corresponding CD page.
CD Page shows detailed information about each CD.
The artwork part on the top is swipeable so that you can see artworks in different types of this CD.
A list of cards of songs included in this CD will also be displayed here. By tapping/clicking on any card, it will lead you to the Song Page.
Song Page shows detailed information about each song.
The artwork part on the top shows the artwork of the song's CD.
Below the artwork is the type and the CDs of this song, along with the information about creators like songwriters and MV directors.
A list of cards of members who perform this song will also be displayed here. By tapping/clicking on any card, it will lead you to the corresponding Member Page.
Member List Page shows a grid of member cards (1st. gen to 4th. gen, graduated). By tapping/clicking on any member card, it will navigate to the corresponding Member page.
Member page shows detailed information about each member.
The gradient background behind the profile image is generated based on her glow stick colors.
Member's profile (e.g. name, sites / social networks, birthday, birthplace, etc.) is showed below the profile image.
写真集/Photo Books part lists photo albums /photo books information.
Position History shows the records of members positions in each single.
C: Center (センター)F: Fukujin (福神)S: Selected (選抜)U: Under (アンダー)
Position Counter shows how many times she has been in each position.
- NOTE: Technically, "Center" should be counted as both "Fukujin" and "Selected", "Fukujin" should be counted as "Selected". Therefore the actual "Fukujin" times should be
C+F(in this case,4 + 7 = 11), the actual "Selected" times should beC+F+S(in this case,4 + 7 + 5 = 16).
Gallery shows the member's profile images from her first single to the latest one.
The components structure used in this application is based on Atomic Design.
Main source code.
apis/- API clients
- API response type defination
- Transform API responses to the data type the client needs
components/atoms/-
smallest components unit, usually basic HTML elements
- e.g. button
-
molecules/-
relatively simple groups of UI elements functioning together as a unit
- e.g. search bar with a input field and button
-
organisms/-
relatively complex UI components composed of groups of molecules and/or atoms and/or other organisms
- e.g. header
-
templates/-
page-level objects that place components into a layout and articulate the design’s underlying content structure
-
containers/-
specific instances of templates that show what a UI looks like with real representative content in place
- each actual page with data processing and side effects
reducers.ts,actions.tsandselectors.tsfor each actual page also goes here
-
stores/- Initial settings for store
utils/- Functions which are used commonly across the app
models/- Global state type defination
styles/- Sass variables and templates
Data in this application is hosted in Nogizaka-lib Data repository.
Profile images and CD artworks © 乃木坂 LLC.