Admin Panel (Nex.js)

This is the Admin Panel(for our Ecommerce Store) Web App made with Next.js and other modern technologies where authorised users can authenticate themself and create/view Products, Categories and Orders. I have added a Properties section to the Categories to create properties such as Color, Weight, Size, etc.

Tech Stacks

Features

• User Registration and Authentication: Secure user access with Google Auth authentication.
• User Login and Logout: Easy login and logout for authorized access.
• Product Management: Create, view, and manage products effortlessly.
• Category Management: Effective product categorization with properties like color, weight, size, etc.
• Order Management: Track, update, and complete customer orders.
• Image Gallery: User-specific image uploads whith Supabase.
• Responsive Design: Seamlessly adapt to various screen sizes for optimal user experience.
• Supabase Integration: Backend services including Storage Bucket.
• Properties Section: Define product properties within categories for better categorization.
• User-Friendly Interface: Intuitive interface for streamlined management by all users.

Screenshots

Installation

1. Clone the repository:

git clone https://github.com/lazyjinchuriki/admin-panel.git

2. Install dependencies:

cd admin-panel
npm install

3. Set up Environment Variables:

   • Create a Supabase project on the Supabase Dashboard.
   • Configure storage in your Supabase project settings.
   • Copy your Supabase API URL and public API key.
   • Create an OAuth Account for authentication
   • Create a MongoDB Account for Database Storate.

4. Create a .env file in the project root and add your configuration:

GOOGLE_ID=""
GOOGLE_SECRET=""
MONGODB_URI=""

NEXT_PUBLIC_SUPABASE_URL=""
NEXT_PUBLIC_SUPABASE_ANON_KEY=""
NEXT_PUBLIC_CDN_URL=""

STRIPE_SECRET_KEY=""

NEXT_PUBLIC_DOMAIN="http://localhost:3000"

5. Start the development server:

npm run dev

Usage

After running the development server, you can view the app at http://localhost:3000/

Customization

The app Pages can be customized by editing the /pages/ folder. You will find all the components in /components/ folder.

Contributions

Contributions to the project are welcome. Please create an issue or submit a pull request if you would like to contribute.

Contact

If you have any questions or concerns, you can contact the author of this project at [email protected].

Donations

If you found Gallery useful, consider buying me a coffee!

Social

If you're not coding right now, check out my socials: