DEV Community: Douglas Porto

Styling Your Site with Next.js and MUI: Creating a Dynamic Theme Switcher

Douglas Porto — Thu, 18 Apr 2024 21:18:00 +0000

Hello, devs! ✌🏾

As promised, I'm back to posting more frequently. Today, we're kicking off a series on using Material-UI with Next.js to create a simple switch between light and dark themes.

Starting a Next.js Project

Getting started is straightforward. Just follow the steps in the Next.js documentation:

npx create-next-app@latest

Once Next.js is installed, let's clean up the directory. Remove the files globals.css and page.module.css that we won't use.

In your page.tsx, the code should look like this:



export default function Home() {
  return <div>Hello world</div>
}

And don't forget to remove the import import "./globals.css"; in the layout.tsx file.

Installing Material-UI (MUI)

To get started with MUI, visit the Getting started section of the documentation. You can use npm, yarn, or pnpm for installation. Here, I'll use pnpm:

pnpm add @mui/material @emotion/react @emotion/styled

After installation, let's test by adding a button to the page to see if everything is correct:



import Button from "@mui/material/Button";

export default function Home() {
  return (
    <>
      <div>Hello world</div>
      <br />
      <Button>CLick here</Button>
    </>
  )
}

If everything is installed properly, your browser will display it like this:

Remember to start the Next.js server with pnpm dev.

Creating a Theme

Let’s create a theme.ts file in src/styles and set up a function to toggle the colors based on the chosen theme (light or dark):



import { PaletteMode } from "@mui/material";

const primaryDark = '#6a1b9a';
const primaryLight = '#4a148c';

export const getDesignTokens = (mode: PaletteMode) => ({
  palette: {
    mode,
    ...(mode === 'light'
      ? {
          primary: {
            main: primaryLight,
          },
        }
      : {
          // palette values for dark mode
          primary: {
            main: primaryDark,
          },
        })
  }
})

For example, if we opt for the dark theme, we'll use the lighter purple since the background will already be dark, and vice versa.

Implementing Theme Switch

In layout.tsx, add the following imports:



...
import { PaletteMode } from '@mui/material'
import CssBaseline from '@mui/material/CssBaseline'
import { ThemeProvider, createTheme } from '@mui/material/styles'
...

Set up a state to manage the theme and store it using useMemo:



const [mode, setMode] = useState<PaletteMode>('light')
const theme = useMemo(() => {
    return createTheme(getDesignTokens(mode))
}, [mode])

Add the Material-UI provider to manage theme changes:



...
<html lang="en">
  <body className={inter.className}>
      <ThemeProvider theme={theme}>
      <CssBaseline />
      {children}
    </ThemeProvider>
  </body>
</html>

Try toggling the state between light and dark:

Note: If you are using Next.js 14, include 'use client' at the beginning of the layout.tsx file.

Switching Themes with a Button

Create a button to easily switch the theme:



<Button onClick={() => setMode(mode === 'light' ? 'dark' : 'light')}>
  Toggle mode
</Button>

And voilà! Your site is now ready to switch between two modes.

Conclusion

Ideally, we should encapsulate all the theme logic in a provider to keep the layout clean and organized. This is just a simple example to kick-start your next project using Material-UI.

Got more tips? Questions or want to share another approach? Feel free to comment below!

Thanks for your attention, and see you next time!

GIT REPOSITORY

Material-UI: Turning Ideas into Interfaces with Style and Efficiency

Douglas Porto — Mon, 08 Apr 2024 18:53:01 +0000

Hey devs ✌🏾

Kicking off this post with an apology for being MIA for so long.

These past few months have been crazy busy.

Now that things are kinda calming down, I'm looking forward to dropping by more often to share some insights.

So, why am I such a fan of material-ui, even though it doesn't get a ton of buzz in the community?

In my journey as a full-stack developer, I've always been on the lookout for tools that not only streamline my workflow but also boost the end-user's quality and experience. Among the gems I've discovered, material-ui stands out as a priceless treasure for any React project. This post dives deep into why material-ui has become my go-to buddy for crafting sleek and efficient user interfaces.

Why Material-UI?

The first time I stumbled upon material-ui, I was drawn in by the promise of rich, pre-built components that follow Material Design principles. What I found was much more: a robust library that serves as a one-stop shop for UI/UX design, from grid systems to interactive icons. Every component in material-ui opens the door to an intuitive and accessible user interface, ready to be customized and integrated into projects of any scale.

Components that Speak

Every button, menu, and dialog in material-ui carries a user-centered design philosophy, ensuring that each element not only looks good but also feels intuitive to use. Embracing material-ui in my projects has allowed me to focus on crafting rich user experiences without getting bogged down in the technical details of building components from scratch.

Hassle-Free Customization

However, the real strength of Material-UI lies in its flexibility. With a detailed theming system and extensive customization options, I've been able to bring my design visions to life, tweaking components to perfectly fit the unique visual identity of each project. material-ui has equipped me with the tools to fine-tune styles, catering to both functional needs and aesthetic preferences.

Building the Future

Beyond the components and customization, material-ui represents a lively community of developers and designers committed to pushing the envelope in interface design. Incorporating material-ui into my projects has not only enhanced my front-end development but also connected me to a community of innovators, each contributing to the future of digital design.

Conclusion: A Union of Efficiency and Aesthetics

Adopting Material-UI was more than a technical decision; it was a commitment to efficiency, aesthetics, and user experience. For fellow developers looking to elevate their React projects, diving into the world of material-ui is a move that will transform not just your interfaces, but also how you approach software design and development.

I'm making a promise to you guys to start posting a lot of content here, building cool stuff with react and material-ui.

How to improve your developer skills in 2023

Douglas Porto — Wed, 18 Jan 2023 20:49:27 +0000

Hello again. I have come back to write a new article after a long time.
The year has just begun, and every new year we promise to improve our skills or new developers start their journey.
So I decided to write some tips for you to do that.

Create your roadmap.

If you search for a development roadmap, you will probably see this.
It will help you to know macro knowledge about front-end and back-end. I would suggest looking for your current position and creating a roadmap. For example, I already know about javascript, CSS, HTML, and React, but I've never studied unit tests.

So I create a list to learn the unity test

[ ] What is a unity test?
[ ] Libraries for unity test:
- [ ] Jest
- [ ] React Testing Library
- [ ] Cypress

Practice

I know studying the core and theories is very important. But practice is also necessary.
After reading articles, documents, and books about the unity test, It's time to get your hands dirty. You can create a new project or you can apply this knowledge to an existing project. If you haven't an idea or an existing project, you can get an idea from this link with many front-end challenges.

You learn more when you teach.

The time has come to validate the learning. Try to teach someone.

You can create a Youtube Channel or Twitch Live. You can also create articles like me. Another good way to practice would be to give talks and share your learning with friends before speaking at an event.
Or keep it simple, write about your learning on LinkedIn and ask people if they have any questions.

Just do it.

I promise you, if you follow these tips, by the end of the year, your knowledge will be improved considerably.
That's all for today. What about you, any advice? Share with us! Suggestions are always welcome.

Bye, see you next time.

Searching Github Users With AXIOS

Douglas Porto — Wed, 05 Dec 2018 15:26:57 +0000

In this article, we'll see in practice how to use AXIOS.
Getting straight to the point, we'll make a page that searches for a GitHub user and shows on-screen its repositories.

Having said that, let's go!

First, you'll create index.html and put on VUE and AXIOS by CDN.

<!DOCTYPE html>
<html lang="pt-br">
<head>
  <meta charset="utf-8">
  <meta name="format-detection" content="telephone=no">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
  <link rel="shortcut icon" href="assets/img/ico/favicon.ico">  
  <title></title>
</head>
<body>
  <div id="app"></div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.js"></script>
<script src="config/index.js"></script>
</body>
</html>

Then, create a config/index.js file to instantiate VUE.

In this step, we'll use two VUE variables:

user: for input text;
gitHub: for the API's return.

var app = new Vue({
  el: '#app',
  data: {
    user: '',
    github: {}
  },
})

Use the index.html to create the layout of your page. You can use the Bootstrapor any other framework if you want to make it more sophisticated. Check out the example:

  <nav class="nav navbar navbar-expand-lg navbar-light bg-light center">
    <a class="navbar-brand" href="#">Vue-js + Axios</a>
  </nav>
  <div class="container">
    <div class="row">      
      <div class="col-md-12 jumbotron">
        <form class="form-inline"  v-on:submit.prevent>
        <label class="sr-only" for="userGit">User</label>
        <div class="input-group mb-2 mr-sm-2">
          <div class="input-group-prepend">
            <div class="input-group-text">@</div>
          </div>
          <input type="text" class="form-control" id="userGit" v-model='user' placeholder="user">
        </div>
        <button type="submit" class="btn btn-primary mb-2" @click="searchGit" :class="{'disabled':user.trim()==''}">Search</button>
      </form>
    </div>
  </div>

Notice that the <form> has a v-on:submit.prevent just to avoid calling the submit function. Also, we use a @click="searchGit" tag to call the API information's search and a v-bind class to disable the <button> if the user is empty.

Axios

Apply AXIOS is the easiest part of the example. Let's check it out:

methods: {
  searchGit: function () {
    let api = 'https://api.github.com/users/' + this.user;
    vm = this;
    axios.get(api).then(function(response) {
      vm.github = response.data;
      console.log(vm.github);
    });
  }
}

You are now able to search for a user. Check the console to see the result. You'll see everything that the API GitHub provides.

The last step is to display its repositories. You can do it as follows:

<div v-if="github.name">
  <div class="row jumbotron">
    <div class="col-md-6">
      <div class="avatar">
        <img :src="github.avatar_url">
      </div>
      <div class="nickname">
        <h2>{ { github.name } }</h2>
        <h2 class="login"><small>({ { github.login } })</small></h2>
      </div>
    </div>
    <div class="col-md-6">
      <div class="pull-right well info">
        <ul>
          <li><h1>{ { github.public_repos } }</h1>Public Repos</li>
          <li><h1>{ { github.followers } }</h1>Followers</li>
        </ul>
      </div>
    </div>
  </div>
</div>

That's it!

Read the GitHub Documentation for further information and let the creativity flow!

Did you like this tip? Comment here below and let's talk.