Skip to content

Spectrum Store | A Robust E-commerce Platform Powered by Next.js, TypeScript, and Shadcn That leverages the Fake Store API, It features an Admin dashboard and JWT auth.

License

Notifications You must be signed in to change notification settings

issam-seghir/spectrum-store

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 

History

86 Commits
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

Alt text

Spectrum Store

cntr pullreQ comt MIT License

frk str deploy

Spectrum Store | A Robust E-commerce Platform Powered by Next.js, TypeScript, and Shadcn

That leverages the Fake Store API, It features an Admin dashboard and JWT auth.

Designed with a focus on security, it implements best practices for routing and server actions.

View Demo . Report Bug . Request Feature




alt text alt text

Built With

  • Next JS
  • TypeScript
  • Tailwind
  • Shadcn
  • React Hook Form
  • Rechart
  • Zod
  • JWT

Features

Technique

  • Next js 14 Last features
  • Next js Server Actions + Axios + Zod
  • React hook form + Validation with zod for both Client & Server
  • Authentication JWT + Cookies + Authorization DATA Layer + Middleware

Main

  • πŸ”’ Login Page With JWT Authentication + Logout

  • 🌍 Home Page with Grid Layout

  • πŸ‘œ Product Page Showing all Product with category filter

  • πŸ‘“ Product Details page with ratting , pricing & add cart button

  • πŸ›’ Cart Drawer (add to cart , remove from cart)

  • πŸ” Global Search Functionality

  • 🎨 Theme Toggler (Light /Dark mode)

  • ✨ Loading animations & Skeleton

  • πŸ“Š Admin Dashboard with CRUD operatons for prouct , pagination , searching charts

  • πŸ›‘ Security in mind : Authentication (JWT + Cookies) & Authorization DATA Layer + Middleware & Server actions with validation

  • πŸš€ Optimized SEO and Performance: The project is optimized for SEO and performance using the latest Next.js features and best practices for meta tags and Next/Image && site maps.

  • 🎊 Responsive Design

Note

  • you can use any fakestoreapi user to login

  • for admin role use only the default values

    • useranme : mor_2314
    • password : 83r5^_
  • You can open Admin dashboard and do CRUD on proudcts by following these steps :

    • make sure you login with admin account (mor_2314)
    • click on user icon
    • click on dashboard

alt text alt text alt text

Getting Started

First, run the development server:

  1. Clone or Fork the repo

    git clone https://github.com/issam-seghir/spectrum-store.git
    cd ./your_project
  2. Install Dependencies

    npm install
  3. rename .env.example file to .env

  4. Start the server

    npm run dev

Open http://localhost:3000 with your browser to see the result.

You can start editing the page by modifying app/page.tsx. The page auto-updates as you edit the file.

Deploy on Vercel

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out our Next.js deployment documentation for more details.

Contributing

Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.

If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement". Don't forget to give the project a star! Thanks again!

  1. Fork the Project
  2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
  3. Commit your Changes (git commit -m 'Add some AmazingFeature')
  4. Push to the Branch (git push origin feature/AmazingFeature)
  5. Open a Pull Request

License

Distributed under the MIT License. See LICENSE.txt for more information.

State

Stargazers over time

Support Me

Buy ma A Coffee

About

Spectrum Store | A Robust E-commerce Platform Powered by Next.js, TypeScript, and Shadcn That leverages the Fake Store API, It features an Admin dashboard and JWT auth.

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Sponsor this project

Packages

No packages published

Languages