¡Buen dia amigos!
En busca de inspiración, me encontré con este gran tutorial sobre el desarrollo de una aplicación cliente-servidor "social" en MERN + GraphQL.
Decidí descifrarlo y modificarlo un poco para los interesados. El descifrado significa que cada línea de código se proporciona con un comentario detallado. El refinamiento consiste en agregar un avatar de usuario y corregir varios errores críticos de la aplicación.
El código del proyecto está aquí .
Principales características de la aplicación
- Registro / autorización de usuarios
- Agregar / quitar publicaciones
- Publicaciones con Me gusta / No me gusta
- Agregar / quitar comentarios a las publicaciones
- Visualización de la cantidad de me gusta y comentarios
Pila de tecnología
Servidor:
- Servidor Apollo
- GraphQL + Etiqueta GraphQL
- Mangosta
- Token web JSON
- Bcrypt
- Supervisor
- Concurrentemente
Cliente:
- Reaccionar
- ReactDOM
- Reaccionar enrutador DOM
- Cliente Apollo
- GraphQL + Etiqueta GraphQL
- Decodificación JWT
- React Loader Spinner
- Reacción de interfaz de usuario semántica
Estructura del proyecto
- client - - public - index.html - - src - modules - components - CommentButton.js - - DeleteButton.js - - LikeButton.js - - MenuBar.js - - PostCard.js - , - PostForm.js - - index.js - - context - auth.js - - ... - pages - Home.js - / - Login.js - - Register.js - - SinglePost.js - - index.js - - utils - Loader.js - - MyPopup.js - - authRoute.js - - convertImg.js - base64- - formatDate.js - - useForm.js - - index.js - - graphql.js - graphql - ApolloProvider - , - App.css - semantic - App.js - - index.js - , Webpack - jsconfig.json - - ... - graphql - resolvers - , graphql - comments.js - - posts.js - - users.js - - index.js - - typeDefs.js - () , - models - Post.js - - User.js - - utils - check-auth.js - - validators.js - - index.js - - ...
Las instrucciones de instalación y ejecución se encuentran en el repositorio del proyecto.
Capturas de pantalla de la aplicación
Por razones obvias, no puedo mostrar la demostración de la aplicación, por lo que me limitaré a hacer capturas de pantalla. Autorización de
registro Página principal Página de publicación Eliminar publicación o comentario Base de datos Como siempre, estaré encantado de recibir cualquier tipo de comentario. Gracias por su atención y que tenga un buen día.
