spectrum store
1.0.0
스펙트럼 스토어 | Next.js, TypeScript 및 Shadcn으로 구동되는 강력한 전자상거래 플랫폼
이는 Fake Store API를 활용하며 관리 대시보드와 JWT 인증 기능을 갖추고 있습니다.
보안에 중점을 두고 설계되었으며 라우팅 및 서버 작업에 대한 모범 사례를 구현합니다.
데모 보기 버그 신고 기능 요청
다음 js 14 마지막 기능
다음 js 서버 작업 + Axios + Zod
React 후크 양식 + 클라이언트 및 서버 모두에 대해 zod를 사용한 유효성 검사
인증 JWT + 쿠키 + 인증 데이터 레이어 + 미들웨어
JWT 인증을 사용한 로그인 페이지 + 로그아웃
그리드 레이아웃이 포함된 홈 페이지
카테고리 필터가 있는 모든 제품을 표시하는 제품 페이지
평가 , 가격 , 장바구니 추가 버튼이 있는 제품 세부정보 페이지
카트 서랍 (카트에 추가, 카트에서 제거)
글로벌 검색 기능
테마 토글러 (밝음/어두움 모드)
애니메이션 및 스켈레톤 로딩
제품, 페이지 매김, 차트 검색을 위한 CRUD 작업이 포함된 관리 대시보드
염두에 둔 보안 : 인증 (JWT + 쿠키) 및 권한 부여 데이터 계층 + 미들웨어 및 유효성 검사가 포함된 서버 작업
최적화된 SEO 및 성능 : 프로젝트는 최신 Next.js 기능과 메타 태그 및 Next/Image && 사이트 맵 에 대한 모범 사례를 사용하여 SEO 및 성능에 최적화되어 있습니다.
반응형 디자인
어떤 fakestoreapi 사용자라도 로그인할 수 있습니다.
관리자 역할 의 경우 기본값만 사용하십시오.
사용자 이름 : mor_2314
비밀번호 : 83r5^_
다음 단계에 따라 관리 대시보드를 열고 Proudcts에서 CRUD를 수행할 수 있습니다.
관리자 계정( mor_2314 )으로 로그인했는지 확인하세요.
사용자 아이콘을 클릭하세요
대시보드를 클릭하세요
먼저 개발 서버를 실행합니다.
저장소 복제 또는 포크
자식 클론 https://github.com/issam-seghir/spectrum-store.gitcd ./your_project
종속성 설치
npm 설치
.env.example 파일의 이름을 .env 로 바꿉니다.
서버 시작
npm 실행 개발자
브라우저에서 http://localhost:3000을 열어 결과를 확인하세요.
app/page.tsx 수정하여 페이지 편집을 시작할 수 있습니다. 파일을 편집하면 페이지가 자동으로 업데이트됩니다.
Next.js 앱을 배포하는 가장 쉬운 방법은 Next.js 제작자의 Vercel 플랫폼을 사용하는 것입니다.
자세한 내용은 Next.js 배포 설명서를 확인하세요.
기여는 오픈 소스 커뮤니티를 배우고, 영감을 주고, 창조할 수 있는 놀라운 장소로 만드는 것입니다. 귀하의 기여 에 크게 감사드립니다 .
이를 개선할 제안이 있다면 저장소를 포크하고 끌어오기 요청을 작성하세요. "enhancement" 태그를 사용하여 이슈를 열 수도 있습니다. 프로젝트에 별점을 주는 것을 잊지 마세요! 다시 한 번 감사드립니다!
프로젝트 포크
기능 분기 만들기( git checkout -b feature/AmazingFeature )
변경 사항 커밋( git commit -m 'Add some AmazingFeature' )
브랜치로 푸시( git push origin feature/AmazingFeature )
끌어오기 요청 열기
MIT 라이센스에 따라 배포됩니다. 자세한 내용은 LICENSE.txt 참조하세요.
