React Website Design

This repository showcases a responsive React webpage, originally recreated from a design image. It use Vite React.js for dynamic UI components, and Tailwind CSS for styling. The project demonstrates dynamic data rendering for products and banners, easily customizable through data files.

#component #css #ecommerce #html #javascript #learning-by-doing #props #reactjs #tailwindcss

Demo Download

React Webpage Showcase

This project is my first React webpage, recreated from an image as part of my frontend skills showcase for HR, clients, and others interested in my work.

Tech Used

Vite React.js
Tailwind CSS
(HTML, CSS, JS)

Topic Used : components props useState

How to Install and Run

Clone the repository:

gh repo clone Rajneeshzytox/React-Website-design
cd react-webpage-showcase

Install dependencies:
```
npm install
```
Run the development server:
```
npm run dev
```
Open your browser and visit http://localhost:5173 or other, to see the webpage.

Features

Utilizes props to pass data dynamically.
Renders products and banners based on data provided.
Easily customizable: Add new elements to the data folder array to render additional products or banners.

Example data structure in data/Product_data.jsx:

[
     {
        id: "1",
        src: "img url",
        disc: "1st product text",
        prePrice: "$47.99",
        newPrice: "$28.99",
    },
     {
        id: "2",
        src: "img url",
        disc: "2nd product text",
        prePrice: "$47.99",
        newPrice: "$28.99",
    },
]

Screenshot (Project)

Screenshot (Inspiration)

see screenshots for mobile/tab/laptop in /public/screenshot/

Contact

Email: kumarrajneesh.work@gmail.com
LinkedIn: rajneeshzytox
Instagram: @rajneeshzytox
Twitter (X): rajneeshzytox
Portfolio: rajneeshzytox

Top categories

tailwind daisyui resume portfolio email blog dashboard landing-page admin ecommerce