Skip to content

README.md

Latest commit

 

History

History
104 lines (67 loc) · 4 KB

README.md

File metadata and controls

104 lines (67 loc) · 4 KB

Bienvenido a BlogPost

BlogPost es una aplicación diseñada para aprender sobre autenticación y autorización usando React y Tailwind CSS. Permite a los usuarios crear, editar, comentar en blogs y ver perfiles de otros usuarios, proporcionando diferentes niveles de acceso según el rol del usuario.

Autenticación y Autorización

Usuarios actuales

Solo el administrador puede cambiar los roles de los demás usuarios

Usuarios y roles

USER ROL
Ultis Admin
Eva Editor
Milo Tester
Zoe User
Otis User

Permisos por rol --- Blogs

ROL Eliminar Blogs Crear Blogs Editar Todos los Blogs Comentar Blog
Admin ✅ ✅ ✅ ✅
Editor ❌ ❌ ✅ ✅
Tester ❌ ✅ ❌ ✅
User ❌ ❌ ✅ Si el blog es propio ✅

Permisos por rol --- Perfiles

ROL Ver Perfiles Eliminar perfil Editar Perfil
Admin ✅ ✅ ✅
Editor ✅ ❌ ❌
Tester ✅ ❌ ❌
User ✅ ❌ ✅ Si el perfil es propio

Características

  • Navegación con React Router: Gestiona rutas y navegación eficientemente.
  • Gestión de Estado: Utiliza createContext y React para manejar el estado global de la aplicación.
  • Autenticación de Usuarios: Facilita el inicio y cierre de sesión con diferentes permisos según el rol del usuario.
  • Responsive Design: Diseñado con un enfoque Mobile First.
  • Blogs: Permite a los usuarios ver los blogs publicados, comentar en ellos, y si son los autores, editarlos.
  • Profiles: Los usuarios pueden ver el perfil público de los usuarios registrados.

Tecnologias Usadas

  • React
  • React Router
  • Tailwind CSS
  • Vite
  • gh-pages

Cómo iniciar el proyecto

  1. Clona el repositorio:

    git clone https://github.com/Ulternae/Blogpost.git

  2. Instala las dependencias:

    npm i

  3. Ejecuta el proyecto:

    npm run dev

Esto correra la aplicacion en http://localhost:5173/Blogpost/

Estructura del Proyecto

Descripción de cómo los archivos y carpetas están organizados en el proyecto:

assets

Contiene todos los recursos gráficos como imágenes y SVGs utilizados en la aplicación.

api

Simula la interacción con una base de datos:

  • blogdata.js: Maneja la recuperación y gestión de los blogs.
  • usersdata.js: Maneja la recuperación y gestión de datos de usuarios, incluyendo roles y permisos.

pages

Alberga todos los componentes de React utilizados para construir la interfaz de usuario de la aplicación. Algunos de los componentes importantes incluyen:

  • BlogCreate: Interfaz para que los usuarios creen nuevos blogs.
  • Home: La página de inicio que da la bienvenida al usuario a la aplicacion
  • BlogPage: Muestra todos los blogs creados
  • Menu: Gestiona la navegación principal del sitio.

utilities

Maneja el estado global con Context API

Vista General de la Interfaz de Usuario

image image