joaoaugustogrobe/react-crud

React CRUD: This project is deprecated and was built as my first React project a few years ago.

React-Crud (Deprecated)

Note: This project is deprecated and was built as my first React project a few years ago.

User registration project made in React. This project was developed during the React - Cod3r course, but the entire backend was changed, not using the process seen in the course.

Objectives:

Create a React-based web application that performs the 4 basic operations of user registration (Create, Read, Update, and Delete).

Execution:

This project was divided into two parts:

JSON Server: A simple server that handles requests made by the front-end application. This server also manages a .json file that stores all user data

Express Server

After creating the JSON server (seen within the course), I decided to create my own server using Express and MySQL (located in my other repository) and integrate it with this React project. For more information about the backend, visit: https://github.com/joaoaugustogrobe/Express-CRUD-Backend

Front-end / React

The part responsible for providing a graphical interface for the user and making requests to the server.

What I learned:

During this project, I better consolidated the concepts:

• HTML requests through Axios;
• React components;
• Basic notions about Bootstrap;
• Font-awesome library;
• Navigation using React-router;

Next steps / Going beyond the course

After finishing the course, I plan to change the server back-end, using an SQL database and a NoSQL database, to test the differences in performance between the 3 methods and the ease of creating the environment in each of the ways.

• Back-end
• SQL Database (MySQL)
• NoSQL Database
• Invalidate empty input
• Email field validation (required syntax <>@<>.<> or similar)

Running the service:

• To run this project, you need to download the backend server (link already posted above).

Enter the frontend directory and run the React application - http://localhost:3000 * Enter this link to view the application

cd frontend && npm start

Enter the backend directory and run the JSON server - http://localhost:3001 cd backend && npm start

react-crud's Issues

Tela de desconectado

O código que faz a verificação se o usuário esta conectado esta dentro de UserCrud, que é um componente carregado apenas quando em '/users'. Quando o usuário esta desconectado, antes da tela aparecer, volta para '/home' o navegador recebe atrasado a resposta da requisição, que, por sua vez faz com que a tela apareça, impossibilitando a navegação do sistema, pois outra requisição só sera feita quando voltar para '/users' e a tela impede o usuário de navegar para lá.

Apos utilizar esta estrutura atual, percebi que a informação se o usuário esta conectado não deve pertencer ao componente UserCrud, e sim a uma parte mais externa da aplicação.
Irei alterar parte da estrutura do projeto para a verificação da conexão ser feita independente da pagina.

Scope and Tasks

• Requirements
  • CRUD - i'm using a "email" contacts
  • Login and Register
  • Secure password storage - md5
  • HTTPS and SSL
  • Password recovery on email
  • Administrative page

• Components
  • Footer
  • Header
  • Logo
  • Main
  • Nav
  • Overlay
  • UserCrud
  • Home
  • Login
  • Register
  • Profile

• User Crud
  • Create
  • Read
  • Update
  • Delete

• Login (backend)
  • Protected routes
  • Register
  • Login
  • Password Claim
  • Password Recovery
  • Password Change
  • Logout

• Login (Frontend)
  • Register
  • Login page
  • Logged page
  • Form Validation
    • Name
    • Email
    • Password