Hace unos meses, tomé como objetivo practicar la maquetación simple y sencilla mediente CSS puro y HTML5, sin librerias de CSS y preprocesadores como SASS o LESS.

Se me ocurrió la idea de realizar un clón de instagram, asi que me he propuesto realizarlo en React.

En estos post, os iré contando mi pequeña aventura de desarrollar una aplicación como Instagram.

Comenzaremos creando el front, pero quien sabe si en algún momento, me animo a realizar una API en Python o Node.JS para alimentar la aplicación.

Por el momento, vamos a crear la aplicación básica con datos ficticios y ya habrá tiempo.

Para este proposito, voy a utilizar ViteJS para realizar el proyecto.

Para quien no sepa que es ViteJS, dejo un enlace a su web:

Vite | Next Generation Frontend Tooling

Next Generation Frontend Tooling

vitejs.dev

ViteJS es una herramienta de compilación que tiene como objetivo proporcionar una experiencia de desarrollo más rápida y ágil para proyectos web modernos.

Pasandole un template, que ya tiene definida la propia herramienta, te genera el proyecto y un servidor para poder ver los cambios en local.

Es mucho mas rápido que create-react-app.

Comenzamos creando el proyecto, para ello, vamos a lanzar el comando:

npm create vite@latest clone-instagram-react -- --template react


Con esto, crearemos el proyecto, y lo llamaremos, clone-instagram-react.

Ya tenemos nuestro proyecto listo para comenzar a desarrollar.

Por el momento voy a evitar el login y el registro, y vamos directamente a la vista de home, donde se encuentra el listado de stories y las publicaciones.

Desarrollaremos los componentes de página que arriba hemos descrito.

Y como componentes generales, crearemos el nav y el menú que está en el footer.

En el próximo post, comenzaremos con el desarrollo del componente NavbarBottom.

El enlace al repositorio os lo dejo por aquí, podeis aportar cualquier cambio mediante pull request.

Repositorio clone-instagram-react