https://github.com/zubairahmedbalouch/hackathon-e-commerce-store

Designed and developed a pixel-perfect, responsive E-Commerce Store UI based on a provided Figma template within a 24-hour time constraint using Next.js and Tailwind CSS.
https://github.com/zubairahmedbalouch/hackathon-e-commerce-store

nextjs14 tailwind-css

Last synced: 10 days ago
JSON representation

Designed and developed a pixel-perfect, responsive E-Commerce Store UI based on a provided Figma template within a 24-hour time constraint using Next.js and Tailwind CSS.

• Host: GitHub
• URL: https://github.com/zubairahmedbalouch/hackathon-e-commerce-store
• Owner: ZubairAhmedBalouch
• Created: 2024-12-09T15:27:22.000Z (15 days ago)
• Default Branch: main
• Last Pushed: 2024-12-09T18:28:01.000Z (15 days ago)
• Last Synced: 2024-12-09T19:30:36.150Z (15 days ago)
• Topics: nextjs14, tailwind-css
• Language: TypeScript
• Homepage: https://hackathon-e-commerce-store.vercel.app
• Size: 28.7 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
***** Next.js Design Jam 2024 - E-commerce Store UI (Hackathon)******

# Project Purpose:

This project was developed as part of the UI/UX Hackathon - Next.js Design Jam 2024, conducted under GIAIC Quarter 2. The purpose of the hackathon was to create a pixel-perfect, responsive e-commerce store UI based on the assigned Figma template. The project demonstrates proficiency in building modern web interfaces using Next.js and Tailwind CSS, adhering to design principles and achieving responsiveness across devices.

# Key Components Implemented:

Header and Navigation Bar: Includes a responsive navigation menu with links to key sections.

Hero Section: A visually appealing introductory section showcasing the store’s primary message.

Product Grid: Displays products dynamically in a grid layout, ensuring responsiveness.

Footer: Contains links to essential pages and social media icons.

Responsiveness: The design adapts seamlessly to various screen sizes (desktop, tablet, and mobile).

Figma Compliance: All sections follow the provided Figma design guidelines for pixel-perfect implementation.

# Steps to Run the Project Locally:

To run the project on your local machine, follow these steps:

Clone the Repository: Start by cloning the project repository using Git. Navigate to the desired folder on your computer, open a terminal, and execute the git clone command followed by the repository link. Once cloned, move into the project directory using the cd command.

Install Dependencies: Ensure you have Node.js and npm installed on your system. Inside the project directory, run npm install in the terminal to download and set up all the required dependencies for the project.

Start the Development Server: Use the command npm run dev to start the local development server. This will launch the project in development mode.

View the Project in the Browser: Open your browser and go to http://localhost:3000. You can now view and interact with the project locally.

Optional - Build for Production: If needed, you can build the project for production by running npm run build. Once built, start the production server using npm start. This will optimize the project for deployment.