CRUD

Technologies Used

Front-end

• Programming Language: JavaScript
• Libraries:
  • React.js
  • Axios
  • styled-components

Back-end

• Programming Language: JavaScript
• Runtime Environment: Node.js
• Libraries:
  • Dotenv
  • MySQL
• Framework: Express.js

Database

• Relational: MySQL

Getting Started

Clone repository:

git clone https://github.com/caio-andres/crud-fullstack.git

Run Front-end:

Open the terminal

cd front-end

npm install

npm start

Run Back-end:

Open a second terminal without close the first terminal

cd back-end

npm install

npm init -y

Create a file called .env in back-end folder, then copy the configurations bellow and paste in .env file, following the instructions in parentheses:

HOST=localhost
USER=(username)
PASSWORD=(password)
DATABASE=(database name)

Back to the second terminal again

npm start

Architecture Overview

Back-end:

• Developed in Node.js with the Express framework.
• Structured with a routes folder to manage API routes, with a users.js file to handle CRUD methods related to users.
• Utilization of a controllers folder to contain business logic, with a user.js file to define functions for each CRUD operation.

Front-end:

• Developed in React to create the user interface.
• Structured with a components folder to organize reusable components, including a form and a grid to display data.
• Utilization of a styles folder to manage global application styling, with a global.js file to define common styles.

Communication between back-end and front-end:

• The front-end makes HTTP requests to the back-end through endpoints defined in routes.
• Requests are handled in the back-end by methods defined in controllers, which interact with business logic and the database as necessary.
• The back-end returns responses to the front-end, which uses them to update the user interface as appropriate.

Architecture Benefits:

• Clear separation of responsibilities between front-end and back-end, facilitating system maintenance and scalability.
• Reusability of components in the front-end and business logic in the back-end, promoting clean and modular code.
• Utilization of modern technologies such as React and Node.js to create a robust and efficient application.

Routes

Method	Route	Description
GET	/	Return the created users datas from database.
POST	/	Adds a new user from data provided from the grid.
PUT	/:id	Updates the user data based on their ID.
DELETE	/:id	Deletes a user based on their ID.

Mind Map

Miro

Mind Map created in Miro, thinking at final user experience. Simple and direct.

Task Management Software

Trello

Methodology

KanBan

↓ Task Steps ↓

Backlog

The Backlog is a list of tasks, features, or items that need to be completed in the future. It represents a collection of ideas or requirements that have not yet been started.

Doing

Doing represents the tasks that are currently being worked on by the team. These tasks are actively being implemented or developed.

Testing

Testing is the phase where the completed tasks are assessed for quality and functionality. It involves running tests to ensure that the implemented features meet the specified requirements and work as intended.

Code Review

Code Review is a process where code changes made by developers are reviewed by other team members. It ensures that the code adheres to coding standards, is maintainable, and does not introduce any potential issues or bugs.

Done

Done represents the tasks that have been completed and meet the acceptance criteria. These tasks are ready to be delivered or deployed to the end-users or stakeholders.

Project Developer and README Author

@caio_andress