https://github.com/amrmabdelazeem/social-media-dashboard

A dynamic web page offering real-time social media analytics. With an innovative theme switcher, users can effortlessly alternate between light and dark themes, tailoring their visual experience for optimal usability and style.
https://github.com/amrmabdelazeem/social-media-dashboard

dark-mode dom-manipulation es6 html-css-javascript javascript npm reactjs theme-switcher

Last synced: about 10 hours ago
JSON representation

A dynamic web page offering real-time social media analytics. With an innovative theme switcher, users can effortlessly alternate between light and dark themes, tailoring their visual experience for optimal usability and style.

• Host: GitHub
• URL: https://github.com/amrmabdelazeem/social-media-dashboard
• Owner: amrmabdelazeem
• Created: 2023-12-08T14:01:25.000Z (11 months ago)
• Default Branch: main
• Last Pushed: 2023-12-08T14:38:44.000Z (11 months ago)
• Last Synced: 2023-12-08T15:25:59.699Z (11 months ago)
• Topics: dark-mode, dom-manipulation, es6, html-css-javascript, javascript, npm, reactjs, theme-switcher
• Language: JavaScript
• Homepage: https://amrmabdelazeem.github.io/social-media-dashboard/
• Size: 1.53 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Social media dashboard with theme switcher solution

This is a solution to the [Social media dashboard with theme switcher challenge on Frontend Mentor](https://www.frontendmentor.io/challenges/social-media-dashboard-with-theme-switcher-6oY8ozp_H). Frontend Mentor challenges help you improve your coding skills by building realistic projects. 

## Table of contents

- [Overview](#overview)

  - [The challenge](#the-challenge)

  - [Screenshot](#screenshot)

  - [Links](#links)

- [My process](#my-process)

  - [Built with](#built-with)

  - [What I learned](#what-i-learned)

  - [Useful resources](#useful-resources)

- [Author](#author)

## Overview

![Design preview for the Social media dashboard with theme switcher coding challenge](public/desktop-preview.jpg)

### The challenge

Users should be able to:

- View the optimal layout for the site depending on their device's screen size

- See hover states for all interactive elements on the page

- Toggle color theme to their preference

### Screenshot

- Mobile view both in light and dark themes
 

![Mobile](public/screenshots/Mobile.jpg)

- Laptop view

![Laptop](public/screenshots/Laptop.jpg)

- Active states

![active-states-light](public/screenshots/active-states-light.jpg)

![active-states-dark](public/screenshots/active-states-dark.jpg)

### Links

- Solution URL: [Frontend Mentor]()

- Live Site URL: [Github](https://amrmabdelazeem.github.io/social-media-dashboard)

## My process

- Set up the project file locally.

- Run ```npx create-react-app``` then ```npm start``` in local console to create the react app.

- Start by setting up the basic structure of the app.

- Add the necessary components for the layout.

- Add root shortcuts for both light and dark themes.

- Add the necessary CSS to style the components.

- Add the necessary JavaScript to handle the color theme toggle.

- Manage active states for interactive components.

- Test the app on different screen sizes.

- Build and Deploy to Github pages.

### Built with

- Semantic HTML5 markup

- CSS custom properties

- Flexbox

- CSS Grid

- Mobile-first workflow

- [React](https://reactjs.org/) - JS library

### What I learned

- Avoid using jQuery with ReactJS as both manipulate the DOM.

```html

```

```css

html[data-theme="light"]{}

html[data-theme="dark"]{}

```

```js

document.querySelector("html").setAttribute("data-theme", "dark");

```

### Useful resources

- [ReactJS](https://reactjs.org/) - JS library

## Author

- Website - [Github](https://github.com/amrmabdelazeem)

- Frontend Mentor - [@amrmabdelazeem](https://www.frontendmentor.io/profile/amrmabdelazeem)