This is a simple CRUD (Create, Read, Update, and Delete) application designed to manage your contacts effectively. The application is built using modern web technologies such as Next.js, TypeScript, React, Redux-toolkit Query, Formik, Material-UI, and more.
While developing this project, I learned about Material UI and its use for creating components. I gained experience handling POST, DELETE, PUT, and GET requests using the redux-toolkit query. The implementation of pagination, including the solution to the zero-based designed TablePagination, was another important aspect that I learned. Additionally, my TypeScript skills were improved as I gained a deeper understanding of types and interfaces. The deployment of the application was done using Vercel, which is a great tool for deploying Next.js applications, and learning how to use it effectively to deploy the application is a must for any developer who wants to build a production-ready application using Next.js and React in general today.
Throughout the learning process, I was continuously challenged and pushed to improve my skills. I faced many difficulties and obstacles, but through persistence and determination, I was able to overcome them and achieve my goals. This project was a great opportunity for me to grow as a developer and gain valuable experience in several important areas. I am very grateful for the opportunity to work on this project and to learn from the experience.
Durante el proceso de desarrollo de este proyecto, aprendí sobre Material UI y su uso para crear componentes. Adquirí experiencia en el manejo de peticiones POST, DELETE, PUT y GET utilizando la consulta redux-toolkit. La implementación de la paginación, incluida la solución a la paginación tablePagination diseñada "cero-based", fue otro aspecto importante que aprendí. Además, mis habilidades en TypeScript mejoraron al tener una comprensión más profunda de los tipos e interfaces utilizados por distintas librerías de uso común. El despliegue de la aplicación se realizó utilizando Vercel, que es una excelente herramienta para desplegar aplicaciones Next.js, y aprender a usarla efectivamente para desplegar la aplicación es un requisito para cualquier desarrollador que desee construir una aplicación lista para producción utilizando Next.js y React en general hoy en día es para mi mandatorio.
A lo largo del proceso de aprendizaje, fui continuamente desafiado y empujado a mejorar mis habilidades. Enfrenté algunas dificultades y obstáculos, pero a través de la persistencia y la determinación, pude superarlos y lograr mis metas. Este proyecto fue una oportunidad mas para crecer como desarrollador y adquirir experiencia valiosa en una serie de áreas importantes. Estoy muy agradecido por la oportunidad de realizar este reto y aprender de la experiencia.
These instructions will get you a copy of the project up and running on your local machine for development and testing purposes.
Before you start, you need to have Node.js and npm installed on your computer.
Clone the repository and install the dependencies.
$ git clone https://github.com/ryarturogi/contacts-managment-app.git
$ cd contacts-management-app
$ yarn install
To start the development server, run the following command.
$ yarn dev
Open your browser and visit http://localhost:3000. You should see the app running.
To build the app for production, run the following command.
$ yarn build
This will compile the app and create a .next directory containing the optimized production build.
To start the production server, run the following command.
$ yarn start
- Next.js - A React-based framework for building server-side rendering and static web applications.
- TypeScript - A statically-typed programming language that builds on JavaScript.
- React - A JavaScript library for building user interfaces.
- Redux - A predictable state management library for JavaScript applications.
- Redux Toolkit Query - A set of tools and APIs for simplifying the use of Redux.
- Formik - A library for building forms with React.
- Yup - A JavaScript object schema validator and object parser.
- Material-UI - A popular React UI library that implements Google's Material Design.
- date-fns - A modern JavaScript library for working with dates.
- Lodash - A utility library that provides a lot of useful functions for working with arrays, numbers, objects, strings, etc.
- React Toastify - A React library for adding notification toasts to your app.
- Ricardo Guillen I - r.arturogi@gmail.com
This library is released under the MIT License. See the LICENSE file for more details.