/social-media-dashboard

Reto de Frontend Mentor

Primary LanguageJavaScript

Frontend Mentor - Social media dashboard with theme switcher solution ☀️🌙

This is a solution to the Social media dashboard with theme switcher challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

Table of contents 🧾

Overview 👀

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 📷

Light Theme Screenshot Dark Theme Screenshot

Links 🔗

My process 🏗️

Built with 🧰

  • Semantic HTML5 markup
  • CSS custom properties
  • SASS - CSS preprocessor
    • 7-1 Pattern
  • Flexbox
  • CSS Grid
  • Mobile-first workflow
  • React - JS library
    • Hooks
    • Custom Hooks
    • Context API
  • Vite - Build Tool
  • gh-pages - Deploy module

What I learned 🧠

I asked me when I have to use .js or .jsx in React files, until Vite throw an error where it couldn't read JSX syntax in a .js file, so I learned, if a file contains JSX, is preferable name it with .jsx.

When I was styling the cards, I had problems with the border top of Instagram card, border-color can't have a gradient as value. Researching I found a CSS property that allows it:

border-image: linear-gradient(yellow, pink) 1;

At the end I didn't use this property because it can't be rounded with border-radius, I used pseudo elements better, but I learned new things 😁.

When you build your React proyect in vite with npm run build, you can see the result with npm run preview, this pull up a server on port 4173.

Finally I learned how to deploy a React proyect with Vite and gh-pages npm module:

export default defineConfig({
	plugins: [react()],
	base: "/social-media-dashboard/",
});
"deploy": "gh-pages -d dist",
npm run deploy

Useful resources 📚

Author ✒️