LUXE

Description

This is a product website called Luxe that sells makeup and provides tutorials to help users create the best makeup looks tailored to their individual preferences. The platform is designed from a company's perspective, where only administrators can add or remove products. It features a user-friendly shopping experience, a library of tutorials for all skill levels, and an admin dashboard for product management. Built with React, Next.js, and Material-UI, it offers responsive design and seamless functionality.

Coming soon: Makeup tutorials for different makeup styles

Technologies

• Next.js

• React

• TypeScript

• MUI

• NanoId

• Zod

• LocalStorage

• React-hook-form

• Prisma

• SQL

• Neon

• Backend:

  • Prisma ORM
  • PostgreSQL: Database to store products, categories, and user data.

Installation

• npm install
• npm run dev
• npm run studio

Checklista för godkänt

• Utför en noggrann målgruppsanalys.
• Använd ett projekthanteringsverktyg, som Trello eller Kanban, för att strukturera arbetet.

Design och Prototyping

• Skapa wireframes och en prototyp i Figma som följer UX/UI-principer.
• Säkerställ att designen är responsiv för minst två olika skärmstorlekar och följer WCAG 2.1-standarder.

Applikationsutveckling

• Utveckla med ett modernt JavaScript-ramverk.
• Använd en databas för lagring och hämtning av data.
• Implementera state-hantering och skapa dynamiska komponenter med reaktivitet och interaktivitet.
• Följa WCAG 2.1-standarder och använda semantisk HTML.

Webbapplikation:

• Produkten är responsiv och fungerar korrekt på minst två skärmstorlekar (mobil och dator).
• Gränssnittet är användarvänligt och anpassar sig efter enheterna.

Native mobilapplikation:

• Produkten anpassas till olika skärmstorlekar och enhetsorienteringar (porträtt och landskap).
• Gränssnittet fungerar sömlöst på smartphones och surfplattor med korrekt layout och användarvänlighet.

Versionshantering

• Använd Git för versionshantering och hosta ett repo på GitHub.

Slutrapport

• Skriv en rapport (2–3 sidor) som inkluderar:
  • Abstract på engelska.
  • Val av tech stack och motiveringar.
  • Dokumentation av arbetsprocess, planering och research.

Deploy

• [-] Host projektet och gör det tillgängligt för visning i en webbläsare eller simulator.

Problem: Deployment har inte fungerat på Vercel på grund av ett okänt fel som inte har kunnat lösas hittills, men allt annat fungerar som det ska. *