Skip to content

An Admin Panel Web App made with Next.js, Supabase, MongoDb and TailwindCSS.

Notifications You must be signed in to change notification settings

lazyjinchuriki/admin-panel

Repository files navigation

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

Next.js Tailwind CSS MongoDB React Stripe Supabase

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

Screenshot 1
Screenshot 2
Screenshot 3
Screenshot 4
Screenshot 5

Installation

  1. Clone the repository:
git clone https://github.com/lazyjinchuriki/admin-panel.git
  1. Install dependencies:
cd admin-panel
npm install
  1. 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.
  2. 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"
  1. 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 rahulkhushalani@proton.me.

Donations

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

Social

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

Instagram LinkedIn

Releases

No releases published

Packages

No packages published