https://github.com/zahidrahimoon/rahi-dev

"Building a stunning landing page that mirrors Instagram's aesthetic using React and Material UI. Crafting a visually appealing interface with responsive design, showcasing the power of modern web development techniques."
https://github.com/zahidrahimoon/rahi-dev

material-ui reactjs ui ux webdevelopment

Last synced: 7 days ago
JSON representation

"Building a stunning landing page that mirrors Instagram's aesthetic using React and Material UI. Crafting a visually appealing interface with responsive design, showcasing the power of modern web development techniques."

• Host: GitHub
• URL: https://github.com/zahidrahimoon/rahi-dev
• Owner: zahidrahimoon
• Created: 2024-03-10T07:17:18.000Z (8 months ago)
• Default Branch: master
• Last Pushed: 2024-03-28T17:48:14.000Z (8 months ago)
• Last Synced: 2024-03-28T19:06:08.194Z (8 months ago)
• Topics: material-ui, reactjs, ui, ux, webdevelopment
• Language: JavaScript
• Homepage:
• Size: 196 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Rahi Dev

A simple landing page built with React and Material UI that looks like Instagram.

## Features

- Basic components: Navbar ,Sidebar,Feed, Rightbar

- Material UI components

- Dark and light theme support

- Fully responsive design

- Interactive components

## Getting Started

To get started, simply clone the repository and install the dependencies.

```bash

git clone [https://github.com/yourusername/InstaLandingPage.git](https://github.com/zahidrahimoon/InstaGood.git)

cd Rahi Dev

npm install

```

## Theme

The InstaLandingPage supports both dark and light themes. The theme can be changed by clicking the moon icon in the top right corner of the page.

## Responsive Design

The InstaLandingPage is fully responsive and includes media queries to ensure that it looks great on all devices.

## Project Demo

Check out the project demo [here](https://frolicking-gumption-d1e8e1.netlify.app).

## Components

The project consists of the following components:

- **Sidebar**: Contains the theme switcher and social media links.

- **Feed**: Displays the main content of the landing page.

- **Rightbar**: Displays additional content or information.

## Usage

To run the project, use the following command:

```bash

npm start

```

## Code Example

```jsx

import React, { useState } from "react";

import Sidebar from "./components/Sidebar";

import Feed from "./components/Feed";

import Rightbar from "./components/Rightbar";

import Navbar from "./components/Navbar";

import { Box, Stack, ThemeProvider, createTheme } from "@mui/material";

const App = () => {

  const [mode, setMode] = useState("dark");

  const darkTheme = createTheme({

    palette: {

      mode: mode,

    }

  });

  return (

    

      

        

        

          

          

          

        

      

    

  );  

};

export default App;

```

Thanks 🥰