mkhotib20 / ghexplorer Goto Github PK

This is a Next.js project bootstrapped with create-next-app.

• Search for github users by their username keywords
• Showing public repository of a user
• infinite scroll pagination for repositories

1. why i'm using pnpm, instead of other package manager, ?, it's about speed and disk efficiency, Reference, pnpm is the fastest even without lock file. Pnpm uses symlinks to add only the direct dependencies of the project into the root of the modules directory. Reference

2. Why i use next/dynamic ? , i need to split the chunk file in an easy way. The JS file will be splitted into separate .js file based on route or component, this way can reduce total blocking time. you can interact with other component while waiting other huge size chunk file loaded.

3. Why @motion/react instead of css ?, emotion has good specificity level, your style will specified only for the components and make your code modular. you can reuse the component anywhere without mixing style with other components. and the className will be generated by emotion, so the style will not mixed with other className that created by our self inside css file. And yes you can pass variable from component, state, or other variable that affect the styling. you can literally do javascript calculation with the style.

4. Why graphql instead of regular rest api ?, In graphql you can pick what matter for UI to returned back in response. So, it makes the api call lighter and comsuming less internet data usage

5. Infinite scroll pagination, you can see, if you have reach the bottom of content the browser will request for the next page, and so on. i prefer calculate scroll height and container height to decide either it has been reach bottom or not. In other way you can use Intersection Observer, but this way will not works in old version browser.

1. Clone the repo

git clone https://github.com/mkhotib20/ghexplorer.git

2. Copy .env.sample as .env.local, and input your prefered config

cp .env.sample .env.local

3. Import dependency lock file to your prefered package manager (if you're using pnpm, skip this step), you can use Synp or other library to do it.
4. Install dependencies

pnpm install
or
yarn install
or
npm install

5. Run the apps in development mode

pnpm run dev

7. open http://localhost:3000 in your browser

1. Run build command

pnpm run build

2. Make sure you have pm2 installed on your server, or you can refer to this tutorial

3. run pm2 with following command, you can modify the port and name for monitoring

pm2 start --name=ghxplorer npm -- start -- -p 3000

4. You can use nginx so the apps can be accessible from public network, you can refer to following minimal nginx config to make this app run on example.com domain

server {
  server_name example.com www.example.com;

  location / {
    proxy_pass http://127.0.0.1:3000;
  }
}

pnpm run dev // start application in development mode
pnpm run build // build for production
pnpm run start // start production bundle