🇪🇸 Versión en Español
- 💻 Proyecto InterIT - FrontEnd -
- Tabla de Contenidos
- Descripción del Proyecto
- Tecnologías utilizadas
- Tecnologías Utilizadas en el Frontend
- Documentación Técnica
- Requisitos Previos
- Instalación y Configuración
- Comandos Disponibles
- Estructura del Proyecto
- Arquitectura
- Uso de Docker
- Estado del Proyecto
- Colaboradores del Proyecto
- Contribuciones
- Licencia
- 💻 InternIT Project - FrontEnd
Este es el frontend de la aplicación InternIT, una plataforma que conecta empresas con aplicantes para puestos de prácticas. La aplicación permite a las empresas publicar ofertas de prácticas y a los candidatos postularse y comunicarse con dichas empresas de forma directa. Este frontend está desarrollado utilizando tecnologías modernas como React, Redux y TypeScript, proporcionando una experiencia de usuario rápida y escalable.
Podras acceder al repositorio de la parte de backend en este enlace https://github.com/TheGrootTeam/back_alfa ( indispesable para ejecutar la aplicacion)
Claro, aquí tienes la sección de tecnologías utilizadas en el frontend con los badges y las versiones correspondientes:
El frontend de esta aplicación está construido con tecnologías modernas que aseguran una experiencia de usuario rápida y eficiente. A continuación, se listan las principales tecnologías utilizadas junto con sus versiones:
v18.3.1: Biblioteca para construir interfaces de usuario como Single Page Application (SPA).
v2.2.6: Gestión del estado de la aplicación.
v6.25.1: Navegación entre diferentes vistas y componentes.
v1.7.3: Realización de peticiones HTTP al backend.
v23.14.0: Internacionalización para permitir que la aplicación soporte múltiples idiomas.
v5.3.4: Herramienta de desarrollo y construcción para una mayor velocidad de desarrollo.
v5.2.2: Lenguaje de programación con tipado estático que añade robustez al código.
v2.0.4: Framework de testing utilizado para pruebas unitarias.
v8.57.0: Herramienta para la verificación del código, asegurando un código limpio y consistente.
Puedes encontrar más detalles sobre las tecnologías y módulos utilizados en este proyecto en la siguiente documentación:
Antes de comenzar, asegúrate de tener instalados los siguientes software en tu entorno de desarrollo:
VITE_API_URL=http://localhost:3000 VITE_API_VERSION=v1 VITE_BASE_URL=http://localhost:3000
Para empezar con el desarrollo de este proyecto, sigue los pasos a continuación:
-
Clonar el repositorio:
git clone https://github.com/usuario/front_alfa.git cd front_alfa -
Instalar dependencias: Asegúrate de tener Node.js instalado. Luego, ejecuta el siguiente comando:
npm install
-
Variables de entorno: Debes configurar las variables de entorno en un archivo
.enven la raíz del proyecto, siguiendo el formato de.env.example. Las variables clave incluyen:VITE_API_URL: URL base para las peticiones a la API del backend.VITE_API_VERSION: Versión de la API.
-
Iniciar el servidor de desarrollo:
npm run dev
Este comando ejecuta el servidor de desarrollo de Vite y lanza la aplicación en el navegador.
-
Compilar el proyecto:
npm run build
Construye la aplicación para producción.
-
Previsualizar la build:
npm run preview
-
Linting:
npm run lint
Ejecuta ESLint para analizar el código en busca de errores.
-
Formatear el código:
npm run format
Ejecuta Prettier para formatear automáticamente el código.
-
Ejecutar pruebas:
npm run test
A continuación, se muestra una visión general de la estructura del proyecto:
├── public/ # Archivos estáticos
├── src/
│ ├── components/ # Componentes React reutilizables
│ ├── pages/ # Páginas individuales (Home, About, etc.)
│ ├── store/ # Configuración de Redux (acciones, reducers)
│ ├── App.tsx # Punto de entrada principal de la aplicación
│ ├── main.tsx # Punto de montaje de React
│ ├── router.tsx # Configuración de rutas con React Router
│ └── i18n.ts # Configuración de i18n para la internacionalización
├── .env.example # Ejemplo de configuración de variables de entorno
├── package.json # Dependencias y scripts del proyecto
└── vite.config.ts # Configuración de Vite
El frontend de la aplicación sigue una arquitectura modular y escalable basada en componentes React. La lógica de la aplicación está manejada por Redux para la gestión del estado, mientras que las vistas y páginas se organizan mediante React Router.
- SPA con React: Todo el frontend se maneja en una sola página, con enrutamiento dinámico para navegar entre distintas secciones.
- Redux para gestión de estado: La centralización del estado con Redux garantiza que la información fluya de manera eficiente entre los componentes de la aplicación.
- Internacionalización con i18next: El soporte multilingüe está integrado mediante i18next, lo que permite cambiar el idioma de forma dinámica.
Este proyecto incluye un archivo Dockerfile que permite construir y desplegar la aplicación en un entorno de contenedores.
docker build -t front_alfa .docker run -p 80:80 front_alfaEsto ejecutará la aplicación en el puerto 80 utilizando Nginx como servidor web.
Este proyecto está en desarrollo activo. Próximas características incluyen mejoras en la interfaz de usuario y nuevas funcionalidades para la administración de usuarios.
Este proyecto ha sido desarrollado en su totalidad por el equipo The Goot Team, en el marco del Bootcamp de Desarrollo Web Fullstack (Edicion XVI de la escuela KeepCoding)
- Ivette Farre - https://github.com/Iv3tt3
- Carles Espuñes - https://github.com/Cespuess
- Marta Vilaseca - https://github.com/marta-vilaseca
- David Arraras - https://github.com/Darrlop
- Syra Dominguez - https://github.com/SyraDominguez
Para contribuir a este proyecto:
- Realiza un fork del repositorio.
- Crea una nueva rama (
git checkout -b feature/nueva-funcionalidad). - Realiza tus cambios y haz commit (
git commit -m 'Añadir nueva funcionalidad'). - Sube los cambios a tu repositorio (
git push origin feature/nueva-funcionalidad). - Abre un Pull Request para revisión.
Este proyecto está licenciado bajo la Licencia MIT. Consulta el archivo LICENSE para obtener más detalles.
🇬🇧 English Version
- 💻 Proyecto InterIT - FrontEnd -
- Tabla de Contenidos
- Descripción del Proyecto
- Tecnologías utilizadas
- Tecnologías Utilizadas en el Frontend
- Documentación Técnica
- Requisitos Previos
- Instalación y Configuración
- Comandos Disponibles
- Estructura del Proyecto
- Arquitectura
- Uso de Docker
- Estado del Proyecto
- Colaboradores del Proyecto
- Contribuciones
- Licencia
- 💻 InternIT Project - FrontEnd
This is the border of the application ** internit **, a platform that connects companies with applying for practical positions.The application allows companies to publish practices and candidates apply and communicate with these companies directly.This border is developed using modern technologies such as React, Redux and TypeScript, providing a fast and scalable user experience.
You can access the repository of the backend part in this link https://github.com/thegrootteam/back_alfa (indispensable to execute the application)
Here is the section of technologies used in the frontend with badges and corresponding versions:
The frontend of this application is built with modern technologies that ensure a fast and efficient user experience. Below is a list of the main technologies used along with their versions:
You can find more details about the technologies and modules used in this project in the following documentation:
Before starting, make sure you have the following software installed on your development environment:
VITE_API_URL=http://localhost:3000 VITE_API_VERSION=v1 VITE_BASE_URL=http://localhost:3000
To get started with the development of this project, follow the steps below:
-
Clone the repository:
git clone https://github.com/usuario/front_alfa.git cd front_alfa -
Install dependencies: Make sure you have Node.js installed. Then, run the following command:
npm install
-
Environment variables: You need to configure the environment variables in a
.envfile at the root of the project, following the format of.env.example. The key variables include:VITE_API_URL: Base URL for backend API requests.VITE_API_VERSION: API version.
-
Start the development server:
npm run dev
This command runs the Vite development server and opens the app in the browser.
-
Build the project:
npm run build
Builds the application for production.
-
Preview the build:
npm run preview
-
Linting:
npm run lint
Runs ESLint to analyze the code for errors.
-
Format the code:
npm run format
Runs Prettier to automatically format the code.
-
Run tests:
npm run test
Below is an overview of the project structure:
├── public/ # Static files
├── src/
│ ├── components/ # Reusable React components
│ ├── pages/ # Individual pages (Home, About, etc.)
│ ├── store/ # Redux setup (actions, reducers)
│ ├── App.tsx # Main entry point of the application
│ ├── main.tsx # React root mounting point
│ ├── router.tsx # Route setup with React Router
│ └── i18n.ts # i18n configuration for internationalization
├── .env.example # Example of environment variable setup
├── package.json # Project dependencies and scripts
└── vite.config.ts # Vite configuration
The frontend of the application follows a modular and scalable architecture based on React components. The application's logic is managed by Redux for state management, while the views and pages are organized using React Router.
- SPA with React: The entire frontend is handled in a single page, with dynamic routing for navigation between different sections.
- Redux for state management: State centralization with Redux ensures that data flows efficiently between the application's components.
- Internationalization with i18next: Multilingual support is integrated with i18next, allowing dynamic language switching.
This project includes a Dockerfile that allows building and deploying the application in a containerized environment.
docker build -t front_alfa .docker run -p 80:80 front_alfaThis will run the application on port 80 using Nginx as a web server.
This project is under active development. Upcoming features include user interface improvements and new functionalities for user management.
This project has been fully developed by The Goot Team as part of the Fullstack Web Development Bootcamp (Edition XVI) at KeepCoding.
- Ivette Farre - https://github.com/Iv3tt3
- Carles Espuñes - https://github.com/Cespuess
- Marta Vilaseca - https://github.com/marta-vilaseca
- David Arraras - https://github.com/Darrlop
- Syra Dominguez - https://github.com/SyraDominguez
To contribute to this project:
- Fork the repository.
- Create a new branch (
git checkout -b feature/new-feature). - Make your changes and commit (
git commit -m 'Add new feature'). - Push your changes to your repository (
git push origin feature/new-feature). - Open a Pull Request for review.
This project is licensed under the MIT License. See the LICENSE file for more details.