spectrum store

Tienda de espectro

Tienda de espectro | Una sólida plataforma de comercio electrónico impulsada por Next.js, TypeScript y Shadcn

Aprovecha la API de la tienda falsa, cuenta con un panel de administración y autenticación JWT.

Diseñado centrándose en la seguridad, implementa las mejores prácticas para el enrutamiento y las acciones del servidor.

Ver demostración. Informar error. Solicitar función

---

Características

Técnica

• Siguiente js 14 Últimas características

• Siguientes acciones del servidor js + Axios + Zod

• Formulario de gancho de reacción + Validación con zod tanto para Cliente como para Servidor

• Autenticación JWT + Cookies + Capa de DATOS de autorización + Middleware

Principal

• Página de inicio de sesión con autenticación JWT + cerrar sesión

• Página de inicio con diseño de cuadrícula

• Página del producto que muestra todos los productos con filtro de categoría

• Página de detalles del producto con botón de calificación , precios y agregar carrito

• Cajón del carrito (agregar al carrito, quitar del carrito)

• Funcionalidad de búsqueda global

• Alternador de tema (modo claro/oscuro)

• Cargando animaciones y esqueleto

• Panel de administración con operaciones CRUD para productos, paginación y gráficos de búsqueda

• Seguridad en mente : autenticación (JWT + cookies) y capa de DATOS de autorización + acciones de middleware y servidor con validación

• SEO y rendimiento optimizados : el proyecto está optimizado para SEO y rendimiento utilizando las últimas funciones y mejores prácticas de Next.js para metaetiquetas y mapas de sitio Next/Image &&.

• Diseño Responsivo

Nota

• puedes usar cualquier usuario de fakestoreapi para iniciar sesión

• para el rol de administrador use solo los valores predeterminados

• nombre de usuario : mor_2314

• contraseña : 83r5^_

• Puede abrir el panel de administración y realizar CRUD en productos siguiendo estos pasos:

• asegúrese de iniciar sesión con una cuenta de administrador ( mor_2314 )

• haga clic en el icono de usuario

• haga clic en el tablero

Empezando

Primero, ejecute el servidor de desarrollo:

1. Clonar o bifurcar el repositorio

    clon de git https://github.com/issam-seghir/spectrum-store.gitcd ./your_project

2. Instalar dependencias

    instalación npm

3. cambiar el nombre del archivo .env.example a .env

4. Iniciar el servidor

    npm ejecutar desarrollador

Abra http://localhost:3000 con su navegador para ver el resultado.

Puede comenzar a editar la página modificando app/page.tsx . La página se actualiza automáticamente a medida que edita el archivo.

Implementar en Vercel

La forma más sencilla de implementar su aplicación Next.js es utilizar la plataforma Vercel de los creadores de Next.js.

Consulte nuestra documentación de implementación de Next.js para obtener más detalles.

Contribuyendo

Las contribuciones son las que hacen de la comunidad de código abierto un lugar increíble para aprender, inspirar y crear. Cualquier contribución que hagas será muy apreciada .

Si tiene alguna sugerencia que pueda mejorar esto, bifurque el repositorio y cree una solicitud de extracción. También puedes simplemente abrir un problema con la etiqueta "mejora". ¡No olvides darle una estrella al proyecto! ¡Gracias de nuevo!

1. Bifurcar el proyecto

2. Crea tu rama de funciones ( git checkout -b feature/AmazingFeature )

3. Confirme sus cambios ( git commit -m 'Add some AmazingFeature' )

4. Push to the Branch ( git push origin feature/AmazingFeature )

5. Abrir una solicitud de extracción

Licencia

Distribuido bajo la licencia MIT. Consulte LICENSE.txt para obtener más información.