Skip to content

Latest commit

 

History

History
106 lines (85 loc) · 4.71 KB

README.md

File metadata and controls

106 lines (85 loc) · 4.71 KB
Raw

Project in pairs - CRUD (React) 🚀

Table of contents 📄

Overview ✍️

The Product Manager is a web application developed with React and Sass that allows you to efficiently manage products. The application provides functionalities to add, edit, delete, and view products. It includes a form for adding and editing products, as well as a table that displays the registered products. The application connects to a backend API developed in Express to handle the data. This repository contains the frontend structure, here is the link of the backend repository: Backend-Repository,and the link of the application deployed in vercel: Deployed Project

Installation ⚙️

To get started with the project, follow these steps:

  1. Clone the repository:
git clone https://github.com/erickfabiandev/CrudProject-React-Express
  1. Navigate to the project directory:
cd CrudProject-React-Express
  1. Install the dependencies:
 npm install
  1. Start the application:
 npm run dev

The Challenge 🏋️‍♂️

The main challenge of this project is to develop a web application that allows efficient management of products. The key functionalities include:

  • Add products: Use the form to add new products to the database via the backend API.
  • Edit products: Modify the information of existing products using the form and update the changes via the API.
  • Delete products: Remove products from the database via the API with a single click.
  • View products: The table displays the registered products obtained from the API in a clear and organized manner.

Screenshot 📷

Here is a screenshot of the project's interface:

1. Web View Alt text 1.1. Features (ADD/EDIT/DELETE)

  • Add Button (Top): Activates the view to add a new product Alt text
  • Add button (bottom): Add a product to the list of products, as long as the form is complete Alt text
  • Edit button:* Captures the product data transporting it to the form for editing, in addition to activating the update and cancel buttons
  • Update button: Updates the product data, modifying it in the database and refreshing the product list view. To finish, go back to the view to add a new product Alt text Alt text
  • Delete button: Deletes a selected product from the database and refreshes the product list view. Alt text

1.2. Additional Features Option About (Information about the project) / Option Teams (Development team) Alt text Alt text Alt text

2. Mobile View

Alt text

My Process ⛰️

Built With 🛠️

The project was built using the following technologies:

  • React: JavaScript library for building interactive user interfaces.
  • Sass: CSS preprocessor for easy and organized styling.
  • API: The application consumes a backend API developed in Express to manage product data.

What I Learned 🔬

During the development of this project, I gained experience in:

  • Utilizing React to create reusable components and manage the application state.
  • Applying custom styles using Sass to enhance the visual appearance.
  • Consuming an Express backend API to perform CRUD (Create, Read, Update, Delete) operations on products.

Continued Development 💼

In the future, there are plans to improve the Product Manager with the following features:

  • Implement user authentication to secure product management actions.
  • Add filtering and search functionalities based on the API to facilitate product exploration.
  • Enhance the user interface and user experience to make it more intuitive and appealing.

Useful Resources 🆘

During the development of this project, the following resources were helpful:

Authors 🤓

This project was created by viamazoba and erickfabiandev. You can find our GitHub profiles at the following links: