Protein Corner

Protein Corner is a frontend Next.js e-commerce application developed in November 2024 to sell protein-based products like chicken, fish, beef, egg, and milk. The site features a dynamic hero section with a product video, a responsive navbar, product cards with filtering options, a contact form, a cart system, and a payment route. Built with Next.js, React, Tailwind CSS, and JavaScript, it delivers a fast, user-friendly experience, highlighting skills in dynamic routing, state management, and responsive design.

Protein Corner

Technology Stack

Next.jsNext.js
ReactReact
Tailwind CSSTailwind CSS
JavaScriptJavaScript

Landing Page (/ Route)

The landing page features a hero section with a video showcasing chicken, fish, beef, egg, and milk, creating an engaging introduction to the store.

The navbar includes links to Shop, Contact, Payment, Login, and a Cart icon, with 'Enter Shop' and 'Contact Us' buttons in the hero section.

  • Dynamic hero video for product engagement
  • Responsive navbar with intuitive navigation
  • Prominent call-to-action buttons in hero
  • Consistent design across devices
Landing Page (/ Route) image 1

Scrolling down reveals a product catalog with cards displaying image, name, price, discount, and an 'Add to Cart' button, alongside filtering options for all, chicken, beef, egg, milk, and fish.

  • Responsive product card grid layout
  • Dynamic filtering by product category
  • Clear pricing and discount display
  • Interactive 'Add to Cart' functionality
Landing Page (/ Route) image 1

Shop Route

The Shop route mirrors the product catalog from the landing page, featuring cards with image, name, price, discount, and 'Add to Cart' button, along with category filters for all, chicken, beef, egg, milk, and fish.

This dedicated route provides a focused shopping experience with consistent design and functionality.

  • Consistent product card layout with landing page
  • Category-based filtering for easy browsing
  • Seamless add-to-cart interactions
  • Optimized for performance and usability
Shop Route image 1

Cart Functionality

Clicking 'Add to Cart' on a product card adds the item to the cart, accessible via the Cart icon in the navbar, displaying all added products.

Users can adjust quantities using '+' and '-' buttons for each product in the cart.

  • Dynamic cart with real-time updates
  • Quantity adjustment for each product
  • Responsive cart display for all devices
  • State management for cart persistence
Cart Functionality image 1

Contact Route

The Contact route features a 'Send Message' form linked to the company email, allowing users to submit inquiries or support requests, similar to the Utes project.

The form is designed for simplicity and reliability, ensuring effective communication with the Protein Corner team.

  • Integrated contact form with email functionality
  • Form validation for reliable submissions
  • Responsive design for desktop and mobile
  • Clear call-to-action for inquiries
Contact Route image 1

Payment Route

The Payment route displays all products added to the cart, their total cost, and a 'Checkout' button to complete the purchase process.

The layout ensures clarity and ease of use for finalizing transactions.

  • Comprehensive cart summary with total cost
  • Checkout button for transaction completion
  • Responsive and clear payment interface
  • Secure and streamlined purchase flow
Payment Route image 1

Technical Implementation

Built with Next.js for server-side rendering and dynamic routing, ensuring fast load times and SEO-friendly content delivery.

Utilizes Tailwind CSS for a responsive, utility-first design system, maintaining consistency across all routes and devices.

  • Next.js dynamic routing for shop and payment pages
  • React hooks for state and effect management
  • Tailwind CSS for rapid, responsive styling
  • Optimized image and video handling
  • SEO-friendly structure for e-commerce visibility