Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/jonatandb/linksadmin
Links administrator made with React
https://github.com/jonatandb/linksadmin
bootswatch create-react-app crud crud-application es6 firebase firestore javascript jonatandb materialize materializecss mobile-app mobile-first mobile-web react react-toastify reactjs
Last synced: about 1 month ago
JSON representation
Links administrator made with React
- Host: GitHub
- URL: https://github.com/jonatandb/linksadmin
- Owner: Jonatandb
- Created: 2020-06-30T23:53:39.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2023-01-05T21:58:52.000Z (almost 2 years ago)
- Last Synced: 2024-03-16T02:23:51.355Z (9 months ago)
- Topics: bootswatch, create-react-app, crud, crud-application, es6, firebase, firestore, javascript, jonatandb, materialize, materializecss, mobile-app, mobile-first, mobile-web, react, react-toastify, reactjs
- Language: JavaScript
- Homepage: https://jonatandb.github.io/LinksAdmin/
- Size: 2.8 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 21
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 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
---
