Website - https://noble-grape-project.vercel.app/
The Noble Grape Project's shop offers a curated selection of wines from various regions, featuring detailed descriptions and tasting notes for each bottle. The website is user-friendly, allowing you to filter products by price range, ratings, categories, and brands. Each wine listing includes in-depth information about the grape varieties, tasting characteristics, and suggested food pairings. The design is clean and easy to navigate, providing a seamless shopping experience for wine enthusiasts.
| Technology | Version | Description |
|---|---|---|
| bcrypt | v5.1.1 | A library to hash passwords securely |
| cloudinary | v2.1.0 | A cloud service for managing images and videos |
| dayjs | v1.11.10 | A minimalist JavaScript library for date and time manipulation |
| dotenv | v16.4.5 | A module for loading environment variables from a .env file |
| mongoose | v8.2.1 | An ODM for MongoDB in Node.js |
| mongoose-unique-validator | v5.0.0 | A plugin for adding unique validation to Mongoose schemas |
| next | v14.1.2 | A React framework for server-side rendering and static site generation |
| next-auth | v4.24.7 | Authentication for Next.js applications |
| query-string | v9.0.0 | A library for parsing and stringifying URL query strings |
| react | v18 | A JavaScript library for building user interfaces |
| react-dom | v18 | React package for working with the DOM |
| react-hot-toast | v2.4.1 | A library for creating customizable toast notifications in React |
| react-icons | v5.0.1 | A library of popular icons as React components |
| react-image-file-resizer | v0.4.8 | A library for resizing images in the browser |
| sass | v1.71.1 | A CSS preprocessor for writing more maintainable and extendable styles |
| sharp | v0.33.3 | A high-performance image processing library for Node.js |
| slugify | v1.6.6 | A library to convert strings into URL-friendly slugs |
| stripe | v15.4.0 | A payment processing platform |
| eslint | v8 | A tool for identifying and fixing linting issues in JavaScript code |
| eslint-config-next | v14.1.2 | The ESLint configuration used by Next.js |
Follow these steps to set up the Noble Grape Project locally:
git clone https://github.com/ntzolov/noble-grape-project.git
cd noble-grape-projectnpm installCreate a .env file in the root directory and add the necessary environment variables.
npm run devNavigate to http://localhost:3000 to view the application.
- Full Stack React Ecommerce with NextJs NextAuth NextAPI
- Full Authentication & Authorization using NextAuth
- Create nextjs project
- Create navigation
- Nextjs API routes
- Signup to mongodb
- Using ENV variables
- Connect to mongondb
- Create user model
- Register API route
- Register form
- Regisger API request
- Login page
- Email and password login with next auth
- NextAuth configuration
- Provide user session from next auth
- Access logged in user info
- Loading page
- 404 Page not found
- User dashboard
- Protecting pages
- Redirect back to intended page
- Login with google
- Login page
- Save social login user in database
- Additional user info in session
- Show user role
- Admin layout and page
- Role based page protection for admin
- Deploy to vercel
- Category model
- Category create API
- Categories list API
- Categories update API
- Categories delete API
- Category context
- Category create
- Category list function
- Category update function
- Category delete function
- Category provider
- Category page for admin
- Category create, update and delete component
- Category list component
- Tags
- Tag Model
- Tag create API
- Tag list API
- Tag update API
- Tag delete API
- Tag context
- Tag create function
- Tag list function
- Tag update function
- Tag delete function
- Tag provider
- Tags page for admin
- Tag create update and delete component
- Tag list component
- Product model
- Product create API
- Get products list with pagination
- Get single product
- Product update and delete by admin
- Product context
- Admin create and update product
- Uploading images with client side resize
- Signup to cloudinary to get the credentials
- Image upload API
- Image uploads in product create
- Product Create, update, delete or clear buttons
- Admin products list
- Products list component for admin
- Display product info in ProductList
- Products display on home page
- Pagination component
- Product card component
- Product Single View Page
- Product Images and Preview Modal
- Modal close on page click
- Current user from server session
- Product Like API
- Product Unlike API
- User Liked Products API
- User Product Like Unlike Component
- Using Modal component
- 5 star rating system
- Rating API
- Shop page for advance product filtering
- Product filter component
- Categories, Tags and Brands API
- API request from context
- Filtering products
- Shop page layout with scrolling sidebar for filters
- Filtering products API request
- Filtered products API
- Product search (text based)
- Show Reviews Comments
- Products metadata
- Add to cart
- Cart page
- Create Order with Stripe Webhook
- Order model
- Stripe Coupon Discounts on checkout
- Stripe coupon API
- Discount coupon code embeded links for products
- Orders for user
- Stripe success page
- Stripe success and removal of products from cart
- When order is created decrement stock
- Build a Modern Ecommerce Application
- Master React and NextJs FullStack Web Development
- Implement User Authentication using NextAuth
- Integrate Payment Gateway using Stripe
- Tax Calculations, Shipping & Coupons
- Credit Card Payment (Supports Apple Pay / Google Pay)
- Dashboard for Users and Admin
- Managing Products and Orders
- Star Rating and Comments System
- Advance Filtering, Pagination and more
This project is licensed under the MIT License - see the LICENSE file for details.