LinksAdmin

Links administrator made with React by Jonatandb.

Demo online: https://jonatandb.github.io/LinksAdmin/

---

---

Descarga y ejecución:

• Descargar el repo
• Descomprimir
• Entrar a la carpeta del proyecto y ejecutar:
  • yarn
  • yarn start
• Acceder desde el navegador a: http://localhost:3000/

---

Generación de build productivo:

• Ejecutar:
  • yarn build
  • Se generará en la carpeta "build"

---

Github Pages:

Renombré la carpeta "build" con la versión productiva a "docs" (Como Github Pages requiere) y seleccioné en la configuración del repositorio, en la sección "Github Pages" la opción "master branch /docs folder".

Por último, agregué en el archivo package.json la url final en la propiedad homepage:

"homepage": "https://jonatandb.github.io/LinksAdmin/",

Se puede ver la versión online accediendo a:

• https://jonatandb.github.io/LinksAdmin/

---

Firebase:

Creación del proyecto:

• Crear proyecto -> Especificar un nombre
• Información general del proyecto -> Configuración del proyecto
• Sección "Tus aplicaciones" -> Click en "Web" para añadir Firebase a una aplicación Web
  • Especificar nombre de la aplicación
  • Click en "Registrar aplicación"
  • Copiar código de configuración para conexión de la aplicación con Firebase.

Creación y configuración de la base de datos Cloud Firestore (antes se utilizaba Realtime Database)

• Ir a Database -> Crear base de datos
• Seleccionar "Empezar con el modo de prueba" (En el modo producción solo pueden modificar los datos usuarios autenticados)
• Click en Siguiente -> Listo

---

Visited Sites:

This repo:

• https://github.com/Jonatandb/LinksAdmin

React & Firebase Firestore CRUD:

• https://www.youtube.com/watch?v=Y9-UkL6ent4

Firebase:

• https://firebase.google.com/

Favicon.io:

• https://favicon.io/favicon-converter/

DotEnv:

• https://www.npmjs.com/package/dotenv

Deploy Firebase Apps to Different Environments:

• https://medium.com/@geoffbourne/deploy-firebase-to-different-environments-7ad556e4f4e2

Adding Custom Environment Variables:

• https://create-react-app.dev/docs/adding-custom-environment-variables/

dotenv-webpack:

• https://github.com/mrsteele/dotenv-webpack

Is it safe to expose Firebase apiKey to the public?:

• https://stackoverflow.com/questions/37482366/is-it-safe-to-expose-firebase-apikey-to-the-public

Bootstrap:

• https://getbootstrap.com/

Bootswatch:

• https://bootswatch.com/

Bootswatch Cyborg Theme:

• https://bootswatch.com/cyborg/

Bootswatch on NPM:

• https://www.npmjs.com/package/bootswatch

Materialize - Icons:

• https://materializecss.com/icons.html

Bootstrap - Grid system:

• https://getbootstrap.com/docs/4.0/layout/grid/

A Complete Guide to Flexbox:

• https://css-tricks.com/snippets/css/a-guide-to-flexbox/#flexbox-background

Disable zoom on input focus in Android webpage:

• https://stackoverflow.com/questions/7073396/disable-zoom-on-input-focus-in-android-webpage

Bootstrap - Justify content:

• https://getbootstrap.com/docs/4.0/utilities/flex/#justify-content

ReactJS and images in public folder:

• https://stackoverflow.com/questions/47196800/reactjs-and-images-in-public-folder

Bootstrap - Vertical alignment:

• https://getbootstrap.com/docs/4.0/utilities/vertical-align/

React-toastify:

• https://github.com/fkhadra/react-toastify
• https://fkhadra.github.io/react-toastify/introduction

Bootstrap - Colors:

• https://getbootstrap.com/docs/4.0/utilities/colors/

Javascript regular expression to validate URL:

• https://stackoverflow.com/questions/8667070/javascript-regular-expression-to-validate-url

---