{"id":27338254,"url":"https://github.com/jhnemogap/github-users-cmode01","last_synced_at":"2026-04-16T05:32:17.400Z","repository":{"id":44645755,"uuid":"450791111","full_name":"jhnemogap/github-users-cmode01","owner":"jhnemogap","description":"devfinder of Github usernames / challenge","archived":false,"fork":false,"pushed_at":"2022-02-02T11:59:39.000Z","size":199,"stargazers_count":0,"open_issues_count":2,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-08-25T21:35:19.680Z","etag":null,"topics":["dark-mode","darkmode","darktheme","husky","nextjs","react","sass","typescript"],"latest_commit_sha":null,"homepage":"https://github-users-cmode01.vercel.app","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jhnemogap.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-01-22T10:58:07.000Z","updated_at":"2022-01-27T08:12:33.000Z","dependencies_parsed_at":"2022-09-25T00:27:10.416Z","dependency_job_id":null,"html_url":"https://github.com/jhnemogap/github-users-cmode01","commit_stats":null,"previous_names":[],"tags_count":10,"template":false,"template_full_name":null,"purl":"pkg:github/jhnemogap/github-users-cmode01","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jhnemogap%2Fgithub-users-cmode01","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jhnemogap%2Fgithub-users-cmode01/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jhnemogap%2Fgithub-users-cmode01/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jhnemogap%2Fgithub-users-cmode01/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jhnemogap","download_url":"https://codeload.github.com/jhnemogap/github-users-cmode01/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jhnemogap%2Fgithub-users-cmode01/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31872620,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-15T15:24:51.572Z","status":"online","status_checked_at":"2026-04-16T02:00:06.042Z","response_time":69,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["dark-mode","darkmode","darktheme","husky","nextjs","react","sass","typescript"],"created_at":"2025-04-12T15:26:02.968Z","updated_at":"2026-04-16T05:32:17.360Z","avatar_url":"https://github.com/jhnemogap.png","language":"TypeScript","readme":"# Web app Challenge: GitHub user search\n\n## Table of contents\n\n- [Overview](#overview)\n  - [The challenge](#the-challenge)\n  - [Screenshot](#screenshot)\n  - [Links](#links)\n- [My process](#my-process)\n  - [Built with](#built-with)\n  - [What I learned](#what-i-learned)\n  - [Continued development](#continued-development)\n  - [Useful resources](#useful-resources)\n- [Author](#author)\n- [Acknowledgments](#acknowledgments)\n\n## Overview\n\n### The challenge\n\nUsers should be able to:\n\n- View the optimal layout for the app depending on their device's screen size\n- See hover states for all interactive elements on the page\n- Search for GitHub users by their username\n- See relevant user information based on their search\n- Switch between light and dark themes\n- **Bonus**: Have the correct color scheme chosen for them based on their computer \npreferences. _Hint_: Research `prefers-color-scheme` in CSS.\n\n### Screenshot\n\n![320-dark](./public/screenshot_dark_320.png)\n![320-light](./public/screenshot_light_320.png)\n\n![375-dark](./public/screenshot_dark_375.png)\n![375-light](./public/screenshot_light_375.png)\n\n![768-dark](./public/screenshot_dark_768.png)\n![768-light](./public/screenshot_light_768.png)\n\n![1440-dark](./public/screenshot_dark_1440.png)\n![1440-light](./public/screenshot_light_1440.png)\n\n### Links\n\n- Solution URL: [github-users-cmode01](https://github.com/jhnemogap/github-users-cmode01)\n- Live Site URL: [DEVFINDER live demo](https://github-users-cmode01.vercel.app/)\n\n## My process\n\n### Built with\n\n- Semantic HTML5 markup\n- Mobile-first workflow\n- CSS custom properties, Flexbox, CSS Grid\n- [React](https://reactjs.org/) - JS library\n- [Next.js](https://nextjs.org/) - React framework\n- [TypeScript](https://www.typescriptlang.org/docs/handbook/react.html) - \nTypeScript is JavaScript with syntax for types.\n\n- [Sass](https://sass-lang.com/) - For styles using \n[scss modules](https://nextjs.org/docs/basic-features/built-in-css-support#adding-component-level-css)\n\n- [ESlint](https://eslint.org/) - Find and fix problems in your JavaScript styles code\n\n- [Prettier](https://prettier.io/) - An opinionated code formatter\n\n- [husky](https://www.npmjs.com/package/husky) +\n[lint-staged](https://github.com/okonet/lint-staged) +\n[Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/) - \nSuperpowers when performing particular git actions\n\n- [Node Version Manager](https://github.com/nvm-sh/nvm) - `nvm` allows you to quickly \ninstall and use different versions of node via the command line. Its installation \nis prior to and separate from the project. If you do not have this, it is recommended \nto install the local version of node.js indicated by the `.nvmrc` file\n\n\n### What I learned\n\nThis section summarizes some main learnings while working on this project.\n\n\u003e \"Whenever you start a project, no matter how small, it's good to consider \nthe time you'll spend setting it up and preparing it before you start troubleshooting.\"\n\u003e\n\u003e by Jorge Nemogá\n\n#### Probando SCSS module en la carpeta page de Next.js\n\nEs posible reproducir los nombres de páginas dinámicas a los archivos de \nestilos de las mismas y de igual forma alojarlas en la carpeta de `pages`, sin afectar \nla lógica del framework next.js.\n\n```bash\n[username].module.scss\n[username].tsx\n```\n\n#### SASS vs. CSS para el cambio del tema entre oscuro y claro\n\nAl intentar implementar el cambio de tema entre claro y oscuro, pude constatar \nque actualmente el uso de preprocesadores css va perdiendo terreno ante el progreso \ngradual del mismo CSS nativo; algo muy similar a lo que le sucede a JQuery y \nel JavaScript actual.\n\nLas diferentes formas que encontre para hacer el cambio de colores dinámicamente usando \nSASS era en general muy rebuscada o con varios pasos que al final implican la dificultad de \nmantenimiento. Mientras que al usar el modo nativo de CSS con variables ancladas al `:root` o \nun contenedor general (_en el proyecto se manejó sobre `body`_) se hace fácil el mantenimiento y \nuso del mismo. En su contra es que hay que entender las instancias reales en las que se aplican \nlas variables de CSS y las de SASS, pues no es posible juntarlas para que trabajen de forma dinámica.\n\nPor lo anterior los referentes del tema oscuro / claro quedan en dominio de las variables CSS nativas. \n\n```scss\n// files _vars.scss\n@mixin lightTheme {\n  --text-color-primary: #4b6a9b;\n  --text-color-secondary: #2b3442;\n  --btn-theme-color-hover: #222731;\n  --bg-color-primary: #fefefe;\n  --bg-color-secondary: #f6f8ff;\n  --action-color-primary: #0079ff;\n  --action-color-secondary: #697c9a;\n  --action-color-primary-hover: #60abff;\n  --box-shadow-primary: 0 16px 30px -10px #4660bb33;\n}\n\n@mixin darkTheme {\n  --text-color-primary: #ffffff;\n  --text-color-secondary: var(--text-color-primary);\n  --btn-theme-color-hover: #90a4d4;\n  --bg-color-primary: #1e2a47;\n  --bg-color-secondary: #141d2f;\n  --action-color-primary: #0079ff;\n  --action-color-secondary: #ffffffc0;\n  --action-color-primary-hover: #60abff;\n  --box-shadow-primary: _;\n}\n\n...\n\n// Apply themes depende of one property [data-theme]\n// file globals.scss\n@use \"./src/styles/vars\";\n...\nbody {\n  @include vars.lightTheme;\n  ...\n  \u0026[data-theme=\"light\"] {\n    @include vars.lightTheme;\n  }\n  \u0026[data-theme=\"dark\"] {\n    @include vars.darkTheme;\n  }\n}\n\n...\n\n// other file example\n.container {\n  color: var(--text-color-secondary);\n}\n```\n\nEstos fueron algunos de las páginas que me ayudaron a probar diferentes formas y \ntomar una decisión para la implementación del cambio del tema de colores.\n\n- [Coding a CSS Theme Switcher – a Multitude of Web Dev Options](https://joshuatz.com/posts/2019/coding-a-css-theme-switcher-a-multitude-of-web-dev-options/): \npor mucho el mejor recurso para revisar posibles soluciones, sin perder la claridad de la información. \ny de dudoso resultado.\n- Otros recursos visitados para no sesgarse por un solo recurso: \n[Theming in SASS](https://medium.com/@sroskelley/theming-in-sass-67b8c0265e3f) and \n[Dark Mode Switcher Using CSS Variables in LESS, SASS, or Vanilla CSS](https://medium.com/swlh/dark-mode-using-css-variables-cf065a7fa133)\n\n\n#### CSS Grid have a bug on iOS and MacOS\n\nA un componente donde su contenedor general era un formulario se le aplica un estilo con `grid`, \ncasualmente al estar trabajando con Chrome o probando en Mozilla Firefox sobre un MacOS \nno se presenta el error, por lo que se podría dar por hecho que funciona bien; igualmente \npodrías revisar en varios navegadores web en android y todo trabaja perfecto. Pero más lejos \nde la realidad pues al revisar en el navegador web Safari en MacOS o en cualquier navegador en un iOS \nvas a notar que [no se comporta a lo esperado](https://discourse.webflow.com/t/css-grid-erratic-on-ios/161919).\n\nEste es un bug que se presenta al tener código similar al siguiente:\n\n```jsx\n\u003cform className=\"elemento-con-grid\"\u003e\n  ...\n\u003c/form\u003e\n```\n\nY la forma de solucionarlo es tan simple como agregar un contenedor padre único para \nesa sección donde está fallando el grid.\n\n```jsx\n\u003cdiv\u003e\n  \u003cform className=\"elemento-con-grid\"\u003e\n    ...\n  \u003c/form\u003e\n\u003c/div\u003e\n```\n\n#### TypeScript para un proyecto tan pequeño vale la pena?\n\nLa respuesta en general es: **No lo vale**.\n\nDado que la intención de un challenge como estos es probar el conocimiento o \ncapacidad resolutiva, también es el espacio para practicar o probar nuevas tecnologías; \nentonces usar `TypeScript` es una buena oportunidad.\n\nAdemás, si consideramos que se plantea como un proyecto \"real\" o suposición que va a \nescalar usar TS conviene ser implementado desde el inicio si hay espacio, tiempo y \nconocimiento base; refetenre a esto último una configuración recomendad con un proyecto al inicio \no donde no se tiene una experiencia fuerte con TS, es desactivar la verificación estricta del \narchivo `tsconfig` (`\"strict\": false`).\n\nAhora si tomamos en consideración que es una tendencia tener _tipado_ o algo similar en \njavascript, las opciones más completas son `Flow` o `TypeScript`. Siendo de esta forma \nla opción siempre debería ser `TypeScript` y solo en casos donde no aplique se usará otra \ntecnología o métodos.\n\n\n#### Tener muchas configuraciones iniciales es un overkill\n\nLas configuraciones pueden ir cambiando con el tiempo, además se pueden ir agregando \na medida que el equipo las discuta y se lleguen a los debidos acuerdos de uso. Puede que al inicio \ngolpe un poco el trabajo individual de cada miembro, pero aseguras un estándar de código \nvisualmente y trazabilidad del mismo. Todo esto conlleva a que el tiempo de _code reviews_ \nse use más temas de mayor profundidad que el típico \n\"deberías usar punto y coma..., porque no organizas el código como lo hago yo...\", o evitar \nla frustración entre diferentes desarrolladores hacia detalles de código o los mensajes del commit\nde sus contrapartes.\n\n\u003e \"Having code quality control settings (eg ESlint, Prettier, Git comments and others) \n\u003e might seem like a lot for early projects; but if it is expected to scale and \n\u003e that several members work on the same code, it will have been a good decision \n\u003e in the medium and long term.\"\n\u003e \n\u003e Jorge Nemogá\n\n\n#### Git Flow\n\nLo primero es tener una rama `main/master`, luego del primero o primeros _commits_ es bueno\ngenerar la rama `develop` donde será nuestro punto de partida y llegada para cada issue. De \nmanera que la rama principal `main` será usada para recibir solo los cambios ya aceptados que \nse deberían desplegar como `stable release`.\n\nEntonces cada vez que se necesita alguna implementación se debe crear primero el issue, \npara así crea la rama de trabajo que debe salir siempre del la rama `develop`. El nombre de \nla nueva rama inicia con el número del issue y seguida de una descripción simple.\n\n```bash\n24-fix-searchbar-style-ios-grid\n```\n\nLuego de que se termina el trabajo en la rama correspondiente se realiza el Pull Request (PR en GitHub) \no Merge Request (MR en GitLab) hacia `develop`. En este punto, se presenta tres modos de fusionar \nla rama según la conveniencia:\n\n- Merge and commit (_lo llamaremos simplemente `merge`_)\n- Squash and commit (_lo simplificamos a llamarlo como `squash`_)\n- Rebase and commit (y para este modo `rebase`)\n\n1. Siempre que se cree el PR, activar el modo de borrar la rama luego de la fusión.\nDe esta forma mantenemos limpio nuestro repositorio de ramas viejas que ya fueron integradas. \nY para no perder la trazabilidad del trabajo y poder continuar sin miedo a borrar esas ramas.\nEs que se propone las siguientes condiciones de fusión.\n\n2. El modo de `rebase` es la última opción a usar; dado que modifica el \nhistorial de la rama en la que se genera la inclusión de los cambios. \nEn este proyecto se usó en los dos primeros commit como parte de las pruebas, \npero no se recomienda su uso bajo casi ninguna circunstancia y sólo en casos \nmuy especiales será la forma correcta.\n\n3. Por lo anterior, ahora sólo hablaremos de `squash` y `merge` como las opciones a usar.\n\n4. Si el PR contiene un solo commit, la forma siempre debería ser usando\n`squash`. Esto dado que `merge` agrega el _commit_ desarrollado, pero va a generar otro \ncommit para la fusión como punto de llegada mas no agrega valor en este caso.\n\n5. Cuando se tienen dos o más _commits_ que se desean fusionar, aquí lo que realmente \ninteresa saber es si queremos o es relevante dejar el rastro de cada commit al mezclar \nlas ramas. Dicho esto, si es relevante tener cada commit en el historial de `develop` \nentonces usamos `merge` en caso contrario usamos `squash`.\n\n6. Finalmente, cuando la fusión es de `develop` hacia la rama principal (`main/master`) \nsiempre debe usarse `merge`, esto para mantener el historial conectado \nentre ambas ramas y así sea más fácil conocer cuáles son los puntos de despliegue o \n_release_; en general serán los commits extra creados por el comando de `merge and commit`.\n\n\n### Continued development\n\nUse this section to outline areas that you want to continue focusing on in future \nprojects. These could be concepts you're still not completely comfortable with \nor techniques you found useful that you want to refine and perfect.\n\n1. Patrones de diseño más comunes. Y ver su aplicación en el lenguaje que \nactualmente es mi favorito y de mayor experiencia `javascript`. \n2. Otras tecnologías paralelas a las usadas en este proyecto para tener mayores posibilidades \ny criterio de selección ante nuevos desafíos. Ejemplo, Vue.js, Nuxt.js, TS y JS usando clases otras.\n3. Desarrollo de aplicaciones móviles ya sea con Ionic, Flutter, Electron, React Native \no hasta código nativo con Kotlin o Swift.\n\n\n### Useful resources\n\n- [MDN Web Docs](https://developer.mozilla.org/en-US/) - It is for me the essential \ndocumentation of HTML, CSS and JavaScript (and more). On many occasions, by rereading a \nconcept that I already know, I can reinforce it or learn something new.\n\n- [W3Schools](https://www.w3schools.com/) - It may not be as flashy as MDN but in many \ncases it is very useful because its explanations are based on direct and quick examples.\n\n- [CSS Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) +\n[CSS Grid](https://css-tricks.com/snippets/css/complete-guide-grid/) - \ncomprehensive guide to CSS flexbox and Grid layout. \nWhen the concern is about CSS flexbox or Grid, this is the most important resource that is used. \n\n- [React TypeScript Cheatsheets](https://react-typescript-cheatsheet.netlify.app/) -\nCheatsheets for experienced React developers getting started with TypeScript.\nEspecially since it contains various details applied to function components and hooks.\n\n- [Esencial image editor](https://ezgif.com/)\n- [Smart WebP, PNG and JPEG compression](https://tinypng.com/)\n\n\n## Author\n\n- Name: Jorge Humberto Nemogá Pinzón\n- Linkedin - [jhnemogap](https://www.linkedin.com/in/jhnemogap)\n\n\n## How does the project run on the local machine?\n\n1. You must first have node.js installed, and more specifically the version \ndescribed in the `.nvmrc` file.\n\n2. Clone de repository, example by the SSH mode:\n```shell\ngit clone git@github.com:jhnemogap/github-users-cmode01.git\n```\n\n3. Now, install the package (`yarn` must be previously installed as a global tool):\n```shell\nyarn install\n```\n\n4. Finally, try to run the project:\n```shell\nyarn dev\n```\n\nThis command really run the `next dev`, it starts the application in \ndevelopment mode with hot-code reloading, error reporting, and more. \nThe application will start at `http://localhost:3000` by default. \nYou  will see the similar messages in the console:\n\n```\nyarn run v1.22.17\n$ next dev\nready - started server on 0.0.0.0:3000, url: http://localhost:3000\nevent - compiled client and server successfully in 2.9s (188 modules)\n\n```\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjhnemogap%2Fgithub-users-cmode01","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjhnemogap%2Fgithub-users-cmode01","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjhnemogap%2Fgithub-users-cmode01/lists"}