{"id":20072312,"url":"https://github.com/arthurdsant/crud-sql","last_synced_at":"2026-04-11T01:05:32.743Z","repository":{"id":242459404,"uuid":"809503796","full_name":"ArthurDSant/Crud-SQL","owner":"ArthurDSant","description":"Full Stack project based on several technologies for its construction such as React, Vite.Js, Javascript, Styled-Components, Node.Js Nodemon, Express and MySQL.","archived":false,"fork":false,"pushed_at":"2024-07-15T17:12:44.000Z","size":2192,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-02T12:18:12.931Z","etag":null,"topics":["cors","css3","express","javascript","mysql","nodejs","nodemon","reatctjs","styled-components","vite"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ArthurDSant.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-06-02T21:43:03.000Z","updated_at":"2024-07-15T17:12:48.000Z","dependencies_parsed_at":"2024-06-03T06:30:38.680Z","dependency_job_id":"021936ab-f7bb-403f-87f4-adb74a2ec3e8","html_url":"https://github.com/ArthurDSant/Crud-SQL","commit_stats":null,"previous_names":["arthursantdev/crud","arthursantdev/crud-sql","arthurdsant/crud-sql"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/ArthurDSant/Crud-SQL","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ArthurDSant%2FCrud-SQL","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ArthurDSant%2FCrud-SQL/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ArthurDSant%2FCrud-SQL/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ArthurDSant%2FCrud-SQL/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ArthurDSant","download_url":"https://codeload.github.com/ArthurDSant/Crud-SQL/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ArthurDSant%2FCrud-SQL/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":280677255,"owners_count":26371899,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-10-23T02:00:06.710Z","response_time":142,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["cors","css3","express","javascript","mysql","nodejs","nodemon","reatctjs","styled-components","vite"],"created_at":"2024-11-13T14:39:29.879Z","updated_at":"2025-10-23T19:22:58.832Z","avatar_url":"https://github.com/ArthurDSant.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Crud API\n![Crud Pc 1](https://github.com/user-attachments/assets/139db758-63c9-4e89-991a-0ca98562339e)\nCrud API for user registration with a simple and objective design, storing customer data making it possible to add, remove and edit users in the database. Full Stack project based on several technologies for its construction such as React, Vite.Js, Javascript, Styled-Components, Node.Js Nodemon, Express and MySQL.\n\n\n## Stacks\n### Front End\n![React](https://img.shields.io/badge/React-000000?style=for-the-badge\u0026logo=react) ![Vite](https://img.shields.io/badge/vite-%23646CFF.svg?style=for-the-badge\u0026logo=vite\u0026logoColor=white) ![JavaScript](https://img.shields.io/badge/javascript-%23323330.svg?style=for-the-badge\u0026logo=javascript\u0026logoColor=%23F7DF1E) ![Styled Components](https://img.shields.io/badge/styled--components-DB7093?style=for-the-badge\u0026logo=styled-components\u0026logoColor=white) ![CSS3](https://img.shields.io/badge/css3-%231572B6.svg?style=for-the-badge\u0026logo=css3\u0026logoColor=white) \n### Back End\n![MySQL](https://img.shields.io/badge/mysql-4479A1.svg?style=for-the-badge\u0026logo=mysql\u0026logoColor=white) ![NodeJS](https://img.shields.io/badge/node.js-6DA55F?style=for-the-badge\u0026logo=node.js\u0026logoColor=white) ![Nodemon](https://img.shields.io/badge/NODEMON-%23323330.svg?style=for-the-badge\u0026logo=nodemon\u0026logoColor=%BBDEAD) ![Express.js](https://img.shields.io/badge/express.js-%23404d59.svg?style=for-the-badge\u0026logo=express\u0026logoColor=%2361DAFB)\n\n\n## Features\n- Front End structured in React with Vite.Js Framework\n- Styling done with Styled-Components and CSS \n- React-Toastify for notifications of changes made to the Database\n- Axios for HTTP requests such as GET, POST, PUT, DELETE\n- RESTful APIs through Express.Js and Node.Js\n- MySQL as a relational database where data is stored\n- Addition, removal and editing of saved users\n\n\n## Learnings\n![Styled Components](https://img.shields.io/badge/styled--components-DB7093?style=for-the-badge\u0026logo=styled-components\u0026logoColor=white) Styled-Components is a library for React and React Native that allows you to write CSS styles directly inside JavaScript components. Using tagged template literals, it combines style and component logic in one place, allowing for more cohesive and modular development. Usanod Styled-Components, styles are applied dynamically and scoped to the component, avoiding global CSS conflicts and making code maintenance and readability much easier.\n\n![MySQL](https://img.shields.io/badge/mysql-4479A1.svg?style=for-the-badge\u0026logo=mysql\u0026logoColor=white) I was able to learn about creating and maintaining databases where data is structured in tables with rows and columns, facilitating the execution of CRUD (Create, Read, Update, Delete) operations. Its versatility is incredible, allowing the creation of e-commerce and content management systems. I had a somewhat reasonable first look at its support for transactions, high availability, replication and security, which makes MySQL such a popular choice.\n\n![NodeJS](https://img.shields.io/badge/node.js-6DA55F?style=for-the-badge\u0026logo=node.js\u0026logoColor=white) Based on the fact that Node.Js is a JavaScript execution environment, it is predictable that the first contact would be more friendly, taking into account my experience with JavaScript, but the possibilities it offers as an execution environment in a virtual machine were quite surprising. I learned that Node.Js runs outside the browser, which makes it a great option for developing real-time web applications, such as web servers, RESTful APIs, and streaming applications. Its I/O model (non-blocking and event-driven) facilitates the management of asynchronous operations and greatly improves the efficiency and scalability of the application,\nIn this project I wasn't able to experiment in depth with this part of its features, but knowing that they exist makes me more confident in studying more about them.\n\n![Express.js](https://img.shields.io/badge/express.js-%23404d59.svg?style=for-the-badge\u0026logo=express\u0026logoColor=%2361DAFB) Being a minimalist and flexible Framework for Node.Js, it helps in simplifying the development of web applications and APIs. Despite being considered simple, I believe that this Framework is very complete for what it proposes, as it facilitates the creation of HTTP servers and the management of routes, in addition to allowing the use of middleware to add features such as authentication, JSON parsing and error handling.\n\n## Installation\n#### cd client\n```bash\n    npm create vite@latest ./\n    npm install\n\n    npm install axios\n    npm install react-icons --save\n    npm install --save react-toastify\n    npm install styled-components\n    or \n    npm install axios react-icons react-toastify styled-components\n```\n#### cd server\n```bash\n    npm init -y\n    \n    npm install mysql\n    npm install -g nodemon\n    npm install nodemon\n    npm install cors\n    or \n    npm install mysql express nodemon cors\n```\n#### Data Base\nAvoid placing 'localhost' on ports that are frequently used for functions other than API (:3306 or :8800), as your application may present an error because of this.\n```bash\nCREATE TABLE `crud`.`users` (\n  `id` INT NOT NULL AUTO_INCREMENT,\n  `name` VARCHAR(255) NOT NULL,\n  `email` VARCHAR(255) NOT NULL,\n  `tel` VARCHAR(255) NOT NULL,\n  `birthday` DATE NOT NULL,\n  PRIMARY KEY (`id`));\n```\n#### Add Example\n```bash\nINSERT INTO `crud_database`.`users` (`id`, `name`, `email`, `tel`, `birthday`) \nVALUES ('1', 'Arthur', 'arthur@email.com', '+55 555555555', '2002-08-25');\n```\n```bash\nALTER USER 'root'@'localhost' IDENTIFIED WITH mysql_native_password BY '********';\n```\n\n## Start Project\n```bash\n  cd client\n  npm run dev\n\n  cd server\n  npm start\n```\n\n\n## Screenshots\n![Crud Pc 1](https://github.com/user-attachments/assets/139db758-63c9-4e89-991a-0ca98562339e)\n\n![Crud Pc 2](https://github.com/user-attachments/assets/2c290a70-1195-4e5f-a54c-605ffd2a027b)\n\n![Crud Pc 3](https://github.com/user-attachments/assets/e7aace9a-f221-4997-a6d7-d7f7e5909877)","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Farthurdsant%2Fcrud-sql","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Farthurdsant%2Fcrud-sql","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Farthurdsant%2Fcrud-sql/lists"}