Logo, una animación de memoji sonriendo

Project: Multi-page web form

Introduction

This application serves as an exercise project aimed at building a multi-page form with Firebase authentication, storage, and database integration as the backend. Essentially, it simulates the process of applying for a job opportunity.

Type:

  • Web App
  • Responsive Design

Tools:

  • CSS & HTML
  • React 18
  • Firebase
  • Git & GitHub
  • Netlify

Live:

Project Purpose

Inspired by the multitude of complex forms that users have to fill out when applying for a job, I created this simple app that expresses how I believe the process should be.

The UX flow is divided into two paths: if the user is new, they go through registration and application, and if they are already registered, they go through login and check if they have already applied for the position.

In the end, there is an option to delete all data and applications by the same user.

My Role in the Project

Using the Figma app, the design and UI of the app were created.

Subsequently, step by step, the structure of the app and the UX flow were built. The connection with Firebase was used as the backend. Then, different features were added. Finally, Netlify was used via GitHub for deployment.

The idea is to continue adding new features and improving the design.

Tres tarjetas de ofertas

Web stack and explanation

Workspace: Visual Studio Code. I used Vite as a fast development environment along with EsLint and Prettier to maintain clean and consistent code.

Figma: I used Figma to design and create attractive user interfaces, focusing on user experience and user interface.

CSS: I transformed designs into functional applications using modern CSS. I made use of Flexbox, Grid, and the new container query to achieve a fluid and responsive design.

React: Reusable components, props. Use of conditional rendering. Form control with state through value and onChange. useEffect for network requests and some other opportunities. useState.

Firebase: I implemented user registration, data submission to the real-time database, login and logout, as well as functionality to delete data.

Netlify: I achieved continuous and seamless deployment through GitHub, ensuring constant updates.

Extras: I integrated react-markdown and react-feather to enhance the functionality and visual appeal of the application. Also packages like remove-scroll and focus-lock to optimize accessibility and user experience.

Git: I effectively managed version control using commits, branches, merge, restore, and push to collaborate effectively in teams and maintain a coherent change history.